vue + emelent弹窗按钮样式修改

原创

于 2021-11-26 10:32:13 发布 · 2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #vue.js #javascript

本文介绍了如何在Vue项目中修改Element UI弹窗的确定和取消按钮样式。针对局部和全局修改，分别提供了详细步骤。需要注意，样式不能在 scoped 的 style 中，并且在某些情况下需要使用 !important 以覆盖原有样式。同时，讨论了 !important 在CSS中的作用以及Vue组件中 scoped 属性的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

默认弹窗

   this.$confirm('这是一段信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      }).catch(() => {

      })

1、局部修改确定取消按钮的位置

注意：样式不能在到带scoped的style中

//设置取消按钮向右浮动，左magin为10px，即与确定按钮间距为10px
.btn-custom-cancel {
  float: right;
  margin-left: 10px;
}

   this.$confirm('这是一段信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning'
      }).then(() => {
      }).catch(() => {

      })

2、全局有修改确定取消按钮的位置

   this.$confirm('这是一段信息？', '提示', {
        conf

最低0.47元/天解锁文章

200万优质内容无限畅学