vue 样式,vue动态绑定css样式
这篇文章主要介绍了某视频剪辑软件如何统一样式(reset.css与border.css)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
统一样式(reset.css与reset.cssborder.cssvue基础样式应用
统一样式(reset.css与border.css)
reset.css
不同浏览器对相同标签的显示效果，有时候往往不同，那么在做项目的时候就需要对基本的样式进行设置，以达到在不同浏览器下显示效果是相同的，reset.css的作用就在于此。
所有，大家很有必要收藏一下，在做项目的时候直接使用即可。
代码：
@ charset utf-8 ；
html {
背景色：# fff
颜色：# 000;
字体大小：12px
}
身体，
ul，
ol，
dl，
dd，
h1，
h2，
h3，
h4，
h5，
h6，
图，
形式，
字段集，
传说，
输入，
文本区，
按钮，
p，
批量报价，
th，
td，
pre，
xmp {
边距：0;
填充：0
}
身体，
输入，
文本区，
按钮，
选择，
pre，
xmp，
tt，
代码，
kbd，
样品
行高：1.5;
字体系列：tahoma，arial， Hiragino Sans GB ，simsun，sans-serif
}
h1，
h2，
h3，
h4，
h5，
h6，
小，
大，
输入，
文本区，
按钮，
选择{
字体大小：100%
}
h1，
h2，
h3，
h4，
h5，
h6 {
字体系列：tahoma，arial， Hiragino Sans GB ，微软雅黑、simsun、无衬线
}
h1，
h2，
h3，
h4，
h5，
h6，
b，
强{
字体粗细：正常
}
地址，
引用，
dfn，
em，
我，
optgroup，
var {
字体样式：正常
}
表格{
边框-塌陷：塌陷；
边框间距：0;
文本对齐：左对齐
}
标题，
th {
文本对齐：继承
}
ul，
ol，
菜单{
列表样式：无
}
字段集，
img {
边框：0
}
img，
对象，
输入，
文本区，
按钮，
选择{
垂直对齐：居中
}
文章，
先不说，
页脚，
标题，
部分，
导航，
图，
图片说明，
h组，
细节，
菜单{
显示：块
}
音频，
画布，
视频{
显示：内嵌-块；
*显示：内嵌；
*缩放比例：1
}
批量报价：之前，
批量报价：之后，
问：之前，
问：在{
内容："\0020"
}
文本区域{
溢出：自动；
调整大小：垂直
}
输入，
文本区，
按钮，
选择，
一个{
大纲：0无；
边框：无；
}
按钮：-moz-focus-inner，
输入：-moz-focus-inner {
填充：0;
边框：0
}
标记{
背景色：透明
}
一，
ins，
s，
u，
德尔{
文本装饰：无
}
sup，
子{
垂直对齐：基线
}
html {
溢出-x:隐藏；
身高：100%;
字体大小：50px
-网络工具包-点击-高亮-颜色：透明；
}
正文{
字体系列：Arial，微软雅黑，‘Helvetica新、Helvetica、无衬线；
颜色：# 333;
字体大小：28em
行高：1;
-webkit-text-size-adjust:无；
}
hr {
身高：02雷姆；
边距：1雷姆0；
边框：中无；
边框顶部：02雷姆固体#卡卡卡；
}
一个{
颜色：# 25a4bb
文字-装饰：无；
}
border.css
该钢性铸铁样式用于解决移动端一像素边框问题。
问题分析：有些手机的屏幕分辨率较高，是2-3倍屏幕。
钢性铸铁样式中边框：1px纯红；在2倍屏下，显示的并不是一个物理像素，而是2个物理像素。为了解决这个问题，引入border.css是非常有必要的。
代码：
@ charset utf-8 ；边框，边框顶部，右边的边界，边框-底部，边框-左侧，边框-顶部底部，边框-右-左，边框-顶部左侧，右下边框，边框-右上方，边框-左下{
位置：相对；
}。边框：之前，边框-顶部：之前，右边框：之前，边框-底部：之前，边框-左侧：之前，边框-顶部底部：之前，边框-顶部底部：之后，边框-左右：之前，边框-左右：之后，border-topleft:之前，border-topleft:之后，边框-右下方：之前，边框-右下方：之后，边框-右上：之前，边框-右上：之后，边框-左下：之前，border-bottomleft:after {
内容："\ 0020";
溢出：隐藏；
位置：绝对；
}
/*边框
* 因，边框是由伪元素区域遮盖在父级
* 故，子级若有交互，需要对子级设置
* 定位及z轴
*/。边框：之前{
框大小：边框-框；
top:0；
左：0;
身高：100%;
宽度：100%;
边框：1px固体# eaeaea
转换原点：0 0;
}。边框-顶部：之前，边框-底部：之前，边框-顶部底部：之前，边框-顶部底部：之后，border-topleft:之前，边框-右下方：之后，边框-右上：之前，边框-左下角*之前{
左：0;
宽度：100%;
高度：1px
}。右边框：之前，边框-左侧：之前，边框-左右：之前，边框-左右：之后，border-topleft:之后，边框-右下方：之前，边框-右上：之后，border-bottomleft:after {
top:0；
宽度：1px
身高：100%;
}。边框-顶部：之前，边框-顶部底部：之前，border-topleft:之前，border-topright:before {
border-top:1px solid # eaeaea；
转换原点：0 0;
}。右边框：之前，边框-右下方：之前，边框-左右：之前，border-topright:after {
border-right:1px solid # eaeaea；
变换原点：100% 0;
}。边框-底部：之前，边框-顶部底部：之后，边框-右下方：之后，边框-左下角*之前{
border-bottom:1px solid # eaeaea；
变换原点：0 100%;
}。边框-左侧：之前，border-topleft:之后，边框-左右：之后，border-bottomleft:after {
border-left:1px solid # eaeaea；
转换原点：0 0;
}。边框-顶部：之前，边框-顶部底部：之前，border-topleft:之前，border-topright:before {
top:0；
}。右边框：之前，边框-左右：之后，边框-右下方：之前，border-topright:after {
右：0;
}。边框-底部：之前，边框-顶部底部：之后，边框-右下方：之后，border-bottomleft:after {
底部：0;
}。边框-左侧：之前，边框-左右：之前，border-topleft:之后，边框-左下角*之前{
左：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) {
/* 默认值，无需重置*/
}
@媒体(最小蚊子设备像素比：1.5)和（最大蚊子设备像素比：2.49)，(-WebKit-最小设备像素比：1.5)和(-网络工具包-最大设备像素比：2.49),(最小设备像素比：1.5)和（最大设备像素比：2.49),(最小分辨率：144dpi)和（最大分辨率：239dpi)，(最小分辨率：1.4)。边框：之前{
宽度：200%;
身高：200%;
变换：缩放(。5);
}。边框-顶部：之前，边框-底部：之前，边框-顶部底部：之前，边框-顶部底部：之后，border-topleft:之前，边框-右下方：之后，边框-右上：之前，边框-左下角*之前{
转换：scaleY(。5);
}。右边框：之前，边框-左侧：之前，边框-左右：之前，边框-左右：之后，border-topleft:之后，边框-右下方：之前，边框-右上：之后，border-bottomleft:after {
转换：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) {。边框：之前{
宽度：300%;
身高：300%;
变换：缩放(.33333);
}。边框-顶部：之前，边框-底部：之前，边框-顶部底部：之前，边框-顶部底部：之后，border-topleft:之前，边框-右下方：之后，边框-右上：之前，边框-左下角*之前{
变换：scaleY(。33333);
}。右边框：之前，边框-左侧：之前，边框-左右：之前，边框-左右：之后，border-topleft:之后，边框-右下方：之前，边框-右上：之后，border-bottomleft:after {
转换：scaleX(。33333);
}
}
使用方法：在某视频剪辑软件项目中的入口文件主页。射流研究…中引入即可。
//在入口文件中引入基本样式
"导入"。/assets/styles/reset.css
"导入"。/assets/styles/border.css
vue基础样式应用
用于记录自己经常用到的一些样式
1、文本溢出隐藏
模板槽-范围="范围"
div class= text-hidden“{ scope。划。地址} }/div
/模板。文本-隐藏{
溢出：隐藏；
文本溢出：省略号；
空白：nowrap
}
溢出：隐藏；
文本粗细：省略；
空白：正常；
断字：全断；
自动换行：断字；
显示：-WebKit-box；
-WebKit-line-clamp:1；
-webkit-box-orient:垂直；
2.大的外边框，类似卡片的样式。商店检查{
边框：1px纯色# 999;
边距：20px
边框半径：10px
填充：20px
box-shadow:2px 4px 6px # 999；
背景色：# fff
}
3、详情普通表格
el-dialog title=店铺发布详情：可见。sync=对话框可见宽度= 50%
div class=表迪
表格边框=0 单元格间距=1 单元格填充=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{{ msg.type }}/td
/tr
tr
任务描述店铺地区/td
td{{ msg.area}}/td
/tr
tr
任务描述店铺详细地址/td
td{{ msg.address }}/td
/tr
tr
任务描述联系号码/td
td{{ msg.mobile }}/td
/tr
tr
任务描述发布时间/td
td{{ msg.create_time }}/td
/tr
tr
任务描述浏览量/td
td{{ msg.views }}/td
/tr
tr
任务描述文章内容/td
td{{ msg.content }}/td
/tr
tr
任务描述图片/td
任务描述
El-image v-viewer= { movable:false，title:false } :src= msg。images class= img /El-image
/td
/tr
/表格
/div
span slot=页脚 class=对话框-页脚
El-button @ click=对话框可见=假关闭/el-button
/span
/el-dialog。表d表{
背景：# 999;
宽度：100%;
}。表d表td {
背景：# fff
填充：20px
文本对齐：居中；
行高：1.5;
}
4、输入框长度限制
El-在数据中输入v-model=。name maxlength= 30 show-word-limit placeholder=请输入通告标题/el-input
5、看图插件的引入（观众)这个插件比元素的图像图片操作更多
电视观众文档
新公共管理安装五-查看器-保存
在主要的中配置
从"虚拟浏览器"导入浏览器
导入 viewerjs/dist/viewer.css
Vue.use(查看器)
Viewer.setDefaults(
{选项：{
标题:假，
},
})
使用
El-image v-viewer= { movable:false，title:false } :src= msg。images class= img div slot= error class= image-slot /div/El-image
和元素模态框混用时，出现的层级错乱。el-dialog__wrapper{
z指数：2014!重要；
}。垂直模态{
z指数：2000!重要；
}
5、对元素表格某列进行修改
埃尔-表格-列属性=地址标签=方式
模板槽-范围="范围"
span { { scope。划。条件条件} }/span
/模板
/El-表格-列
表格里的图片样式
模板槽-范围="范围"
El-image v-viewer= { mobile:false，title:false } :src= scope。划。images[0] class= table img v-if= scope。划。图像[0]/El-image
/模板
6、搜索框
el-container class=imgsearch
埃尔输入
占位符=请输入要搜索标题或内容
前缀图标=el图标搜索
v-model=input2
style= width:300 px；右边距：20px
@input=change
@change=search
maxlength=255
/el-input
分区/分区
埃尔-选择
v-model=值
占位符=筛选信息类型
style=margin-right: 20px
:clearable=true
@clear=getList
埃尔选项
v-for=选项中的项目
:key=item.value
:label=item.label
:value=item.value
/el选项
/el-select
El-button type= primary @ click= search 搜索/el-button
/El-容器
7、元素表格中的按钮
模板槽-范围="范围"
El-button @ click= pay(范围。row):plain= true type= success size= small 支付/el-button
El-button @ click= look(范围。row) size= small type= warning plain查看/el-button
El-button @ click= auth(范围。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
/模板
9、引用挽救(保存的简写)图标
SVG-icon:icon class=" name[index] class= icon /
10、输入框只能输入数字，限制长度
maxlength=4
value=value.replace(/[^\d]/g,)
10、设置滚动条样式
:-网络工具包-滚动条{
-网络工具包-外观：无；
宽度：7px
}
:-网络工具包-滚动条-缩略图{
边框-半径：4px
背景色：rgba(222，222，227.8);
-WebKit-box-shadow:0 0 1px rgba(255，255，255，5);
}
//隐藏火狐滚动条
溢出：自动；
/*溢出：滚动；*/
溢出-x:隐藏；
溢出-y:滚动；
滚动条宽度：无；
滚动条颜色：透明透明；
滚动条-轨道-颜色：透明；
-ms-滚动条-轨道-颜色：透明；
11、元素上传走自己的请求
埃尔-上传
action=#
list-type=图片卡
:on-success=uploadImg
:on-remove=handleRemove
:limit=1
:file-list=fileList
:http-request=upImg
img src=./资产/img/上传。png class= center img /
/El-上传
upImg(param) {
const formData=new formData()；
formData.append(file ，param。文件)；
这个1000美元http。上传（表单数据)。然后((res)={
})。catch((err)={
});
},
12、让文本框文本区域不可拖动
文本区域{
调整大小：无；
}
13.隐藏滚动条
溢出：滚动；
溢出-x:隐藏；
溢出-y:滚动；
滚动条宽度：无；
滚动条颜色：透明透明；
滚动条-轨道-颜色：透明；
-ms-滚动条-轨道-颜色：透明；
14.抓到元素选择器下面的那个弹窗
//:popper-append-to-body= false 加上这个字段
El-select v-model= value placeholder=选择名称 select list-item :popper-append-to-body= false
埃尔选项
v-for=选项中的项目
:key=item.value
:label=item.label
:value=item.value
/el选项
/el-select。索引100 . El-选择-下拉菜单{
颜色：#fff！重要；
背景色：#277fba！重要；
边框：无；
盒影：0 0 10px rgba(255，255，255，3);
}。索引100 . El-选择-下拉菜单el-select-dropdown__empty{
颜色：#fff！重要；
}。索引100 . El-选择-下拉菜单el-select-dropdown__item{
颜色：#fff！重要；
}。索引100 . El-选择-下拉菜单。悬停{
背景：#186192!重要；
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。