自定義elementUI中的$confirm彈出框 （內容、圖標、樣式）

原生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: '已取消刪除'
    });          
  });

樣式如下：