vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue全局修改el-button样式

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;
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文