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.把写的提示内容需要换行的地方分成数组 confirmTextconst 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'),])
第一个参数，为标签，即创建的节点元素的标签是什么
第二个参数是几点元素的属性配置，例如class，style等等
第三个元素是节点元素的内容
例如如下代码：
h('div', {class: 'test'}, [h('p', {}, '是否确认删除1011'),h('p', {}, '是否确认删除1012'),])
生成的divdom元素上多了class属性
h('div', {style: {color: 'green'}}, [h('p', {}, '是否确认删除1011'),h('p', {}, '是否确认删除1012'),])
对话框内容的字体将会变成了绿色。
