feat(drop-menu): 支持自定义图标以及before-toggle (#479)

* feat(drop-menu): 支持自定义图标以及覆盖默认点击事件 * feat(drop-menu): 将 dropMenuItem 的 customClick 调整为 beforeToggle 属性 * fix(drop-menu): 修正 dropMenuItem 自定义事件的类型定义
Moonofweisheng · Aug 2, 2024 · 108e1b3 · 108e1b3
1 parent df6a6a0
commit 108e1b3
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 3 deletions.
diff --git a/docs/component/drop-menu.md b/docs/component/drop-menu.md
@@ -112,6 +112,35 @@ function handleOpened() {
 </view>
 ```
 
+## 自定义菜单图标
+
+可以通过 `icon` 设置菜单右侧图标，等同于 `<wd-icon />` 的 `name` 属性。通过 `icon-size` 设置图标尺寸，等同于 `<wd-icon />` 的 `size` 属性。
+
+```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="延迟 0.5s 展开" :before-toggle="handleBeforeToggle" />
+</wd-drop-menu>
+```
+
+```typescript
+function handleBeforeToggle(showPop: boolean, toggle: () => void) {
+  console.log('当前菜单展开状态:', showPop)
+
+  // 异步展开（如果不需要展开则不调用 toggle 函数即可）
+  setTimeout(toggle, 500)
+}
+```
+
 ## 向上展开
 
 将 `direction` 属性值设置为 `up`，菜单即可向上展开
@@ -150,6 +179,9 @@ function handleOpened() {
 | options   | 列表数据，对应数据结构 `[{text: '标题', value: '0', tip: '提示文字'}]` | array           | -      | -      | -        |
 | icon-name | 选中的图标名称(可选名称在 wd-icon 组件中)                              | string          | -      | check  | -        |
 | title     | 菜单标题                                                               | string          | -      | -      | -        |
+| icon      | 菜单图标                                                           | string            | -       | arrow-down | -     |
+| icon-size | 菜单图标尺寸                                                        | string            | -       | 14px | _       |
+| 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
@@ -32,6 +32,16 @@
           </view>
         </view>
       </demo-block>
+      <demo-block title="自定义菜单图标" transparent>
+        <wd-drop-menu>
+          <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>
         <wd-drop-menu direction="up">
           <wd-drop-menu-item v-model="value6" :options="option1" @change="handleChange6" />
@@ -116,6 +126,13 @@ function handleChange9({ value }: any) {
 function confirm() {
   dropMenu.value.close()
 }
+
+function handleBeforeToggle(showPop: boolean, toggle: () => void) {
+  console.log('当前菜单展开状态:', showPop)
+
+  // 异步展开（如果不需要展开则不调用 toggle 函数即可）
+  setTimeout(toggle, 500)
+}
 </script>
 <style lang="scss" scoped>
 .wot-theme-dark {

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
@@ -1,6 +1,8 @@
-import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
 import { baseProps, makeArrayProp, makeBooleanProp, makeStringProp } from '../common/props'
 
+export type DropMenuItemBeforeToggle = (showPop: boolean, toggle: () => void) => void
+
 export const dorpMenuItemProps = {
   ...baseProps,
   /**
@@ -31,6 +33,18 @@ export const dorpMenuItemProps = {
    * 菜单标题
    */
   title: String,
+  /**
+   * 菜单图标
+   */
+  icon: makeStringProp('arrow-down'),
+  /**
+   * 菜单图标大小
+   */
+  iconSize: makeStringProp('14px'),
+  /**
+   * 自定义点击事件
+   */
+  beforeToggle: Function as PropType<DropMenuItemBeforeToggle>,
   /**
    * 选项对象中，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
@@ -7,12 +7,12 @@
         <view
           v-for="(child, index) in children"
           :key="index"
-          @click="toggle(child)"
+          @click="handleItemClick(child)"
           :class="`wd-drop-menu__item ${child.disabled ? 'is-disabled' : ''} ${currentUid === child.$.uid ? 'is-active' : ''}`"
         >
           <view class="wd-drop-menu__item-title">
             <view class="wd-drop-menu__item-title-text">{{ getDisplayTitle(child) }}</view>
-            <wd-icon name="arrow-down" custom-class="wd-drop-menu__arrow" />
+            <wd-icon :name="child.icon" :size="child.iconSize" custom-class="wd-drop-menu__arrow" />
           </view>
         </view>
       </view>
@@ -90,6 +90,15 @@ function getDisplayTitle(child: any) {
   console.error('[wot-design] warning(wd-drop-menu-item): no value is matched in the options option.')
 }
 
+function handleItemClick(child: any) {
+  if (child.beforeToggle) {
+    const showPop = child.$.exposed!.getShowPop()
+    child.beforeToggle(showPop, () => toggle(child))
+  } else {
+    toggle(child)
+  }
+}
+
 function toggle(child: any) {
   // 点击当前 menu, 关闭其他 menu