feat(drop-menu): 支持自定义图标以及覆盖默认点击事件

docs/component/drop-menu.md

@@ -112,6 +112,24 @@ function handleOpened() {
 </view>
 ```
 
+## 自定义菜单图标
+
+可以通过 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" :custom-click="handleClick" />
+</wd-drop-menu>
+```
+
+```typescript
+function handleClick() {
+  console.log('点击了地图')
+}
+```
+
 ## 向上展开
 
 将 `direction` 属性值设置为 `up`，菜单即可向上展开
@@ -150,6 +168,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 | _       |
+| custom-click | 菜单点击事件                                                     | function          | -       | -      | -      |
 | value-key | 选项对象中，value 对应的 key                                           | string          | -      | value  | -        |
 | label-key | 选项对象中，展示的文本对应的 key                                       | string          | -      | label  | -        |
 | tip-key   | 选项对象中，选项说明对应的 key                                         | string          | -      | tip    | -        |

src/pages/dropMenu/Index.vue

@@ -32,6 +32,11 @@
           </view>
         </view>
       </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>
+      </demo-block>
       <demo-block title="向上弹出" transparent>
         <wd-drop-menu direction="up">
           <wd-drop-menu-item v-model="value6" :options="option1" @change="handleChange6" />
@@ -116,6 +121,10 @@ function handleChange9({ value }: any) {
 function confirm() {
   dropMenu.value.close()
 }
+
+function handleMapClick() {
+  console.log('点击了地图')
+}
 </script>
 <style lang="scss" scoped>
 .wot-theme-dark {

src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts

@@ -31,6 +31,18 @@ export const dorpMenuItemProps = {
    * 菜单标题
    */
   title: String,
+  /**
+   * 菜单图标
+   */
+  icon: makeStringProp('arrow-down'),
+  /**
+   * 菜单图标大小
+   */
+  iconSize: makeStringProp('14px'),
+  /**
+   * 自定义点击事件
+   */
+  customClick: Function,
   /**
    * 选项对象中，value 对应的 key
    */

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,14 @@ 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.customClick) {
+    child.customClick()
+  } else {
+    toggle(child)
+  }
+}
+
 function toggle(child: any) {
   // 点击当前 menu, 关闭其他 menu