feat(Dialog): add allow-html prop (#6568)

src/dialog/Dialog.js

@@ -37,6 +37,10 @@ export default createComponent({
       type: Boolean,
       default: false,
     },
+    allowHtml: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   data() {
@@ -124,6 +128,31 @@ export default createComponent({
         </div>
       );
     },
+
+    genContent(hasTitle, messageSlot) {
+      if (messageSlot) {
+        return <div class={bem('content')}>{messageSlot}</div>;
+      }
+
+      const { message, messageAlign } = this;
+      if (message) {
+        const data = {
+          class: bem('message', {
+            'has-title': hasTitle,
+            [messageAlign]: messageAlign,
+          }),
+          domProps: {
+            [this.allowHtml ? 'innerHTML' : 'textContent']: message,
+          },
+        };
+
+        return (
+          <div class={bem('content')}>
+            <div {...data} />
+          </div>
+        );
+      }
+    },
   },
 
   render() {
@@ -131,30 +160,15 @@ export default createComponent({
       return;
     }
 
-    const { message, messageAlign } = this;
+    const { message } = this;
     const messageSlot = this.slots();
     const title = this.slots('title') || this.title;
-
     const Title = title && (
       <div class={bem('header', { isolated: !message && !messageSlot })}>
         {title}
       </div>
     );
 
-    const Content = (messageSlot || message) && (
-      <div class={bem('content')}>
-        {messageSlot || (
-          <div
-            domPropsInnerHTML={message}
-            class={bem('message', {
-              'has-title': title,
-              [messageAlign]: messageAlign,
-            })}
-          />
-        )}
-      </div>
-    );
-
     return (
       <transition
         name={this.transition}
@@ -169,7 +183,7 @@ export default createComponent({
           style={{ width: addUnit(this.width) }}
         >
           {Title}
-          {Content}
+          {this.genContent(title, messageSlot)}
           {this.genButtons()}
         </div>
       </transition>

src/dialog/index.js

@@ -51,6 +51,7 @@ Dialog.defaultOptions = {
   message: '',
   overlay: true,
   className: '',
+  allowHtml: true,
   lockScroll: true,
   transition: 'van-dialog-bounce',
   beforeClose: null,

src/dialog/test/__snapshots__/index.spec.js.snap

@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`allow-html prop 1`] = `<div class="van-dialog__message">&lt;span&gt;text&lt;/span&gt;</div>`;
+
 exports[`button color 1`] = `
 <div role="dialog" class="van-dialog" name="van-dialog-bounce">
   <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel" style="color: white;">

src/dialog/test/index.spec.js

@@ -127,6 +127,17 @@ test('title slot', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+test('allow-html prop', () => {
+  const wrapper = mount(DialogComponent, {
+    propsData: {
+      value: true,
+      message: '<span>text</span>',
+      allowHtml: false,
+    },
+  });
+  expect(wrapper.find('.van-dialog__message')).toMatchSnapshot();
+});
+
 test('open & close event', () => {
   const wrapper = mount(DialogComponent);
   wrapper.vm.value = true;

types/dialog.d.ts

@@ -9,6 +9,7 @@ export type DialogOptions = {
   message?: string;
   overlay?: boolean;
   className?: any;
+  allowHtml?: boolean;
   lockScroll?: boolean;
   transition?: string;
   messageAlign?: string;