正常的情况的展示:
<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需要提前定义,第一位为标签名字,第二位为样式,之后的内容用数组[]包起来,如此就实现了,内容的自定义。