标签：el 自定义 elementUI 样式 confirm message type

原生API：MessageBox提示框

使用element-ui的$confirm弹出框，它的默认样式如下：

 但是往往我们在项目中 根据需求会定制化，进行弹框内部的自定义内容或样式：

1、交换取消和确定按钮：

 利用消息框的自定义类名customClass 深度修改按钮位置。

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  customClass:'del-model',
  type: 'warning'
}).then(() => {
    this.$message({
    type: 'success',
    message: '删除成功!'
  });
}).catch(() => {
  this.$message({
    type: 'info',
    message: '已取消删除'
  });          
});

//注意这里不能将样式放到scoped中
<style lang='stylus'>
.del-model {
  .el-message-box__btns {
    .el-button:nth-child(1) {
      float:right;
    }
    .el-button:nth-child(2) {
      margin-right:10px;
      background-color:#2d8cf0;
      border-color:#2d8cf0;
    }
  }
}
</style>

修改后的样式如下：

2、自定义内容

const h = this.$createElement
this.$confirm('', {
  message:h('div',null, [
    h('i',{ class:'el-icon-question',style:'color:#f90;font-size:30px;' }),
    h('span',{ style:'margin-left:10px;font-size:16px;line-height:30px;font-weight:600;vertical-align:top;'}, '提示'),
    h('p',{ style:'margin:10px 0 0 40px;' },'此操作将永久删除该文件, 是否继续?')
  ]),
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  customClass:'del-model',
  closeOnClickModal:false,
  closeOnPressEscape:false,
})
  .then(() => {
    this.$message({
      type: 'success',
      message: '删除成功!'
    });
  })
  .catch(() => {
    this.$message({
      type: 'info',
      message: '已取消删除'
    });          
  });

样式如下：

转自：https://www.cnblogs.com/morango/p/15353329.html

标签：el,自定义,elementUI,样式,confirm,message,type
来源： https://www.cnblogs.com/javalinux/p/16025439.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。