Element-ui+Vue-cli可是说很常见的搭配,但是有写样式,需要根据自身需求进行修改

运行环境 Runtime environment

1
2
3
4
操作系统 : Windows10
IDE: JetBrains WebStorm 2020.2.4 x64
浏览器: Google Chrome 版本 67.0.3396.99(正式版本) (64 位)&& FireFox Developer Edition 版本63.0b4 (64位)
VueCli : 3

示例代码

1
<el-button type="primary">主要按钮</el-button>

修改默认样式

改成透明带动画效果的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.el-button--primary {
color: #fff;
font-size: 12px;
background-color: rgba(153,204,255,0.5);
border: 1px solid #99CCFF;
transition: all 0.8s;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
}
.el-button--primary:hover {
color: aquamarine;
font-size: 12px;
background-color: rgba(153,204,255,0.5);
border: 1px solid #99CCFF;
}
.el-button--primary:focus {
background-color: rgba(153,204,255,0.5);
border: 1px solid #99CCFF;
}

总结

由于vue文件里面 style 标签中带有scoped。表示 添加“作用域”属性以将CSS仅限于此组件 。

所以不用担心在这个VUE之外的地方会出现样式污染全局的情况。