diff --git a/packages/dialog/demo/index.vue b/packages/dialog/demo/index.vue index 8283fd2db..c728c4380 100644 --- a/packages/dialog/demo/index.vue +++ b/packages/dialog/demo/index.vue @@ -27,31 +27,31 @@ - + + + {{ $t('asyncClose') }} + + + + - {{ $t('advancedUsage') }} + {{ $t('componentCall') }} - - + @@ -61,23 +61,27 @@ export default { i18n: { 'zh-CN': { - alert1: '消息提示', - alert2: '无标题提示', - confirm: '消息确认', - content: '有赞是一家零售科技公司,致力于成为商家服务领域里最被信任的引领者' + alert1: '提示弹窗', + alert2: '提示弹窗(无标题)', + confirm: '确认弹窗', + asyncClose: '异步关闭', + componentCall: '组件调用', + content: '代码是写出来给人看的,附带能在机器上运行' }, 'en-US': { alert1: 'Alert', alert2: 'Alert without title', - confirm: 'Confirm dialog' + confirm: 'Confirm dialog', + asyncClose: 'Async Close', + componentCall: 'Component Call', } }, data() { return { show: false, - username: '', - password: '' + currentRate: 0, + image: 'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg' }; }, @@ -102,12 +106,20 @@ export default { }); }, - beforeClose(action, done) { - if (action === 'confirm') { - setTimeout(done, 1000); - } else { - done(); + onClickAsyncClose() { + function beforeClose(action, done) { + if (action === 'confirm') { + setTimeout(done, 1000); + } else { + done(); + } } + + this.$dialog.confirm({ + title: this.$t('title'), + message: this.$t('content'), + beforeClose + }); } } }; @@ -118,5 +130,11 @@ export default { .van-doc-demo-block > .van-button { margin-left: 15px; } + + img { + width: 100%; + padding: 25px 20px 0; + box-sizing: border-box; + } } diff --git a/packages/dialog/en-US.md b/packages/dialog/en-US.md index 50bcd3088..33f307189 100644 --- a/packages/dialog/en-US.md +++ b/packages/dialog/en-US.md @@ -44,6 +44,24 @@ Used to confirm some messages, including a confirm button and a cancel button }); ``` +#### Asnyc Close + +```js +function beforeClose(action, done) { + if (action === 'confirm') { + setTimeout(done, 1000); + } else { + done(); + } +} + +Dialog.confirm({ + title: 'Title', + message: 'Content', + beforeClose +}); +``` + #### $dialog Method After import the Dialog component, the $dialog method is automatically mounted on Vue.prototype, making it easy to call within a vue component. @@ -58,6 +76,30 @@ export default { } ``` +#### Advanced Usage + +If you need to render vue components within a dialog, you can use dialog component. + +```html + + + +``` + +```js +export default { + data() { + return { + show: false + }; + } +} +``` + ### Methods | Name | Attribute | Return value | Description | @@ -87,51 +129,6 @@ export default { | beforeClose | Callback before close,
call done() to close dialog,
call done(false) to cancel loading | (action: string, done: function) => void | - | | getContainer | Return the mount node for Dialog | `String | () => HTMLElement` | `body` | - -#### Advanced Usage - -If you need to render vue components within a dialog, you can use dialog component. - -```html - - - - -``` - -```js -Vue.use(Dialog); - -export default { - data() { - return { - show: false, - username: '', - password: '' - }; - }, - - methods: { - beforeClose(action, done) { - if (action === 'confirm') { - setTimeout(done, 1000); - } else { - done(); - } - } - } -} -``` - ### API | Attribute | Description | Type | Default | diff --git a/packages/dialog/test/__snapshots__/demo.spec.js.snap b/packages/dialog/test/__snapshots__/demo.spec.js.snap index d298d6aa8..20711ccb3 100644 --- a/packages/dialog/test/__snapshots__/demo.spec.js.snap +++ b/packages/dialog/test/__snapshots__/demo.spec.js.snap @@ -3,32 +3,23 @@ exports[`renders demo correctly 1`] = `
+
diff --git a/packages/dialog/zh-CN.md b/packages/dialog/zh-CN.md index 798a8a564..0dfa402f0 100644 --- a/packages/dialog/zh-CN.md +++ b/packages/dialog/zh-CN.md @@ -45,6 +45,24 @@ Dialog.confirm({ }); ``` +#### 异步关闭 + +```js +function beforeClose(action, done) { + if (action === 'confirm') { + setTimeout(done, 1000); + } else { + done(); + } +} + +Dialog.confirm({ + title: '标题', + message: '弹窗内容', + beforeClose +}); +``` + #### 全局方法 引入 Dialog 组件后,会自动在 Vue 的 prototype 上挂载 $dialog 方法,在所有组件内部都可以直接调用此方法 @@ -59,6 +77,30 @@ export default { } ``` +#### 组件调用 + +如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式,调用前需要通过 `Vue.use` 注册组件 + +```html + + + +``` + +```js +export default { + data() { + return { + show: false + }; + } +} +``` + ### 方法 | 方法名 | 参数 | 返回值 | 介绍 | @@ -72,6 +114,8 @@ export default { ### Options +通过函数调用 `Dialog` 时,支持传入以下选项: + | 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | title | 标题 | `String` | - | - | @@ -88,54 +132,10 @@ export default { | beforeClose | 关闭前的回调函数,
调用 done() 后关闭弹窗,
调用 done(false) 阻止弹窗关闭 | `(action, done) => void` | - | 1.1.6 | | getContainer | 指定挂载的节点,可以传入选择器,
或一个返回节点的函数 | `String | () => HTMLElement` | `body` | 1.6.11 | - -#### 高级用法 -如果需要在弹窗内实现更复杂的交互,可以通过组件形式来调用 Dialog,调用前需要通过 Vue.use 注册组件 - -```html - - - - -``` - -```js -export default { - data() { - return { - show: false, - username: '', - password: '' - }; - }, - - methods: { - beforeClose(action, done) { - if (action === 'confirm') { - setTimeout(done, 1000); - } else { - done(); - } - } - } -} -``` - ### API +通过组件调用 `Dialog` 时,支持以下 API: + | 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | v-model | 是否显示弹窗 | `Boolean` | - | - | @@ -154,6 +154,8 @@ export default { ### Event +通过组件调用 `Dialog` 时,支持以下事件: + | 事件 | 说明 | 回调参数 | |------|------|------| | confirm | 点击确认按钮时触发 | - |