Vue消息提示框的使用

Vue消息提示框的使用

this.$message

this.$message({
	message: "请输入原因",
	//type 取值 success(成功) /warning(警告)/info(消息)/error(错误)/;
	type: "warning",
});

或

//type 取值 success(成功) /warning(警告)/info(消息)/error(错误)/;
this.$message.success("这是提示消息")

this.$confirm

this.$confirm('完成信息核对, 确认提交?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
}).then(() => {
    //略，数据接口处理
    this.$message({
        message: '必填项未填写完整',
        type: 'error'
    })
}).catch(() => {
})

this.$confirm提示内容换行

// 1.把写的提示内容需要换行的地方分成数组 confirmText
const confirmText = ['是否确认删除1011',  '是否确认删除1012'] 
// 2.创建一个新数组
const newDatas = []
// 3.创建虚拟节点
const h = this.$createElement
// 4.循环输出数组的每条信息
for (const i in confirmText) {
//将数组中的每条信息进行用p标签填充
	newDatas.push(h('p', null, confirmText[i]))
}
this.$confirm(
    '提示',
    {
        title: '提示',
        //将所有信息放在div标签中
        message: h('div', null, newDatas),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }
).then(() => {
})

组件实例的$createElement属性是一个具有特殊功能的函数，作用与渲染函数的第一个参数相同，用来定义虚拟节点。

这里用到了vue $createElement这个方法，此方法各个参数的含义和用法如下：

h('div', {}, [
    h('p', {}, '是否确认删除1011'),
    h('p', {}, '是否确认删除1012'),
])

1. 第一个参数，为标签，即创建的节点元素的标签是什么

2. 第二个参数是几点元素的属性配置，例如class，style等等

3. 第三个元素是节点元素的内容

   例如如下代码：

h('div', {class: 'test'}, [
    h('p', {}, '是否确认删除1011'),
	h('p', {}, '是否确认删除1012'),
])

生成的divdom元素上多了class属性

h('div', {
    style: {
    	color: 'green'
    }
    }, [
    h('p', {}, '是否确认删除1011'),
    h('p', {}, '是否确认删除1012'),
])

对话框内容的字体将会变成了绿色。