vue项目全局修改el

2023-08-31 16:59| 来源: 网络整理| 查看: 265

修改前：在这里插入图片描述

效果图：在这里插入图片描述

代码修改：在APP.vue文件，或者某个.vue文件。在没有scoped的style标签里面修改：

.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); } } 样式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; }

【本文地址】

公司简介

联系我们