如何修改el-message-box布局组件的样式?

1,219 阅读1分钟

1.可以通过/deep/或者::v-deep(仅在cli3中生效)

通过官方提供的customClas--MessageBox 的自定义类名

!element-ui修改的样式不能在scoped中生效 需要单独写一个style标签 包裹修改的样式

export default{
    methods:{
        open(){
            this.$confirm('编辑数据未保存,确定要切换吗?','提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              customClass:"qiYuLogout"
            })
              .then(() => {
                
              })
              .catch(()=> {
                
              })
        }
    }
}
<style>
  .logout{
    width:406px!important;
  }
  .qiYuLogout{
      width:406px!important;//推荐写法
  }
</style>