fix(dropdown-item):Fix DropdownItem component clicking to disable menu items but triggering item-click event

examples/sites/demos/app/dropdown/events.vue

@@ -27,7 +27,7 @@ export default {
       Notify({
         type: 'info',
         title: 'itemClick 回调事件',
-        message: `使用 dropdown-item 的label属性：${data.vm.label},\n 使用 dropdown-item 的默认插槽：${data.vm.$el.innerText}`,
+        message: `使用 dropdown-item 的label属性：${data.vm.label}`,
         position: 'top-right',
         duration: 2000
       })

packages/renderless/src/dropdown-item/index.ts

@@ -151,7 +151,9 @@ export const handleClick =
 
     const data = { itemData: props.itemData, vm, disabled: props.disabled }
 
-    emit('item-click', data)
+    if (!props.disabled) {
+      emit('item-click', data)
+    }
     // 此处需要传递一个对象，如果是数组[param1,param2],会导致vue2和vue3的表现形式不一样,aui 目前还是数组形式
     dispatch('TinyDropdown', 'menu-item-click', data)
     dispatch('TinyDropdown', 'is-disabled', [props.disabled])

packages/renderless/src/dropdown-item/mf.ts

@@ -42,13 +42,14 @@ export const renderless = (props, { reactive, inject }, { dispatch, vm }) => {
 
       dispatch('TinyDropdown', 'selectedIndex', [dataStore.currentIndex])
 
-      dispatch('TinyDropdownMenu', 'menu-item-click', [
-        dataStore.itemData,
+      const data = {
+        itemData: dataStore.itemData,
         vm,
-        dataStore.itemLabel,
-        dataStore.showContent,
-        props.disabled
-      ])
+        label: dataStore.itemLabel,
+        showContent: dataStore.showContent,
+        disabled: props.disabled
+      }
+      dispatch('TinyDropdownMenu', 'menu-item-click', data)
 
       dispatch('TinyDropdown', 'is-disabled', [props.disabled])
     }

packages/renderless/src/dropdown-menu/index.ts

@@ -173,11 +173,12 @@ export const mounted =
 
 export const handleMenuItemClick =
   ({ state, dispatch }) =>
-  (itemData, instance, label, showContent, isDisabled) => {
+  ({ itemData, vm, label, showContent, disabled }) => {
     state.label = label
     state.showContent = showContent
 
-    dispatch('TinyDropdown', 'current-item-click', [itemData, instance, isDisabled]) // 统一参数格式为对象
+    const data = { itemData, vm, disabled }
+    dispatch('TinyDropdown', 'current-item-click', data) // 统一参数格式为对象
   }
 
 export const handleMouseenter =

packages/renderless/src/dropdown/index.ts

@@ -218,14 +218,15 @@ export const initEvent =
 
 export const handleMenuItemClick =
   ({ props, state, emit }) =>
-  (itemData, instance, isDisabled) => {
-    state.isDisabled = isDisabled
-
-    if (props.hideOnClick) {
-      !state.isDisabled && (state.visible = false)
+  ({ itemData, vm, disabled }) => {
+    if (props.hideOnClick && !disabled) {
+      state.visible = false
     }
 
-    emit('item-click', itemData, instance)
+    if (!disabled) {
+      const data = { itemData, vm, disabled }
+      emit('item-click', data)
+    }
   }
 
 export const triggerElmFocus =
@@ -292,9 +293,9 @@ export const beforeDistory =
   }
 
 export const clickOutside =
-  ({ props, api, state }) =>
-  (value) => {
+  ({ props, api }) =>
+  (disabled) => {
     if (props.hideOnClick) {
-      state.isDisabled ? (value ? api.show() : api.hide()) : api.hide()
+      disabled ? api.show() : api.hide()
     }
   }

packages/renderless/src/dropdown/vue.ts

@@ -52,7 +52,6 @@ export const renderless = (
     listId: `dropdown-menu-${guid()}`,
     showIcon: props.showIcon,
     showSelfIcon: props.showSelfIcon,
-    isDisabled: false,
     designConfig
   })
 
@@ -77,7 +76,7 @@ export const renderless = (
     triggerElmFocus: triggerElmFocus({ state }),
     initDomOperation: initDomOperation({ api, state, vm }),
     beforeDistory: beforeDistory({ api, state }),
-    clickOutside: clickOutside({ state, props, api })
+    clickOutside: clickOutside({ props, api })
   })
 
   watch(() => state.visible, api.watchVisible)