this.$confirm('删除后无法恢复,你还要继续吗?', '删除用户信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'confirm'
      }).then(function(res) {

        console.log(res)

      }).catch(function(err) {
        console.log(err)
      })

问题:在js里定义了一个$confirm 修改弹框样式,没有效果,主要是因为这个div不是vue的组件 不具备组件的一些特性 所以不生效也是必然

解决问题:scoped不生效,那么只能将样式放全局,在当前组件加上一段不带scoped的style,或者放到全局样式表中

<style>
    .confirm{
      height: 160px;
    }
    .confirm .el-message-box__header{
      border-bottom: 1px solid #CCCCCC;
    }
    .confirm .el-message-box__container{
      text-align: center;
    }
    .confirm .el-message-box__status.el-icon-warning{
      left: 70px;
    }
    .confirm.el-message-box__title{
      font-size: 16px;
    }
    .confirm .el-message-box__message p {
      color: #F92D2D;
      margin-top: 5px;
    }
    .confirm .el-message-box__btns{
      text-align: center;
      margin-top: 10px;
    }
  
</style>

scoped会影响局部样式修改,当样式无法修改,首先要检查是否是scoped对其干扰了。

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐