Msgbox: add dangerouslyUseHTMLString

examples/docs/en-US/message-box.md

@@ -91,8 +91,13 @@
             });
           }, 200);
         });
-      }
+      },
 
+      open5() {
+        this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
+          dangerouslyUseHTMLString: true
+        });
+      }
     }
   };
 </script>
@@ -263,6 +268,34 @@ Can be customized to show various content.
 ```
 :::
 
+### 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 type="text" @click="open5">Click to open Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open5() {
+        this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
+          dangerouslyUseHTMLString: true
+        });
+      }
+    }
+  }
+</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
 
 If Element is fully imported, it will add the following global methods for Vue.prototype: `$msgbox`, `$alert`, `$confirm` and `$prompt`. So in a Vue instance you can call `MessageBox` like what we did in this page. The parameters are:
@@ -291,6 +324,7 @@ Although `message` property supports HTML strings, dynamically rendering arbitra
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title | title of the MessageBox | string | — | — |
 | message | content of the MessageBox | string | — | — |
+| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
 | type | message type, used for icon display | string | success/info/warning/error | — |
 | customClass | custom class name for MessageBox | string | — | — |
 | callback | MessageBox closing callback if you don't prefer Promise | function(action), where action can be 'confirm' or 'cancel', and `instance` is the MessageBox instance. You can access to that instance's attributes and methods | — | — |

examples/docs/zh-CN/message-box.md

@@ -92,8 +92,13 @@
             });
           }, 200);
         });
-      }
+      },
 
+      open5() {
+        this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
+          dangerouslyUseHTMLString: true
+        });
+      }
     }
   };
 </script>
@@ -254,13 +259,41 @@
             message: 'action: ' + action
           });
         });
-      },
+      }
     }
   }
 </script>
 ```
 :::
 
+### 使用 HTML 片段
+`message` 属性支持传入 HTML 片段
+
+:::demo 将`dangerouslyUseHTMLString`属性设置为 true，`message` 就会被当作 HTML 片段处理。
+
+```html
+<template>
+  <el-button type="text" @click="open5">点击打开 Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open5() {
+        this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
+          dangerouslyUseHTMLString: true
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此在 `dangerouslyUseHTMLString` 打开的情况下，请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。
+:::
+
 ### 全局方法
 
 如果你完整引入了 Element，它会为 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 `MessageBox`。调用参数为：
@@ -279,16 +312,13 @@ import { MessageBox } from 'element-ui';
 
 那么对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt，调用参数与全局方法相同。
 
-:::warning
-`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。
-:::
-
 ### Options
 
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title | MessageBox 标题 | string | — | — |
 | message | MessageBox 消息正文内容 | string / VNode | — | — |
+| dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false |
 | type | 消息类型，用于显示图标 | string | success/info/warning/error | — |
 | customClass | MessageBox 的自定义类名 | string | — | — |
 | callback | 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 | function(action, instance)，action 的值为'confirm'或'cancel', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法 | — | — |

packages/message-box/src/main.js

@@ -24,7 +24,8 @@ const defaults = {
   confirmButtonClass: '',
   cancelButtonClass: '',
   customClass: '',
-  beforeClose: null
+  beforeClose: null,
+  dangerouslyUseHTMLString: false
 };
 
 import Vue from 'vue';

packages/message-box/src/main.vue

@@ -12,7 +12,10 @@
         <div class="el-message-box__content" v-if="message !== ''">
           <div class="el-message-box__status" :class="[ typeClass ]"></div>
           <div class="el-message-box__message" :style="{ 'margin-left': typeClass ? '50px' : '0' }">
-            <slot><p v-html="message"></p></slot>
+            <slot>
+              <p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
+              <p v-else v-html="message"></p>
+            </slot>
           </div>
           <div class="el-message-box__input" v-show="showInput">
             <el-input v-model="inputValue" @keyup.enter.native="handleAction('confirm')" :placeholder="inputPlaceholder" ref="input"></el-input>
@@ -249,7 +252,8 @@
         confirmButtonDisabled: false,
         cancelButtonClass: '',
         editorErrorMessage: null,
-        callback: null
+        callback: null,
+        dangerouslyUseHTMLString: false
       };
     }
   };

test/unit/specs/message-box.spec.js

@@ -50,6 +50,19 @@ describe('MessageBox', () => {
     }, 300);
   });
 
+  it('html string', done => {
+    MessageBox({
+      title: 'html string',
+      dangerouslyUseHTMLString: true,
+      message: '<strong>html string</strong>'
+    });
+    setTimeout(() => {
+      const message = document.querySelector('.el-message-box__message strong');
+      expect(message.textContent).to.equal('html string');
+      done();
+    }, 300);
+  });
+
   it('alert', done => {
     MessageBox.alert('这是一段内容', {
       title: '标题名称',