前端基础学习-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）展示多行并且需要改变其中一行和整体的样式 不要介意样式比较丑。只是为了做出这个效果 其实后来发现基本上使用 m s g b o x 就 可 以 了 ， 如 果 需 要 msgbox就可以了，如果需要 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>