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之外的地方会出现样式污染全局的情况。