feat(DropdownItem): add new event open close opend closed & new prop popup-style (#2804)

fix #2361, fix #2796

example/project.config.json

@@ -334,6 +334,14 @@
 					"id": -1,
 					"name": "uploader",
 					"pathName": "pages/uploader/index",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "dropdown-menu",
+					"pathName": "pages/dropdown-menu/index",
+					"query": "",
 					"scene": null
 				}
 			]

packages/dropdown-item/index.ts

@@ -10,7 +10,7 @@ VantComponent({
     current: 'dropdown-item',
     linked() {
       this.updateDataFromParent();
-    },
+    }
   },
 
   props: {
@@ -31,7 +31,8 @@ VantComponent({
       type: Array,
       value: [],
       observer: 'rerender'
-    }
+    },
+    popupStyle: String
   },
 
   data: {
@@ -67,11 +68,23 @@ VantComponent({
       }
     },
 
-    onClickOverlay() {
+    onOpen() {
-      this.toggle();
+      this.$emit('open');
+    },
+
+    onOpened() {
+      this.$emit('opened');
+    },
+
+    onClose() {
       this.$emit('close');
     },
 
+    onClosed() {
+      this.$emit('closed');
+      this.setData({ showWrapper: false });
+    },
+
     onOptionTap(event: Weapp.Event) {
       const { option } = event.currentTarget.dataset;
       const { value } = option;
@@ -80,10 +93,6 @@ VantComponent({
       this.setData({ showPopup: false, value });
       this.$emit('close');
 
-      setTimeout(() => {
-        this.setData({ showWrapper: false });
-      }, this.data.duration || 0);
-
       this.rerender();
 
       if (shouldEmitChange) {
@@ -92,9 +101,9 @@ VantComponent({
     },
 
     toggle(show, options = {}) {
-      const { showPopup, duration } = this.data;
+      const { showPopup } = this.data;
 
-      if (show == null) {
+      if (typeof show !== 'boolean') {
         show = !showPopup;
       }
 
@@ -102,27 +111,19 @@ VantComponent({
         return;
       }
 
-      if (!show) {
+      this.setData({
-        const time = options.immediate ? 0 : duration;
+        transition: !options.immediate,
-        this.setData({ transition: !options.immediate, showPopup: show });
+        showPopup: show,
-
-        setTimeout(() => {
-          this.setData({ showWrapper: false });
-        }, time);
-
-        this.rerender();
-        return;
-      }
-
-      this.parent.getChildWrapperStyle().then((wrapperStyle: String = '') => {
-        this.setData({
-          transition: !options.immediate,
-          showPopup: show,
-          wrapperStyle,
-          showWrapper: true
-        });
-        this.rerender();
       });
+
+      if (show) {
+        this.parent.getChildWrapperStyle().then((wrapperStyle: string) => {
+          this.setData({ wrapperStyle, showWrapper: true });
+          this.rerender();
+        });
+      } else {
+        this.rerender();
+      }
     }
   }
 });

packages/dropdown-item/index.wxml

@@ -7,13 +7,17 @@
 >
   <van-popup
     show="{{ showPopup }}"
-    custom-style="position: absolute;"
+    custom-style="position: absolute;{{ popupStyle }}"
     overlay-style="position: absolute;"
     overlay="{{ overlay }}"
     position="{{ direction === 'down' ? 'top' : 'bottom' }}"
     duration="{{ transition ? duration : 0 }}"
     close-on-click-overlay="{{ closeOnClickOverlay }}"
-    bind:close="onClickOverlay"
+    bind:enter="onOpen"
+    bind:leave="onClose"
+    bind:close="toggle"
+    bind:after-enter="onOpened"
+    bind:after-leave="onClosed"
   >
     <van-cell
       wx:for="{{ options }}"

packages/dropdown-menu/README.md

@@ -83,18 +83,18 @@ Page({
       { text: '新款商品', value: 1 },
       { text: '活动商品', value: 2 }
     ],
-    value1: 0,
+    value1: 0
   },
 
-  onConfirm () {
+  onConfirm() {
     this.selectComponent('#item').toggle();
   },
 
-  onSwitch1Change ({ detail }) {
+  onSwitch1Change({ detail }) {
     this.setData({ switch1: detail });
   },
 
-  onSwitch2Change ({ detail }) {
+  onSwitch2Change({ detail }) {
     this.setData({ switch2: detail });
   }
 });
@@ -131,45 +131,49 @@ Page({
 
 ### DropdownMenu Props
 
-| Attribute              | Description                    | Type      | Default   | Version |
+| 参数                   | 说明                           | 类型      | 默认值    |
-| ---------------------- | ------------------------------ | --------- | --------- | ------- |
+| ---------------------- | ------------------------------ | --------- | --------- |
-| active-color           | 菜单标题和选项的选中态颜色     | *string*  | `#1989fa` | -       |
+| active-color           | 菜单标题和选项的选中态颜色     | _string_  | `#1989fa` |
-| z-index                | 菜单栏 z-index 层级            | *number*  | `10`      | -       |
+| z-index                | 菜单栏 z-index 层级            | _number_  | `10`      |
-| duration               | 动画时长，单位毫秒             | *number*  | `200`     | -       |
+| duration               | 动画时长，单位毫秒             | _number_  | `200`     |
-| direction              | 菜单展开方向，可选值为up       | *string*  | `down`    | -       |
+| direction              | 菜单展开方向，可选值为 up      | _string_  | `down`    |
-| overlay                | 是否显示遮罩层                 | *boolean* | `true`    | -       |
+| overlay                | 是否显示遮罩层                 | _boolean_ | `true`    |
-| close-on-click-overlay | 是否在点击遮罩层后关闭菜单     | *boolean* | `true`    | -       |
+| close-on-click-overlay | 是否在点击遮罩层后关闭菜单     | _boolean_ | `true`    |
-| close-on-click-outside | 是否在点击外部 menu 后关闭菜单 | *boolean* | `true`    | -       |
+| close-on-click-outside | 是否在点击外部 menu 后关闭菜单 | _boolean_ | `true`    |
 
 ### DropdownItem Props
 
-| Attribute   | Description            | Type               | Default                 | Version |
+| 参数        | 说明                   | 类型               | 默认值         |
-| ----------- | ---------------------- | ------------------ | ----------------------- | ------- |
+| ----------- | ---------------------- | ------------------ | -------------- |
-| value       | 当前选中项对应的 value | *string \| number* | -                       | -       |
+| value       | 当前选中项对应的 value | _number \| string_ | -              |
-| title       | 菜单项标题             | *string*           | Text of selected option | -       |
+| title       | 菜单项标题             | _string_           | 当前选中项文字 |
-| options     | 选项数组               | *Option[]*         | `[]`                    | -       |
+| options     | 选项数组               | _Option[]_         | `[]`           |
-| disabled    | 是否禁用菜单           | *boolean*          | `false`                 | -       |
+| disabled    | 是否禁用菜单           | _boolean_          | `false`        |
-| title-class | 标题额外类名           | *string*           | -                       | -       |
+| title-class | 标题额外类名           | _string_           | -              |
+| popup-style | 自定义弹出层样式       | _string_           | -              |
 
 ### DropdownItem Events
 
-| Event  | Description                   | Arguments |
+| 事件名 | 说明                          | 回调参数 |
-| ------ | ----------------------------- | --------- |
+| ------ | ----------------------------- | -------- |
-| change | 点击选项导致 value 变化时触发 | value     |
+| change | 点击选项导致 value 变化时触发 | value    |
-| close  | 关闭菜单栏时触发              | -         |
+| open   | 打开菜单栏时触发              | -        |
+| close  | 关闭菜单栏时触发              | -        |
+| opened | 打开菜单栏且动画结束后触发    | -        |
+| closed | 关闭菜单栏且动画结束后触发    | -        |
 
-### DropdownItem Methods
+### DropdownItem 方法
 
 通过 selectComponent(id) 可访问
 
-| Name   | Attribute     | Return value | Description      |
+| 方法名 | 说明                                                          | 参数           | 返回值 |
-| ------ | ------------- | ------------ | ---------------- |
+| ------ | ------------------------------------------------------------- | -------------- | ------ |
-| toggle | show: boolean | -            | 切换菜单是否展示 |
+| toggle | 切换菜单展示状态，传`true`为显示，`false`为隐藏，不传参为取反 | show?: boolean | -      |
 
-### Data Structure of Option
+### Option 数据结构
 
-| Key   | Description                                | Type               |
+| 键名  | 说明                             | 类型               |
-| ----- | ------------------------------------------ | ------------------ |
+| ----- | -------------------------------- | ------------------ |
-| text  | 文字                                       | *string*           |
+| text  | 文字                             | _string_           |
-| value | 标识符                                     | *string \| number* |
+| value | 标识符                           | _number \| string_ |
-| icon  | 左侧图标名称或图片链接，可选值见 Icon 组件 | *string*           |
+| icon  | 左侧[图标名称](#/icon)或图片链接 | _string_           |

packages/mixins/transition.ts

@@ -37,14 +37,11 @@ export const transition = function(showDefaultValue: boolean) {
       display: false
     },
 
-    attached() {
-      if (this.data.show) {
-        this.enter();
-      }
-    },
-
     methods: {
-      observeShow(value: boolean) {
+      observeShow(value: boolean, old: boolean) {
+        if (value === old) {
+          return;
+        }
         value ? this.enter() : this.leave();
       },