elementUI中$confim/MessageBox修改confirmButtonClass不生效问题记录

╰+攻爆jí腚メ 2023-10-07 21:12 90阅读 0赞

因为默认的消息弹窗里面，刚点开的时候，那个确定按钮颜色有点浅，好像是处于hover状态，当鼠标点击了标题或者别的地方就好了，但是这样就会出现一定的视觉差，所以想要把它设置一下初始状态颜色：confirmButtonClass: 'btn-class',

<template>
      <div id="app">
        <el-button
          type="text"
          class="open-msg"
          @click="open"
        >点击打开 Message Box</el-button>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'App',
      data() {
        return {}
      },
      methods: {
        open() {
          this.$alert('这是一段内容', '标题名称', {
            confirmButtonText: '确定',
            confirmButtonClass: 'btn-class',
            callback: (action) => {
              this.$message({
                type: 'info',
                message: `action: ${action}`
              })
            }
          })
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
      .open-msg {
        color: red;
      }
    }
    
    .btn-class {
      color: #fff;
      background-color: #409eff !important;
      border-color: #409eff !important;
    }
    </style>

本以为这样就可以了，但是发现那个类名怎么也上不去：

![2adabec8d5a541fdb9a4b6a0a7048265.png][]

正常的颜色应该是这样的：更深一点![164c4495b452401798845543065a87ad.png][]

然后就把scoped去掉了，就好了：

![d54594f8aa9f4355b80d2e1eeac2e741.png][]

一般情况下我们在项目中的style会使用scoped，进行一个作用域的限制。所以，这个时候btn-class。给comfim设置class是不会生效的。因为跨作用域了哦~。

[2adabec8d5a541fdb9a4b6a0a7048265.png]: https://img-blog.csdnimg.cn/2adabec8d5a541fdb9a4b6a0a7048265.png
[164c4495b452401798845543065a87ad.png]: https://img-blog.csdnimg.cn/164c4495b452401798845543065a87ad.png
[d54594f8aa9f4355b80d2e1eeac2e741.png]: https://img-blog.csdnimg.cn/d54594f8aa9f4355b80d2e1eeac2e741.png