前端基础学习-MessageBox的DIY方法

前端基础学习-MessageBox的DIY方法

在element-ui上对于MessageBox其实给我们提供了很多种类，但是很多情况下我们需要对他们的样式进行改写，下面记录我遇到过的两个改写的情况
（1）$confirm需要展示多行

      const confirmText = ['每条数据只能检测三次', '确认检查吗？']
      const newDatas = []
      const h = this.$createElement
      for (const i in confirmText) {
        newDatas.push(h('p', null, confirmText[i]))
      }
      this.$confirm('', '提示', {
        message: h('div', null, newDatas),
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        this.$message.success('检查成功！')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消检查'
        })
      })

这里主要把多行数据推入数组然后循环展示
（2）展示多行并且需要改变其中一行和整体的样式

不要介意样式比较丑。只是为了做出这个效果
其实后来发现基本上使用$msgbox就可以了，如果需要$confirm，只用加上

type: 'warning'

整体代码

      this.confirmTitle = '该条数据为默认数据'
      const confirmText = '确定进行删除吗？（不能真的删除）'
      const h = this.$createElement
      this.$msgbox({
        title: '删除',
        message: h('p', null, [
          h('p', null, this.confirmTitle),
          // 对第二行单独设置样式
          h('p', { style: 'background-color: #f4f9ff;width:100%;margin-top: 10px' }, confirmText)
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'message_style',
        // 可以选择没有tpye，则没有感叹号图标
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功！')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })

这种情况下的几个注意点
1、单独改变单行的样式

h('p', { style: 'background-color: #f4f9ff;width:100%;margin-top: 10px' }, confirmText)

2、整体改变样式
在$msgbox中添加customClass，然后写上对应的样式

customClass: 'message_style',

<style lang="scss">
.message_style {
  width: 30%;
  background-color: #EBEEF5;
}
</style>