element-ui修改样式
ElementUI是一款非常强大的前端UI组件库,它默认定义了很多美观的样式,但是我们在实际开发过程中不可避免地遇到需要修改ElementUI默认样式。下面总结了几种修改默认样式的方法
1.新建全局样式的文件
新建 global.css
文件,并在 main.js
中引入这个js文件。 global.css 文件一般都放在 src->assets 静态资源文件夹下的 style 文件夹下,在 main.js 的引用写法如下
import "./assets/style/global.css";
在 global.css 文件中写的样式,无论在哪一个 vue 单页面都会覆盖 ElementUI 默认的样式
2.在当前vue单页中添加一个style的标签
在当前的vue单页面的style
标签后,添加一对新的style标签,新的style标签中不要添加scoped属性。在有写scoped的style标签中书写的样式不会覆盖 ElementUI 默认的样式。
3. 使用 /deep/ 深度修改标签样式
找到需要修改的 ElementUI 标签的类名,然后在类名前加上 /deep/
,可以强制修改默认样式。这种方式可以直接用到有 scoped
属性的 style 标签中。
- 举例:修改 el-input 的样式
<el-input class="txt" v-model="user" placeholder="请输入用户名">
<i slot="suffix" style="display: flex;align-items: center;">
<img
class="icon"
src="/static/login_new/login_icon_account_hig.png"
alt=""/>
</i>
</el-input>
是这样的一个效果
当我添加代码
<style scoped>
.txt {
border-radius: 2.64rem !important;
}
</style>
样式并没有改变
- 使用深度选择器,格式如下;
<style scoped>
.txt /deep/ .el-input__inner {
border-radius: 2.64rem !important;
}
</style>
这样就成功改变了
4. 通过内联样式 或者 绑定类样式覆盖默认样式
通过内联样式style,绑定类样式的方式,可以在某些标签中可以直接覆盖默认样式,不是很通用。具体实例如下:
内联样式style的方式:
<el-button :style="selfstyle">默认按钮</el-button>
<script>
export default {
data() {
return {
selfstyle: {
color: "white",
marginTop: "10px",
width: "100px",
backgroundColor: "cadetblue"
}
};
}
}
</script>
- 通过绑定修改样式方式修改:
<el-button :class="[selfbutton]">默认按钮</el-button>
<script>
export default {
data() {
return {
selfbutton: "self-button"
};
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.self-button {
color: white;
margin-top: 10px;
width: 100px;
background-Color: cadetblue;
}
</style>
5.总结
- 第一种全局引入css文件的方式,适合于对elementUI整体的修改,比如整体配色的修改;
- 第二种添加一个style标签的形式,也能够实现修改默认样式的效果,但实际上因为是修改了全局的样式,因此在不同的vue组件中修改同一个样式有可能会有冲突。
- 第三种方式通过 /deep/ 的方式可以很方便的在vue组件中修改默认样式,也不会于其他页面有冲突。
- 第四种方式局限性比较大,可以使用,但不推荐使用