【vue+element笔记01-message】

vue 使用message/messageBox

1. • 传递message文本属性时， 无法识别拼接的html 元素

   解决方案：添加属性： dangerouslyUseHTMLString: true 属性值改为true

   代码：

   	MessageBox({
         title: title,
         message: text,
         center: false,
         type: 'info',
         dangerouslyUseHTMLString: true
       })
       ```
   

2. • dangerouslyUseHTMLString设置为true所带来的问题， html元素插入带来xss攻击隐患
     识别html元素标签并渲染。
3. • 解决方式

vue.js官网有写，找到自定义的方式
参考这些的也可以 不直接识别text，前端固定的加div进行换行
或 查看这个地址

4. 总结

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'
        })

效果：也是可以换行展示的

XSS攻击参考
10个XSS攻击实例