[improvement] Dialog: support open-type event (#651)

example/pages/dialog/index.js

@@ -19,6 +19,10 @@ Page({
     });
   },
 
+  getUserInfo(event) {
+    console.log(event.detail);
+  },
+
   onClickAlert2() {
     Dialog.alert({
       message: '内容'

example/pages/dialog/index.wxml

@@ -7,14 +7,16 @@
   <van-button bind:click="onClickConfirm">Confirm</van-button>
 </demo-block>
 
-<demo-block title="高级用法" padding>
-  <van-button bind:click="showCustomDialog">高级用法</van-button>
+<demo-block title="组件调用" padding>
+  <van-button bind:click="showCustomDialog">组件调用</van-button>
   <van-dialog
     use-slot
     async-close
     show="{{ show }}"
     show-cancel-button
     bind:close="onClose"
+    confirm-button-open-type="getUserInfo"
+    bind:getuserinfo="getUserInfo"
   >
     <van-field
       value="{{ username }}"

packages/button/README.md

@@ -85,6 +85,7 @@
 | bind:contact | 客服消息回调 | - |
 | bind:getphonenumber | 获取用户手机号回调 | - |
 | bind:error | 当使用开放能力时，发生错误的回调 | - |
+| bind:opensetting | 在打开授权设置页后回调 | - |
 
 ### 外部样式类
 

packages/button/index.ts

@@ -1,8 +1,9 @@
 import { VantComponent } from '../common/component';
 import { button } from '../mixins/button';
+import { openType } from '../mixins/open-type';
 
 VantComponent({
-  mixins: [button],
+  mixins: [button, openType],
 
   props: {
     plain: Boolean,

packages/button/index.wxml

@@ -15,11 +15,11 @@
   send-message-img="{{ sendMessageImg }}"
   show-message-card="{{ showMessageCard }}"
   bind:tap="onClick"
-  bindcontact="bindcontact"
-  bindgetuserinfo="bindgetuserinfo"
-  bindgetphonenumber="bindgetphonenumber"
-  binderror="binderror"
-  bindopensetting="bindopensetting"
+  bindcontact="bindContact"
+  bindgetuserinfo="bindGetUserInfo"
+  bindgetphonenumber="bindGetPhoneNumber"
+  binderror="bindError"
+  bindopensetting="bindOpenSetting"
 >
   <van-loading
     wx:if="{{ loading }}"

packages/common/component.ts

@@ -7,7 +7,9 @@ import {
 
 function mapKeys(source: object, target: object, map: object) {
   Object.keys(map).forEach(key => {
-    target[map[key]] = source[key];
+    if (source[key]) {
+      target[map[key]] = source[key];
+    }
   });
 }
 

packages/dialog/README.md

@@ -52,9 +52,9 @@ Dialog.confirm({
 });
 ```
 
-#### 高级用法
+#### 组件调用
 
-通过组件调用 Dialog 时，可以实现自定义弹窗内容、异步关闭等高级特性，具体可以参考下面的示例
+通过组件调用 Dialog 时，可以实现自定义弹窗内容、异步关闭、监听微信开放能力回调事件，具体可以参考下面的示例
 
 ```html
 <van-dialog
@@ -62,7 +62,9 @@ Dialog.confirm({
   async-close
   show="{{ show }}"
   show-cancel-button
+  confirm-button-open-type="getUserInfo"
   bind:close="onClose"
+  bind:getuserinfo="getUserInfo"
 >
 <van-field
   value="{{ username }}"
@@ -159,9 +161,14 @@ Page({
 
 | 事件 | 说明 | 回调参数 |
 |-----------|-----------|-----------|
-| bind:close | 弹窗关闭时触发 | event.detail: 触发关闭事件的来源，枚举为`confirm`,`cancel`,`overlay` |
+| bind:close | 弹窗关闭时触发 | event.detail: 触发关闭事件的来源，<br>枚举为`confirm`,`cancel`,`overlay` |
 | bind:confirm | 点击确认按钮时触发 | - |
 | bind:cancel | 点击取消按钮时触发 | - |
+| bind:getuserinfo | 点击确认按钮时，会返回获取到的用户信息，<br>从返回参数的 detail 中获取到的值同 wx.getUserInfo | - |
+| bind:contact | 客服消息回调 | - |
+| bind:getphonenumber | 获取用户手机号回调 | - |
+| bind:error | 当使用开放能力时，发生错误的回调 | - |
+| bind:opensetting | 在打开授权设置页后回调 | - |
 
 ### 更新日志
 

packages/dialog/index.ts

@@ -1,6 +1,9 @@
 import { VantComponent } from '../common/component';
+import { openType } from '../mixins/open-type';
 
 VantComponent({
+  mixins: [openType],
+
   props: {
     show: Boolean,
     title: String,
@@ -79,7 +82,9 @@ VantComponent({
     },
 
     close() {
-      this.setData({ show: false });
+      this.setData({
+        show: false
+      });
     },
 
     onClose(action) {

packages/dialog/index.wxml

@@ -37,6 +37,11 @@
         custom-class="van-dialog__confirm"
         open-type="{{ confirmButtonOpenType }}"
         bind:click="onConfirm"
+        bindcontact="bindContact"
+        bindgetuserinfo="bindGetUserInfo"
+        bindgetphonenumber="bindGetPhoneNumber"
+        binderror="bindError"
+        bindopensetting="bindOpenSetting"
       >
         {{ confirmButtonText }}
       </van-button>

packages/mixins/button.ts

@@ -1,8 +1,6 @@
 export const button = Behavior({
   properties: {
     id: String,
-    loading: Boolean,
-    openType: String,
     appParameter: String,
     sendMessageTitle: String,
     sendMessagePath: String,
@@ -25,27 +23,5 @@ export const button = Behavior({
       type: String,
       value: ''
     }
-  },
-
-  methods: {
-    bindgetuserinfo(event: Partial<Weapp.Event>) {
-      this.$emit('getuserinfo', event.detail);
-    },
-
-    bindcontact(event: Partial<Weapp.Event>) {
-      this.$emit('contact', event.detail);
-    },
-
-    bindgetphonenumber(event: Partial<Weapp.Event>) {
-      this.$emit('getphonenumber', event.detail);
-    },
-
-    bindopensetting(event: Partial<Weapp.Event>) {
-      this.$emit('opensetting', event.detail);
-    },
-
-    binderror(event: Partial<Weapp.Event>) {
-      this.$emit('error', event.detail);
-    }
   }
 });

packages/mixins/observer/index.ts

@@ -5,16 +5,19 @@ export function observe(vantOptions, options) {
   const { watch, computed } = vantOptions;
 
   if (watch) {
-    options.properties = options.properties || {};
+    const props = options.properties || {};
     Object.keys(watch).forEach(key => {
-      if (key in options.properties) {
-        let prop = options.properties[key];
+      if (key in props) {
+        let prop = props[key];
         if (prop === null || !prop.type) {
           prop = { type: prop };
         }
         prop.observer = watch[key];
+        props[key] = prop;
       }
     });
+
+    options.properties = props;
   }
 
   if (computed) {

packages/mixins/open-type.ts

@@ -0,0 +1,27 @@
+export const openType = Behavior({
+  properties: {
+    openType: String
+  },
+
+  methods: {
+    bindGetUserInfo(event: Partial<Weapp.Event>) {
+      this.$emit('getuserinfo', event.detail);
+    },
+
+    bindContact(event: Partial<Weapp.Event>) {
+      this.$emit('contact', event.detail);
+    },
+
+    bindGetPhoneNumber(event: Partial<Weapp.Event>) {
+      this.$emit('getphonenumber', event.detail);
+    },
+
+    bindOpenSetting(event: Partial<Weapp.Event>) {
+      this.$emit('opensetting', event.detail);
+    },
+
+    bindError(event: Partial<Weapp.Event>) {
+      this.$emit('error', event.detail);
+    }
+  }
+});