vue的MessageBox的拓展使用

正常的情况的展示：

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

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

主要的拓展为：信息内容

针对这种需要多行的内容，就需要拓展写法

const h = this.$createElement      
    this.$msgbox({        
        title: '提示',        
        message: h('p', { style: 'color: black' }, [          
        h('div', { style: 'color: black' }, '删除后将无法恢复，确认删除吗？'),          
        h('div', { style: 'color: gray' }, '注：删除该知识库种类将一同删除其下所有内容')
        ]),        
        showCancelButton: true,        
        confirmButtonText: '确定',        
        cancelButtonText: '取消',        
        type: 'warning'      
    }).then(() => {        
        this.$message({          
        type: 'success',          
        message: '删除成功!'        
        })      
    }).catch(() => {        
        this.$message({          
        type: 'info',          
        message: '已取消删除'        
    })      
})

主要代码为：

  message: h('p', { style: 'color: black' }, [                     h('div', { style: 'color: black' }, '删除后将无法恢复，确认删除吗？'),                     h('div', { style: 'color: gray' }, '注：删除该知识库种类将一同删除其下所有内容')        ])

在这里h需要提前定义，第一位为标签名字，第二位为样式，之后的内容用数组[]包起来，如此就实现了，内容的自定义。