vue笔记01 · 目录
vue 使用message/messageBox
-
- 传递message文本属性时, 无法识别拼接的html 元素
解决方案:添加属性: dangerouslyUseHTMLString: true 属性值改为true
代码:
MessageBox({ title: title, message: text, center: false, type: 'info', dangerouslyUseHTMLString: true }) ```
-
- dangerouslyUseHTMLString设置为true所带来的问题, html元素插入带来xss攻击隐患
识别html元素标签并渲染。
- dangerouslyUseHTMLString设置为true所带来的问题, html元素插入带来xss攻击隐患
-
- 解决方式
vue.js官网有写,找到自定义的方式
参考这些的也可以 不直接识别text,前端固定的加div进行换行
或 查看这个地址
- 总结
import { MessageBox } from 'element-ui';
-
什么都没用时
-
使用的属性 dangerouslyUseHTMLString: true
const promptMsg = [
{
data: {
succ: '01',
msg: '1.messgae - 01',
data: '',
alertType: '1'
}
},
{
data: {
succ: '01',
msg: '2.messgae - 02',
data: '',
alertType: '1'
}
},
{
data: {
succ: '01',
msg: '3.messgae - 03',
data: '',
alertType: '1'
}
},
{
data: {
succ: '01',
msg: '4.messgae - 04',
data: '',
alertType: '1'
}
}
]
this.MessageBox({
title: title,
message: promptMsg.join(`\n`),
center: false,
type: 'warning',
dangerouslyUseHTMLString: true
})
效果
- 自定义使用vue的 $createElement 方法:
const promptMsg = [
{
data: {
succ: '01',
msg: '1.messgae - 01',
data: '',
alertType: '1'
}
},
{
data: {
succ: '01',
msg: '2.messgae - 02',
data: '',
alertType: '1'
}
},
{
data: {
succ: '01',
msg: '3.messgae - 03',
data: '',
alertType: '1'
}
},
{
data: {
succ: '01',
msg: '4.messgae - 04',
data: '',
alertType: '1'
}
}
]
const h = this.$createElement
const eleData = []
promptMsg.map((item, index) => {
eleData.push(h('div', null, item))
})
this.MessageBox({
title: title,
message: h('div', null, eleData),
center: false,
type: 'warning'
})
效果:也是可以换行展示的