diff --git a/src/dialog/Dialog.js b/src/dialog/Dialog.js index cb109e82f..7c341c609 100644 --- a/src/dialog/Dialog.js +++ b/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({ ); }, + + genContent(hasTitle, messageSlot) { + if (messageSlot) { + return
{messageSlot}
; + } + + const { message, messageAlign } = this; + if (message) { + const data = { + class: bem('message', { + 'has-title': hasTitle, + [messageAlign]: messageAlign, + }), + domProps: { + [this.allowHtml ? 'innerHTML' : 'textContent']: message, + }, + }; + + return ( +
+
+
+ ); + } + }, }, 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 && (
{title}
); - const Content = (messageSlot || message) && ( -
- {messageSlot || ( -
- )} -
- ); - return ( {Title} - {Content} + {this.genContent(title, messageSlot)} {this.genButtons()}
diff --git a/src/dialog/index.js b/src/dialog/index.js index 855ebce8a..474273ab8 100644 --- a/src/dialog/index.js +++ b/src/dialog/index.js @@ -51,6 +51,7 @@ Dialog.defaultOptions = { message: '', overlay: true, className: '', + allowHtml: true, lockScroll: true, transition: 'van-dialog-bounce', beforeClose: null, diff --git a/src/dialog/test/__snapshots__/index.spec.js.snap b/src/dialog/test/__snapshots__/index.spec.js.snap index 09ae657df..192952907 100644 --- a/src/dialog/test/__snapshots__/index.spec.js.snap +++ b/src/dialog/test/__snapshots__/index.spec.js.snap @@ -1,5 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`allow-html prop 1`] = `
<span>text</span>
`; + exports[`button color 1`] = `