fix: 🐛 修复 DropDownItem 自定义样式类 CustomIcon 无效的问题

✅ Closes: #1119

Author: Moonofweisheng

src/subPages/dropMenu/Index.vue

@@ -16,8 +16,8 @@
           <wd-drop-menu-item ref="dropMenu" :title="$t('shai-xuan')" @opened="handleOpened">
             <view>
               <wd-slider v-model="valuetest" ref="slider" />
-              <wd-cell :title="$t('biao-ti-wen-zi-10')" value="内容" />
-              <wd-cell :title="$t('biao-ti-wen-zi-10')" label="$t('miaoShuXinXi-0')" value="内容" />
+              <wd-cell :title="$t('biao-ti-wen-zi-10')" :value="$t('nei-rong')" />
+              <wd-cell :title="$t('biao-ti-wen-zi-10')" :label="$t('miaoShuXinXi-0')" :value="$t('nei-rong')" />
               <view style="padding: 0 10px 20px; box-sizing: border-box">
                 <wd-button block size="large" @click="confirm">{{ $t('zhu-yao-an-niu') }}</wd-button>
               </view>
@@ -47,7 +47,7 @@
       </demo-block>
       <demo-block :title="$t('xiang-shang-dan-chu')" transparent>
         <wd-drop-menu direction="up">
-          <wd-drop-menu-item v-model="value6" :options="option1" @change="handleChange6" />
+          <wd-drop-menu-item v-model="value6" :options="option1" @change="handleChange6" custom-title="custom-title" custom-icon="custom-icon" />
           <wd-drop-menu-item v-model="value7" :options="option2" @change="handleChange7" />
         </wd-drop-menu>
       </demo-block>
@@ -163,4 +163,11 @@ const handleBeforeToggle: DropMenuItemBeforeToggle = ({ status, resolve }) => {
   background: #fff;
   text-align: center;
 }
+
+:deep(.custom-title) {
+  color: red;
+}
+:deep(.custom-icon) {
+  color: red;
+}
 </style>

src/uni_modules/wot-design-uni/components/wd-drop-menu-item/index.scss

@@ -21,7 +21,7 @@
   width: 100%;
   z-index: 101;
 
-  .wd-drop-item__popup {
+  @include e(popup){
     position: absolute;
     max-height: 80%;
   }

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

@@ -1,5 +1,5 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import { baseProps, makeArrayProp, makeBooleanProp, makeStringProp } from '../common/props'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumericProp, makeStringProp, numericProp } from '../common/props'
 
 export type DropMenuItemBeforeToggleOption = {
   // 操作状态：true 打开下拉菜单，false 关闭下拉菜单
@@ -47,7 +47,7 @@ export const dorpMenuItemProps = {
   /**
    * 菜单图标大小
    */
-  iconSize: makeStringProp('14px'),
+  iconSize: numericProp,
   /**
    * 自定义点击事件
    */

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

@@ -32,8 +32,7 @@
           <wd-icon
             v-if="(item[valueKey] !== '' ? item[valueKey] : item) === modelValue"
             :name="iconName"
-            size="20px"
-            :class="`wd-drop-item__icon ${customIcon}`"
+            :custom-class="`wd-drop-item__icon ${customIcon}`"
           />
         </view>
       </view>
@@ -65,7 +64,14 @@ import { isDef, isFunction } from '../common/util'
 import { dorpMenuItemProps, type DropMenuItemExpose } from './types'
 
 const props = defineProps(dorpMenuItemProps)
-const emit = defineEmits(['change', 'update:modelValue', 'open', 'opened', 'closed', 'close'])
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | number): void
+  (e: 'change', event: { value: string | number; selectedItem: Record<string, any> }): void
+  (e: 'open'): void
+  (e: 'opened'): void
+  (e: 'close'): void
+  (e: 'closed'): void
+}>()
 
 const queue = inject<Queue | null>(queueKey, null)
 const showWrapper = ref<boolean>(false)