vue项目如何全局修改el-button样式
作者:公孙元二
这篇文章主要介绍了vue项目如何全局修改el-button样式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
vue全局修改el-button样式
修改前
效果图:
代码修改
在APP.vue文件,或者某个.vue文件。
在没有scoped的style标签里面修改:
<style lang="scss"> .el-button--primary{ color: #1686f5; background-color: rgb(240, 248, 255); border-color: rgb(148, 197, 238); font-size: 14px; &:hover { color: rgb(240, 248, 255); background-color: rgb(148, 197, 238); border-color: rgb(148, 197, 238); } &:active { color: rgb(240, 248, 255); background-color: rgb(148, 197, 238); border-color: rgb(148, 197, 238); } } <style>
样式2
代码:
.el-button--primary { color: #1c242c; background-color:#f2f6fc; border: none; font-size: 14px; &:hover { color: #2483ff; background-color: rgb(242,246,252); } &:active { color: #2483ff; background-color: rgb(242,246,252); } }
因为本案例修改了primary类型的el-button按钮样式,如果项目中使用了饿了么的this.$confirm,因为确定按钮也是primary类型,所以需要调整primary类型按钮的样式,在App.vue文件(不带scoped的style标签里写入以下代码):
.confirmButton-reset{ // background: #fff !important; // color: #606266 !important; font-size: 12px; // border-color: #DCDFE6;; }
在使用了confirm组件的地方,修改确定按钮按钮所使用的样式class:
this.$confirm('确定要删除?', '确认信息', { distinguishCancelAndClose: true, confirmButtonText: '确定', cancelButtonText: '取消', confirmButtonClass: 'confirmButton-reset' }) .then(() => {
如果想给所有的el-button设置统一样式,比如设置一样的字体大小,代码如下:
.el-button { margin-top:3px; font-size: 14px; }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。