fix(menu): 修复组件部分错误 (DevCloudFE#1334)

Author: GaoNeng-wWw

packages/devui-vue/devui/menu/__tests__/menu.spec.ts

@@ -4,6 +4,7 @@ import { Menu, SubMenu, MenuItem } from '../index';
 import { useNamespace } from '../../shared/hooks/use-namespace';
 
 const ns = useNamespace('menu');
+const SubNs = useNamespace('submenu');
 const dotNs = useNamespace('menu', true);
 const dotSubNs = useNamespace('submenu', true);
 
@@ -12,6 +13,9 @@ const menuHorizontal = ns.b() + '-horizontal';
 const dotMenuItem = dotNs.b() + '-item';
 const dotMenuItemVerticalWrapper = dotNs.b() + '-item-vertical-wrapper';
 const dotSubMenu = dotSubNs.b();
+const submenuDisabled = SubNs.b() + '-disabled';
+const menuitemDisabled = ns.b() + '-item-disabled';
+
 
 describe('menu test', () => {
  let wrapper: VueWrapper<ComponentPublicInstance>;
@@ -136,7 +140,6 @@ describe('menu test', () => {
  expect(wrapper.findAll('i')[0].classes().includes('is-opened')).toBe(true);
  expect(wrapper.findAll('i')[1].classes().includes('is-opened')).toBe(false);
  });
-
  it.todo('props mode(vertical/horizontal) work well.');
 
  it.todo('props multiple work well.');
@@ -148,4 +151,30 @@ describe('menu test', () => {
  it.todo('props router work well.');
 
  it.todo('slot icon work well.');
+ it('menu - disabled', async ()=>{
+ wrapper = wrapper = mount({
+ components: {
+ 'd-menu': Menu,
+ 'd-sub-menu': SubMenu,
+ 'd-menu-item': MenuItem,
+ },
+ template: `
+ <d-menu>
+ <d-menu-item key="home">首页</d-menu-item>
+ <d-sub-menu title="课程" key="course" class="course" disabled>
+ <d-menu-item key="c"> C </d-menu-item>
+ <d-sub-menu title="Python" key="python">
+ <d-menu-item key="basic"> 基础 </d-menu-item>
+ <d-menu-item key="advanced"> 进阶 </d-menu-item>
+ </d-sub-menu>
+ </d-sub-menu>
+ <d-menu-item key="person">个人</d-menu-item>
+ <d-menu-item key="custom" href="https://www.baidu.com" disabled> Link To Baidu </d-menu-item>
+ </d-menu>
+ `,
+ });
+ await nextTick();
+ expect(wrapper.findAll(dotMenuItem).at(-1)?.classes().includes(menuitemDisabled)).toBe(true);
+ expect(wrapper.find('.course').classes().includes(submenuDisabled)).toBe(true);
+ });
 });

packages/devui-vue/devui/menu/src/components/menu-item/menu-item.tsx

@@ -34,7 +34,6 @@ export default defineComponent({
  const rootMenuEmit = inject('rootMenuEmit') as (eventName: string, ...args: unknown[]) => void;
  const useRouter = inject('useRouter') as boolean;
  const router = instance?.appContext.config.globalProperties.$router as Router;
-
  const classObject = computed(()=>({
  [`${ns.b()}-item`]: true,
  [`${ns.b()}-item-isCollapsed`]: isCollapsed.value,
@@ -48,6 +47,7 @@ export default defineComponent({
  e.stopPropagation();
  const ele = e.currentTarget as HTMLElement;
  let changeRouteResult = undefined;
+ props.disabled && e.preventDefault();
  if (!props.disabled) {
  if (!multiple) {
  menuStore.emit('menuItem:clear:select');
@@ -85,7 +85,9 @@ export default defineComponent({
  const icons = <span class={`${ns.b()}-icon`}>{ctx.slots.icon?.()}</span>;
  const menuItems = ref(null);
  watch(disabled, () => {
- classObject.value[menuItemSelect] = false;
+ if (!multiple){
+ classObject.value[menuItemSelect] = false;
+ }
  });
  watch(
  () => defaultSelectKey,

packages/devui-vue/devui/menu/src/components/menu-item/use-menu-item.ts

@@ -44,3 +44,15 @@ export function changeRoute(props: MenuItemProps, router: Router, useRouter: boo
  }
  return undefined;
 }
+
+export function changeSelect(isMultiple: boolean, defaultSelectKeys: string[], key: string): string[]{
+ if (isMultiple){
+ if (!defaultSelectKeys.indexOf(key)){
+ defaultSelectKeys.push(key);
+ }
+ } else{
+ defaultSelectKeys = [];
+ defaultSelectKeys.push(key);
+ }
+ return defaultSelectKeys;
+}

packages/devui-vue/devui/menu/src/components/sub-menu/sub-menu.tsx

@@ -1,12 +1,21 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { defineComponent, getCurrentInstance, inject, onMounted, ref, watchEffect, watch } from 'vue';
+import { randomId } from '../../../../shared/utils/random-id';
 import type { ComponentInternalInstance, Ref } from 'vue';
-import { addLayer, pushElement, clearSelect, getLayer } from '../../composables/use-layer-operate';
+import {
+ defineComponent,
+ getCurrentInstance,
+ inject,
+ onMounted,
+ ref,
+ watch,
+ watchEffect
+} from 'vue';
+import { useNamespace } from '../../../../shared/hooks/use-namespace';
 import { useClick } from '../../composables/use-click';
-import { useShowSubMenu } from './use-sub-menu';
-import { SubMenuProps, subMenuProps } from './sub-menu-types';
+import { addLayer, clearSelect, getLayer, pushElement } from '../../composables/use-layer-operate';
+import { useNearestMenuElement } from '../../composables/use-nearest-menu-element';
 import MenuTransition from '../menu-transition/menu-transition';
-import { useNamespace } from '../../../../shared/hooks/use-namespace';
+import { SubMenuProps, subMenuProps } from './sub-menu-types';
+import { useShowSubMenu } from './use-sub-menu';
 
 const ns = useNamespace('menu');
 const subNs = useNamespace('submenu');
@@ -24,29 +33,23 @@ export default defineComponent({
  const {
  vnode: { key }
  } = getCurrentInstance() as ComponentInternalInstance;
- const key_ = String(key);
- const isOpen = ref(false);
+ let key_ = String(key);
  const defaultOpenKeys = inject('openKeys') as Ref<string[]>;
+ const isOpen = ref(defaultOpenKeys.value.includes(key_));
  const indent = inject('defaultIndent');
  const isCollapsed = inject('isCollapsed') as Ref<boolean>;
  const mode = inject('mode') as Ref<string>;
  const subMenuItemContainer = ref(null) as Ref<null>;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const parentEmit = inject('rootMenuEmit') as (eventName: 'submenu-change', ...args: any[]) => void;
  const isHorizontal = mode.value === 'horizontal';
  if (key_ === 'null') {
  console.warn(`[devui][menu]: Key can not be null`);
- } else {
- if (defaultOpenKeys.value.includes(key_)) {
- isOpen.value = true;
- } else {
- isOpen.value = false;
- }
+ key_ = `randomKey-${randomId(16)}`;
  }
  const clickHandle = (e: MouseEvent) => {
- e.preventDefault();
  e.stopPropagation();
- const ele = e.currentTarget as HTMLElement;
-
+ const ele = useNearestMenuElement(e.target as HTMLElement);
  if (ele.classList.contains(subMenuClass) && isHorizontal) {
  return;
  }
@@ -55,26 +58,22 @@ export default defineComponent({
  useClick(e as clickEvent);
  }
  if (!props.disabled && mode.value !== 'horizontal') {
- const target = e.target as HTMLElement;
- let cur = e.target as HTMLElement;
- if (target.tagName === 'UL') {
- if (target.classList.contains(`${subMenuClass}-open`)) {
- isOpen.value = !isOpen.value;
- } else {
- isOpen.value = isOpen.value;
- }
+ const cur = useNearestMenuElement(e.target as HTMLElement);
+ const idx = defaultOpenKeys.value.indexOf(key_);
+ if (idx >= 0 && cur.tagName === 'UL') {
+ defaultOpenKeys.value.splice(idx, 1);
  } else {
- while (cur && cur.tagName !== 'UL') {
- if (cur.tagName === 'LI') {
- break;
- }
- cur = cur.parentElement as HTMLElement;
- }
- if (cur.tagName === 'UL') {
- isOpen.value = !isOpen.value;
+ if (cur.tagName === 'UL'){
+ defaultOpenKeys.value.push(key_);
  }
  }
- parentEmit('submenu-change', { type: 'submenu-change', state: isOpen.value, key: key_, el: cur });
+ isOpen.value = defaultOpenKeys.value.indexOf(key_) >= 0;
+ parentEmit('submenu-change', {
+ type: 'submenu-change',
+ state: isOpen.value,
+ key: key_,
+ el: ele
+ });
  }
  };
  const wrapper = ref(null);
@@ -86,26 +85,27 @@ export default defineComponent({
  watchEffect(
  () => {
  wrapperDom = wrapper.value as unknown as HTMLElement;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
  pushElement({ el: subMenu.value } as any);
  },
  { flush: 'post' }
  );
  watch(
  () => defaultOpenKeys,
  (n) => {
- if (n.value.includes(key_)) {
+ if (n.value.includes(key_)){
  isOpen.value = true;
  } else {
  isOpen.value = false;
  }
  },{deep: true}
  );
  onMounted(() => {
- const el = title.value as unknown as HTMLElement;
- const e = subMenu.value as unknown as HTMLElement;
+ const subMenuTitle = title.value as unknown as HTMLElement;
+ const subMenuWrapper = subMenu.value as unknown as HTMLElement;
  addLayer();
- class_layer.value = `layer_${Array.from(e.classList).at(-1)?.replace('layer_', '')}`;
- if (isHorizontal) {
+ class_layer.value = `layer_${Array.from(subMenuWrapper.classList).at(-1)?.replace('layer_', '')}`;
+ if (isHorizontal && !props.disabled) {
  (subMenu.value as unknown as Element as HTMLElement).addEventListener('mouseenter', (ev: MouseEvent) => {
  ev.stopPropagation();
  useShowSubMenu('mouseenter', ev, wrapperDom);
@@ -116,30 +116,34 @@ export default defineComponent({
  });
  }
  watch(isCollapsed, (newValue) => {
- const layer = Number(getLayer(e));
+ const layer = Number(getLayer(subMenuWrapper));
  if (!Number.isNaN(layer)) {
  layer > 2 && (isShow.value = !isCollapsed.value);
  }
  if (newValue) {
- el.style.padding !== '0' && (oldPadding = el.style.padding);
+ subMenuTitle.style.padding !== '0' && (oldPadding = subMenuTitle.style.padding);
  setTimeout(() => {
- el.style.padding = '0';
- el.style.width = '';
- el.style.textAlign = `center`;
+ subMenuTitle.style.padding = '0';
+ subMenuTitle.style.width = '';
+ subMenuTitle.style.textAlign = `center`;
  }, 300);
- el.style.display = `block`;
+ subMenuTitle.style.display = `block`;
  } else {
- el.style.padding = `${oldPadding}`;
- el.style.textAlign = ``;
- el.style.display = `flex`;
+ subMenuTitle.style.padding = `${oldPadding}`;
+ subMenuTitle.style.textAlign = ``;
+ subMenuTitle.style.display = `flex`;
  }
  });
  });
  return () => {
  return (
- <ul v-show={isShow.value} onClick={clickHandle} class={[subMenuClass, class_layer.value]} ref={subMenu}>
+ <ul
+ v-show={isShow.value}
+ onClick={clickHandle}
+ class={[subMenuClass, class_layer.value, props['disabled'] && `${subMenuClass}-disabled`]}
+ ref={subMenu}>
  <div
- class={[`${subMenuClass}-title`, props['disabled'] && `${subMenuClass}-disabled`]}
+ class={[`${subMenuClass}-title`]}
  style={`padding: 0 ${indent}px`}
  ref={title}>
  <span class={`${ns.b()}-icon`}>{ctx.slots?.icon?.()}</span>
@@ -155,7 +159,11 @@ export default defineComponent({
  }}></i>
  </div>
  {isHorizontal ? (
- <div class={`${ns.b()}-item-horizontal-wrapper ${ns.b()}-item-horizontal-wrapper-hidden`} ref={wrapper}>
+ <div
+ class={`${ns.b()}-item-horizontal-wrapper ${ns.b()}-item-horizontal-wrapper-hidden`}
+ ref={wrapper}
+ v-show={!props.disabled}
+ >
  {ctx.slots.default?.()}
  </div>
  ) : (

packages/devui-vue/devui/menu/src/composables/use-nearest-menu-element.ts

@@ -0,0 +1,6 @@
+export function useNearestMenuElement(ele: HTMLElement): HTMLElement{
+ while (ele && ele.tagName !== 'LI' && ele.tagName !== 'UL'){
+ ele = ele.parentElement as HTMLElement;
+ }
+ return ele;
+}

packages/devui-vue/devui/menu/src/composables/use-store.ts

@@ -22,15 +22,15 @@ export class Store{
  emit(eventName: string, ...args: any[]): void{
  recordTable[this.rootMenuName][eventName].forEach((fn)=>fn(...args));
  }
- off(eventName: string, fn: (...args: []) => void): void {
+ off(eventName: string, fn: (...args: []) => void): void{
  const idx = recordTable[this.rootMenuName][eventName].indexOf(fn);
  if (idx >= 0) {
  recordTable[this.rootMenuName][eventName].splice(idx, 1);
  }
  }
 }
 
-export function useStore(rootName: string): Store {
+export function useStore(rootName: string): Store{
  if (!recordTable[rootName]){
  Reflect.set(recordTable, rootName, {});
  }

packages/devui-vue/devui/menu/src/menu.scss

@@ -8,6 +8,7 @@ $devui-menu-item: var(--devui-menu-item);
 $devui-menu-item-sub: var(--devui-menu-item-sub);
 $devui-menu-item-disabled: var(--devui-menu-disabled);
 $devui-menu-item-select: var(--devui-menu-item-hover);
+$devui-menu-item-hover: var(--devui-menu-item-hover);
 
 $devui-menu-item-selectBar: var(--devui-primary-hover, #5e7ce0);
 $devui-menu-active-parent: var(--devui-icon-fill-active);