Message: add dangerouslyUseHTMLString

examples/docs/en-US/message.md

@@ -62,6 +62,13 @@
           message: 'Oops, this is a error message.',
           type: 'error'
         });
+      },
+
+      openHTML() {
+        this.$message({
+          dangerouslyUseHTMLString: true,
+          message: '<strong>This is <i>HTML</i> string</strong>'
+        });
       }
     }
   };
@@ -199,6 +206,35 @@ A close button can be added.
 ```
 :::
 
+### Use HTML String
+`message` supports HTML string.
+
+:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
+
+```html
+<template>
+  <el-button :plain="true" @click="openHTML">Use HTML String</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      openHTML() {
+        this.$message({
+          dangerouslyUseHTMLString: true,
+          message: '<strong>This is <i>HTML</i> string</strong>'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
+:::
+
 ### Global method
 
 Element has added a global method `$message` for Vue.prototype. So in a vue instance you can call `Message` like what we did in this page.
@@ -214,10 +250,6 @@ import { Message } from 'element-ui';
 In this case you should call `Message(options)`. We have also registered methods for different types, e.g. `Message.success(options)`.
 You can call `Message.closeAll()` to manually close all the instances.
 
-:::warning
-Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
-:::
-
 ### Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |

examples/docs/zh-CN/message.md

@@ -62,6 +62,13 @@
           message: '错了哦，这是一条错误消息',
           type: 'error'
         });
+      },
+
+      openHTML() {
+        this.$message({
+          dangerouslyUseHTMLString: true,
+          message: '<strong>这是 <i>HTML</i> 片段</strong>'
+        });
       }
     }
   };
@@ -199,6 +206,35 @@
 ```
 :::
 
+### 使用 HTML 片段
+`message` 属性支持传入 HTML 片段
+
+:::demo 将`dangerouslyUseHTMLString`属性设置为 true，`message` 就会被当作 HTML 片段处理。
+
+```html
+<template>
+  <el-button :plain="true" @click="openHTML">使用 HTML 片段</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      openHTML() {
+        this.$message({
+          dangerouslyUseHTMLString: true,
+          message: '<strong>这是 <i>HTML</i> 片段</strong>'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此在 `dangerouslyUseHTMLString` 打开的情况下，请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。
+:::
+
 ### 全局方法
 
 Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 `Message`。
@@ -214,10 +250,6 @@ import { Message } from 'element-ui';
 此时调用方法为 `Message(options)`。我们也为每个 type 定义了各自的方法，如 `Message.success(options)`。
 并且可以调用 `Message.closeAll()` 手动关闭所有实例。
 
-:::warning
-`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。
-:::
-
 ### Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |

packages/message/src/main.js

@@ -7,7 +7,7 @@ let instance;
 let instances = [];
 let seed = 1;
 
-var Message = function(options) {
+const Message = function(options) {
   if (Vue.prototype.$isServer) return;
   options = options || {};
   if (typeof options === 'string') {

packages/message/src/main.vue

@@ -12,7 +12,8 @@
       </div>
       <div class="el-message__group">
         <slot>
-          <p v-html="message"></p>
+          <p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
+          <p v-else v-html="message"></p>
         </slot>
         <div v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></div>
       </div>
@@ -40,7 +41,8 @@
         onClose: null,
         showClose: false,
         closed: false,
-        timer: null
+        timer: null,
+        dangerouslyUseHTMLString: false
       };
     },
 

test/unit/specs/message.spec.js

@@ -53,6 +53,15 @@ describe('Message', () => {
     }, 500);
   });
 
+  it('html string', () => {
+    Message({
+      message: '<strong>夏天</strong>',
+      dangerouslyUseHTMLString: true
+    });
+    const message = document.querySelector('.el-message__group strong');
+    expect(message.textContent).to.equal('夏天');
+  });
+
   it('close all', done => {
     Message({
       message: '夏天',