element el-button按钮，根据不同数据改变按钮type类型调整按钮颜色

最新推荐文章于 2024-03-23 10:41:03 发布

蓝胖子的多啦A梦

最新推荐文章于 2024-03-23 10:41:03 发布

阅读量5.7k

点赞数 2

分类专栏： vue element 修改默认样式文章标签：前端 vue.js elementui

本文链接：https://blog.csdn.net/Maxueyingying/article/details/126951859

版权

vue 同时被 3 个专栏收录

98 篇文章 4 订阅

订阅专栏

element

51 篇文章 0 订阅

订阅专栏

修改默认样式

20 篇文章 0 订阅

订阅专栏

需求：状态弹框中每个按钮颜色都不同，因为使用的是统一的弹框组件，所以就想了一下，element ui 按钮的type类型是否可以根据不同的条件进行动态取值讷，然后再调整颜色讷？
在这里插入图片描述
代码实现：

<el-button size="mini" :type="buttonType(title)" @click="clickOk()">
            Confirm
 </el-button>

methods：

 buttonType(val) {
      if (val == "Success") {
        return "primary";
      } else if (val == "Eror") {
        return "danger";
      } else {
        return "info";
      }
    },

css样式：

<style lang="scss" >
  .el-button--primary {
    background: #409e2a;
    border-color: #409e2a;
  }
  .el-button--info {
    background-color: #ebd70a;
    border-color: #ebd70a;
  }
}
</style>