feat(drop-menu): 将 dropMenuItem 的 customClick 调整为 beforeToggle 属性

Moonofweisheng · Aug 2, 2024 · 5ff143b · 5ff143b
1 parent 06198c1
commit 5ff143b
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 13 deletions.
diff --git a/docs/component/drop-menu.md b/docs/component/drop-menu.md
@@ -114,19 +114,30 @@ function handleOpened() {
 
 ## 自定义菜单图标
 
-可以通过 icon 设置菜单右侧图标，等同于 `<wd-icon />` 的 name 属性。通过 icon-size 设置图标尺寸，等同于 `<wd-icon />` 的 size 属性。
+可以通过 `icon` 设置菜单右侧图标，等同于 `<wd-icon />` 的 `name` 属性。通过 `icon-size` 设置图标尺寸，等同于 `<wd-icon />` 的 `size` 属性。
 
-可以通过 custom-click 来自定义菜单点击事件，不传则默认展开菜单。
+```html
+<wd-drop-menu>
+  <wd-drop-menu-item title="地图" icon="location" icon-size="24px" />
+</wd-drop-menu>
+```
+
+## 自定义菜单点击事件
+
+可以通过 `before-toggle` 来自定义菜单点击事件，不传则默认展开菜单。
 
 ```html
 <wd-drop-menu>
-  <wd-drop-menu-item title="地图" icon="location" icon-size="24px" :custom-click="handleClick" />
+  <wd-drop-menu-item title="延迟 0.5s 展开" :before-toggle="handleBeforeToggle" />
 </wd-drop-menu>
 ```
 
 ```typescript
-function handleClick() {
-  console.log('点击了地图')
+function handleBeforeToggle(showPop: boolean, toggle: () => void) {
+  console.log('当前菜单展开状态:', showPop)
+
+  // 异步展开（如果不需要展开则不调用 toggle 函数即可）
+  setTimeout(toggle, 500)
 }
 ```
 
@@ -170,7 +181,7 @@ function handleClick() {
 | title     | 菜单标题                                                               | string          | -      | -      | -        |
 | icon      | 菜单图标                                                           | string            | -       | arrow-down | -     |
 | icon-size | 菜单图标尺寸                                                        | string            | -       | 14px | _       |
-| custom-click | 菜单点击事件                                                     | function          | -       | -      | -      |
+| before-toggle | 在切换操作之前调用的函数，类型：`(showPop: boolean, toggle: () => void) => void`，其中 `showPop` 为当前菜单展开状态 | function          | -       | -      | -      |
 | value-key | 选项对象中，value 对应的 key                                           | string          | -      | value  | -        |
 | label-key | 选项对象中，展示的文本对应的 key                                       | string          | -      | label  | -        |
 | tip-key   | 选项对象中，选项说明对应的 key                                         | string          | -      | tip    | -        |

diff --git a/src/pages/dropMenu/Index.vue b/src/pages/dropMenu/Index.vue
@@ -34,7 +34,12 @@
       </demo-block>
       <demo-block title="自定义菜单图标" transparent>
         <wd-drop-menu>
-          <wd-drop-menu-item title="地图" icon="location" icon-size="24px" :custom-click="handleMapClick" />
+          <wd-drop-menu-item title="地图" icon="location" icon-size="24px" />
+        </wd-drop-menu>
+      </demo-block>
+      <demo-block title="自定义点击事件" transparent>
+        <wd-drop-menu>
+          <wd-drop-menu-item title="延迟 0.5s 展开" :before-toggle="handleBeforeToggle" />
         </wd-drop-menu>
       </demo-block>
       <demo-block title="向上弹出" transparent>
@@ -122,8 +127,11 @@ function confirm() {
   dropMenu.value.close()
 }
 
-function handleMapClick() {
-  console.log('点击了地图')
+function handleBeforeToggle(showPop: boolean, toggle: () => void) {
+  console.log('当前菜单展开状态:', showPop)
+
+  // 异步展开（如果不需要展开则不调用 toggle 函数即可）
+  setTimeout(toggle, 500)
 }
 </script>
 <style lang="scss" scoped>

diff --git a/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts b/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts
@@ -40,9 +40,9 @@ export const dorpMenuItemProps = {
    */
   iconSize: makeStringProp('14px'),
   /**
-   * 自定义点击事件
+   * 自定义点击事件: (showPop: boolean, toggle: ()=>void)=>void
    */
-  customClick: Function,
+  beforeToggle: Function,
   /**
    * 选项对象中，value 对应的 key
    */

diff --git a/src/uni_modules/wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue b/src/uni_modules/wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue
@@ -91,8 +91,9 @@ function getDisplayTitle(child: any) {
 }
 
 function handleItemClick(child: any) {
-  if (child.customClick) {
-    child.customClick()
+  if (child.beforeToggle) {
+    const showPop = child.$.exposed!.getShowPop()
+    child.beforeToggle(showPop, () => toggle(child))
   } else {
     toggle(child)
   }