diff --git a/example/pages/dialog/index.js b/example/pages/dialog/index.js index 9f576407..84558ebe 100644 --- a/example/pages/dialog/index.js +++ b/example/pages/dialog/index.js @@ -1,13 +1,11 @@ import Page from '../../common/page'; import Dialog from '../../dist/dialog/dialog'; -const message = '有赞是一家零售科技公司,致力于成为商家服务领域里最被信任的引领者'; +const message = '代码是写出来给人看的,附带能在机器上运行'; Page({ data: { - show: false, - username: '', - password: '' + show: false }, showCustomDialog() { @@ -38,17 +36,25 @@ Page({ }); }, - onClose(event) { - if (event.detail === 'confirm') { - setTimeout(() => { - this.setData({ - show: false - }); - }, 1000); - } else { - this.setData({ - show: false + onClickAsyncClose() { + Dialog.confirm({ + title: '标题', + message, + asyncClose: true + }) + .then(() => { + setTimeout(() => { + Dialog.close(); + }, 1000); + }) + .catch(() => { + Dialog.close(); }); - } + }, + + onClose(event) { + this.setData({ + show: false + }); } }); diff --git a/example/pages/dialog/index.wxml b/example/pages/dialog/index.wxml index cf4d1ad6..7312050a 100644 --- a/example/pages/dialog/index.wxml +++ b/example/pages/dialog/index.wxml @@ -1,28 +1,38 @@ - + - 消息提示 + 提示弹窗 - 无标题提示 + 提示弹窗(无标题) - + - 消息确认 + 确认弹窗 + + + + + + 异步关闭 @@ -36,25 +46,15 @@ - - diff --git a/example/pages/dialog/index.wxss b/example/pages/dialog/index.wxss index e69de29b..34b02e30 100644 --- a/example/pages/dialog/index.wxss +++ b/example/pages/dialog/index.wxss @@ -0,0 +1,5 @@ +.demo-image { + width: 100%; + padding: 25px 20px 0; + box-sizing: border-box; +} diff --git a/packages/dialog/README.md b/packages/dialog/README.md index fd55aca2..4bc709b6 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -64,56 +64,55 @@ Dialog.confirm({ }); ``` +#### 异步关闭 + +设置`asyncClose`属性开启异步关闭,开启后可以手动调用`Dialog.close`方法关闭弹窗 + +```javascript +Dialog.confirm({ + title: '标题', + message: '弹窗内容' + asyncClose: true +}) + .then(() => { + setTimeout(() => { + Dialog.close(); + }, 1000); + }) + .catch(() => { + Dialog.close(); + }); +``` + #### 组件调用 -通过组件调用 Dialog 时,可以实现自定义弹窗内容、异步关闭、监听微信开放能力回调事件,具体可以参考下面的示例 +通过组件调用 Dialog 时,可以实现自定义弹窗内容、监听微信开放能力回调事件等功能,具体参考下例 ```html - - + ``` ```js Page({ data: { - show: true, - username: '', - password: '' + show: true }, - onClose(event) { - if (event.detail === 'confirm') { - // 异步关闭弹窗 - setTimeout(() => { - this.setData({ - show: false - }); - }, 1000); - } else { - this.setData({ - show: false - }); - } + getUserInfo(event) { + console.log(event.detail); + }, + + onClose() { + this.setData({ close: false }); } }); ``` diff --git a/packages/dialog/index.ts b/packages/dialog/index.ts index f9d9fe2b..aba0deb7 100644 --- a/packages/dialog/index.ts +++ b/packages/dialog/index.ts @@ -100,7 +100,7 @@ VantComponent({ } this.$emit('close', action); - //把 dialog 实例传递出去,可以通过 stopLoading() 在外部关闭按钮的 loading + // 把 dialog 实例传递出去,可以通过 stopLoading() 在外部关闭按钮的 loading this.$emit(action, { dialog: this }); const callback = this.data[action === 'confirm' ? 'onConfirm' : 'onCancel'];