const h = this.$createElement
// 提示小时
const font = [
h('span', null, '添加成功 '),
h('i', { style: 'color: teal' }, data.num - data.error_num),
h('i', null, '条,失败成功 '),
h('i', { style: 'color: red;font-size:20px' }, data.error_num),
h('i', null, '条! ')
]
// 避免重复点击的时候出现多条提示信息
this.message !== '' ? this.message.close() : ''
data.error.forEach((item, index) => {
const message = '第' + (index + 1) + '行:' + item.error
const errorP = h('p', { style: 'color: red;margin-top:5px;font-size:16px;' }, message)
font.push(errorP)
})
this.message = this.$message({
message: h('p', null, font),
duration: 300000,
showClose: true
})
this.message 提示内容修改自定义
最新推荐文章于 2023-11-14 14:36:09 发布
该代码段展示了在Vue.js中如何使用$createElement创建一个包含成功与错误提示的组件。它防止了重复点击导致的多条信息显示,并对错误信息进行详细展示,每个错误都有行号和具体错误描述。消息框具有关闭功能,并设定有300000毫秒的显示时长。
摘要由CSDN通过智能技术生成