vue如何统一样式(reset.css与border.css)
作者:杨爽的博客
这篇文章主要介绍了vue如何统一样式(reset.css与border.css),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
统一样式(reset.css与border.css)
reset.css
不同浏览器对相同标签的显示效果,有时候往往不同,那么在做项目的时候就需要对基本的样式进行设置,以达到在不同浏览器下显示效果是相同的,reset.css的作用就在于此。
所有,大家很有必要收藏一下,在做项目的时候直接使用即可。
代码:
@charset "utf-8"; html { background-color: #fff; color: #000; font-size: 12px } body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, figure, form, fieldset, legend, input, textarea, button, p, blockquote, th, td, pre, xmp { margin: 0; padding: 0 } body, input, textarea, button, select, pre, xmp, tt, code, kbd, samp { line-height: 1.5; font-family: tahoma, arial, "Hiragino Sans GB", simsun, sans-serif } h1, h2, h3, h4, h5, h6, small, big, input, textarea, button, select { font-size: 100% } h1, h2, h3, h4, h5, h6 { font-family: tahoma, arial, "Hiragino Sans GB", "微软雅黑", simsun, sans-serif } h1, h2, h3, h4, h5, h6, b, strong { font-weight: normal } address, cite, dfn, em, i, optgroup, var { font-style: normal } table { border-collapse: collapse; border-spacing: 0; text-align: left } caption, th { text-align: inherit } ul, ol, menu { list-style: none } fieldset, img { border: 0 } img, object, input, textarea, button, select { vertical-align: middle } article, aside, footer, header, section, nav, figure, figcaption, hgroup, details, menu { display: block } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1 } blockquote:before, blockquote:after, q:before, q:after { content: "\0020" } textarea { overflow: auto; resize: vertical } input, textarea, button, select, a { outline: 0 none; border: none; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0 } mark { background-color: transparent } a, ins, s, u, del { text-decoration: none } sup, sub { vertical-align: baseline } html { overflow-x: hidden; height: 100%; font-size: 50px; -webkit-tap-highlight-color: transparent; } body { font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif; color: #333; font-size: .28em; line-height: 1; -webkit-text-size-adjust: none; } hr { height: .02rem; margin: .1rem 0; border: medium none; border-top: .02rem solid #cacaca; } a { color: #25a4bb; text-decoration: none; }
border.css
该css样式用于解决移动端1像素边框问题。
问题分析:有些手机的屏幕分辨率较高,是2-3倍屏幕。
css样式中border:1px solid red;在2倍屏下,显示的并不是1个物理像素,而是2个物理像素。为了解决这个问题,引入border.css是非常有必要的。
代码:
@charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-bottomleft { position: relative; } .border::before, .border-top::before, .border-right::before, .border-bottom::before, .border-left::before, .border-topbottom::before, .border-topbottom::after, .border-rightleft::before, .border-rightleft::after, .border-topleft::before, .border-topleft::after, .border-rightbottom::before, .border-rightbottom::after, .border-topright::before, .border-topright::after, .border-bottomleft::before, .border-bottomleft::after { content: "\0020"; overflow: hidden; position: absolute; } /* border * 因,边框是由伪元素区域遮盖在父级 * 故,子级若有交互,需要对子级设置 * 定位 及 z轴 */ .border::before { box-sizing: border-box; top: 0; left: 0; height: 100%; width: 100%; border: 1px solid #eaeaea; transform-origin: 0 0; } .border-top::before, .border-bottom::before, .border-topbottom::before, .border-topbottom::after, .border-topleft::before, .border-rightbottom::after, .border-topright::before, .border-bottomleft::before { left: 0; width: 100%; height: 1px; } .border-right::before, .border-left::before, .border-rightleft::before, .border-rightleft::after, .border-topleft::after, .border-rightbottom::before, .border-topright::after, .border-bottomleft::after { top: 0; width: 1px; height: 100%; } .border-top::before, .border-topbottom::before, .border-topleft::before, .border-topright::before { border-top: 1px solid #eaeaea; transform-origin: 0 0; } .border-right::before, .border-rightbottom::before, .border-rightleft::before, .border-topright::after { border-right: 1px solid #eaeaea; transform-origin: 100% 0; } .border-bottom::before, .border-topbottom::after, .border-rightbottom::after, .border-bottomleft::before { border-bottom: 1px solid #eaeaea; transform-origin: 0 100%; } .border-left::before, .border-topleft::after, .border-rightleft::after, .border-bottomleft::after { border-left: 1px solid #eaeaea; transform-origin: 0 0; } .border-top::before, .border-topbottom::before, .border-topleft::before, .border-topright::before { top: 0; } .border-right::before, .border-rightleft::after, .border-rightbottom::before, .border-topright::after { right: 0; } .border-bottom::before, .border-topbottom::after, .border-rightbottom::after, .border-bottomleft::after { bottom: 0; } .border-left::before, .border-rightleft::before, .border-topleft::after, .border-bottomleft::before { left: 0; } @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) { /* 默认值,无需重置 */ } @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) { .border::before { width: 200%; height: 200%; transform: scale(.5); } .border-top::before, .border-bottom::before, .border-topbottom::before, .border-topbottom::after, .border-topleft::before, .border-rightbottom::after, .border-topright::before, .border-bottomleft::before { transform: scaleY(.5); } .border-right::before, .border-left::before, .border-rightleft::before, .border-rightleft::after, .border-topleft::after, .border-rightbottom::before, .border-topright::after, .border-bottomleft::after { transform: scaleX(.5); } } @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) { .border::before { width: 300%; height: 300%; transform: scale(.33333); } .border-top::before, .border-bottom::before, .border-topbottom::before, .border-topbottom::after, .border-topleft::before, .border-rightbottom::after, .border-topright::before, .border-bottomleft::before { transform: scaleY(.33333); } .border-right::before, .border-left::before, .border-rightleft::before, .border-rightleft::after, .border-topleft::after, .border-rightbottom::before, .border-topright::after, .border-bottomleft::after { transform: scaleX(.33333); } }
使用方法:在vue项目中的入口文件main.js中引入即可。
// 在入口文件中引入基本样式 import './assets/styles/reset.css' import './assets/styles/border.css'
vue基础样式应用
用于记录自己经常用到的一些样式
1、文本溢出隐藏
<template slot-scope="scope"> <div class="text-hidden">{{ scope.row.address }}</div> </template>
.text-hidden{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
overflow: hidden; text-weight: ellipsis; white-space: normal; word-break: break-all; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
2.大的外边框,类似卡片的样式
.shopcheck { border: 1px solid #999; margin: 20px; border-radius: 10px; padding: 20px; box-shadow: 2px 4px 6px #999; background-color: #fff; }
3、详情普通表格
<el-dialog title="店铺发布详情" :visible.sync="dialogVisible" width="50%"> <div class="table-d"> <table border="0" cellspacing="1" cellpadding="0"> <tr> <td style="width: 100px">店铺名</td> <td>{{ pub_shop.shop_name }}</td> </tr> <tr> <td style="width: 100px">店铺联系方式</td> <td>{{ pub_shop.shop_mobile }}</td> </tr> <tr> <td style="width: 100px">文章标题</td> <td>{{ msg.title }}</td> </tr> <tr> <td>类型</td> <td>{{ msg.type }}</td> </tr> <tr> <td>店铺地区</td> <td>{{ msg.area}}</td> </tr> <tr> <td>店铺详细地址</td> <td>{{ msg.address }}</td> </tr> <tr> <td>联系号码</td> <td>{{ msg.mobile }}</td> </tr> <tr> <td>发布时间</td> <td>{{ msg.create_time }}</td> </tr> <tr> <td>浏览量</td> <td>{{ msg.views }}</td> </tr> <tr> <td>文章内容</td> <td>{{ msg.content }}</td> </tr> <tr> <td>图片</td> <td> <el-image v-viewer="{movable: false,title:false}" :src="msg.images" class="img" ></el-image> </td> </tr> </table> </div> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">关闭</el-button> </span> </el-dialog>
.table-d table { background: #999; width: 100%; } .table-d table td { background: #fff; padding: 20px; text-align: center; line-height: 1.5; }
4、input框长度限制
<el-input v-model="inData.name" maxlength="30" show-word-limit placeholder="请输入通告标题"></el-input>
5、看图插件的引入( viewer )这个插件比element的image图片操作更多
npm install v-viewer --save
在main中配置
import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults( {options:{ 'title':false, }, })
使用
<el-image v-viewer="{movable: false,title:false}" :src="msg.images" class="img" ><div slot="error" class="image-slot"> </div></el-image>
和element模态框混用时,出现的层级错乱
.el-dialog__wrapper{ z-index: 2014 !important; } .v-modal{ z-index: 2000 !important; }
5、对element表格某列进行修改
<el-table-column prop="address" label="方式"> <template slot-scope="scope"> <span>{{ scope.row.condition | condition }}</span> </template> </el-table-column>
表格里的图片样式
<template slot-scope="scope"> <el-image v-viewer="{movable: false,title:false}" :src="scope.row.images[0]" class="tableimg" v-if="scope.row.images[0]" ></el-image> </template>
6、搜索框
<el-container class="imgsearch" ><el-input placeholder="请输入要搜索标题或内容" prefix-icon="el-icon-search" v-model="input2" style="width: 300px; margin-right: 20px" @input="change" @change="search" maxlength="255" > </el-input> <div></div> <el-select v-model="value" placeholder="筛选信息类型" style="margin-right: 20px" :clearable='true' @clear='getList' > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> <el-button type="primary" @click="search">搜索</el-button> </el-container>
7、element 表格中的按钮
<template slot-scope="scope"> <el-button @click="pay(scope.row)" :plain="true" type="success" size="small">支付</el-button> <el-button @click="look(scope.row)" size="small" type="warning" plain>查看</el-button> <el-button @click="auth(scope.row)" :plain="true" size="small" type="primary">修改</el-button> <el-button type="danger" plain size="small" @click="del(scope.row)" style="margin-right: 10px">删除</el-button> </template>
9、引用svg图标
<svg-icon :iconClass="classname[index]" class="icon"/>
10、输入框只能输入数字,限制长度
maxlength="4" oninput = "value=value.replace(/[^\d]/g,'')"
10、设置滚动条样式
::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(222, 222, 227,.8); -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5); } // 隐藏火狐滚动条 overflow:auto; /* overflow: scroll; */ overflow-x:hidden; overflow-y: scroll; scrollbar-width: none; scrollbar-color: transparent transparent; scrollbar-track-color: transparent; -ms-scrollbar-track-color: transparent;
11、element上传走自己的请求
<el-upload action="#" list-type="picture-card" :on-success="uploadImg" :on-remove="handleRemove" :limit="1" :file-list="fileList" :http-request="upImg" > <img src="../assets/img/upload.png" class="centerimg" /> </el-upload>
upImg(param) { const formData = new FormData(); formData.append("file", param.file); this.$http .upLoadImg(formData) .then((res) => { }) .catch((err) => { }); },
12、让文本框textarea不可拖动
textarea{ resize: none; }
13.隐藏滚动条
overflow: scroll; overflow-x:hidden; overflow-y: scroll; scrollbar-width: none; scrollbar-color: transparent transparent; scrollbar-track-color: transparent; -ms-scrollbar-track-color: transparent;
14.抓到element选择器下面的那个弹窗
// :popper-append-to-body="false" 加上这个字段 <el-select v-model="value" placeholder="选择名称" class="selectList-item" :popper-append-to-body="false" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select>
.index >>> .el-select-dropdown { color: #fff !important; background-color:#277fba !important; border: none; box-shadow: 0 0 10px rgba(255, 255, 255,.3); } .index >>> .el-select-dropdown .el-select-dropdown__empty{ color: #fff !important; } .index >>> .el-select-dropdown .el-select-dropdown__item{ color: #fff !important; } .index >>> .el-select-dropdown .hover{ background: #186192 !important; }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。