一些优化

Ben Lin

2024-06-25 4969a965adc32d3194763edfa4a4f74a7f26cd06

 src/components/SimpleMenu/src/SimpleSubMenu.vue

@@ -5,6 +5,7 @@
    v-bind="$props"
    :class="getLevelClass"
  >
    <img v-if="getImg" :src="getImg" class="w-16px h-16px align-top" />
    <Icon v-if="getIcon" :icon="getIcon" :size="16" />
    <div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-1 collapse-title">
      {{ getI18nName }}
@@ -23,6 +24,7 @@
    :collapsedShowTitle="collapsedShowTitle"
  >
    <template #title>
      <img v-if="getImg" :src="getImg" class="w-16px h-16px align-top" />
      <Icon v-if="getIcon" :icon="getIcon" :size="16" />

      <div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-2 collapse-title">
@@ -42,75 +44,59 @@
    </template>
  </SubMenu>
</template>
<script lang="ts">
<script lang="ts" setup>
  import type { PropType } from 'vue';
  import type { Menu } from '/@/router/types';
  import type { Menu } from '@/router/types';

  import { defineComponent, computed } from 'vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { computed } from 'vue';
  import { useDesign } from '@/hooks/web/useDesign';
  import Icon from '@/components/Icon/Icon.vue';

  import MenuItem from './components/MenuItem.vue';
  import SubMenu from './components/SubMenuItem.vue';
  import { propTypes } from '/@/utils/propTypes';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
  import { propTypes } from '@/utils/propTypes';
  import { useI18n } from '@/hooks/web/useI18n';
  import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';

  export default defineComponent({
    name: 'SimpleSubMenu',
    components: {
      SubMenu,
      MenuItem,
      SimpleMenuTag: createAsyncComponent(() => import('./SimpleMenuTag.vue')),
      Icon,
  const SimpleMenuTag = createAsyncComponent(() => import('./SimpleMenuTag.vue'));

  defineOptions({ name: 'SimpleSubMenu' });

  const props = defineProps({
    item: {
      type: Object as PropType<Menu>,
      default: () => ({}),
    },
    props: {
      item: {
        type: Object as PropType<Menu>,
        default: () => ({}),
      },
      parent: propTypes.bool,
      collapsedShowTitle: propTypes.bool,
      collapse: propTypes.bool,
      theme: propTypes.oneOf(['dark', 'light']),
    },
    setup(props) {
      const { t } = useI18n();
      const { prefixCls } = useDesign('simple-menu');

      const getShowMenu = computed(() => !props.item?.meta?.hideMenu);
      const getIcon = computed(() => props.item?.icon);
      const getI18nName = computed(() => t(props.item?.name));
      const getShowSubTitle = computed(() => !props.collapse || !props.parent);
      const getIsCollapseParent = computed(() => !!props.collapse && !!props.parent);
      const getLevelClass = computed(() => {
        return [
          {
            [`${prefixCls}__parent`]: props.parent,
            [`${prefixCls}__children`]: !props.parent,
          },
        ];
      });

      function menuHasChildren(menuTreeItem: Menu): boolean {
        return (
          !menuTreeItem.meta?.hideChildrenInMenu &&
          Reflect.has(menuTreeItem, 'children') &&
          !!menuTreeItem.children &&
          menuTreeItem.children.length > 0
        );
      }

      return {
        prefixCls,
        menuHasChildren,
        getShowMenu,
        getIcon,
        getI18nName,
        getShowSubTitle,
        getLevelClass,
        getIsCollapseParent,
      };
    },
    parent: propTypes.bool,
    collapsedShowTitle: propTypes.bool,
    collapse: propTypes.bool,
    theme: propTypes.oneOf(['dark', 'light']),
  });

  const { t } = useI18n();
  const { prefixCls } = useDesign('simple-menu');

  const getShowMenu = computed(() => !props.item?.meta?.hideMenu);
  const getIcon = computed(() => (props.item?.img ? undefined : props.item?.icon));
  const getImg = computed(() => props.item?.img);
  const getI18nName = computed(() => t(props.item?.meta?.title || props.item?.name));
  const getShowSubTitle = computed(() => !props.collapse || !props.parent);
  const getIsCollapseParent = computed(() => !!props.collapse && !!props.parent);
  const getLevelClass = computed(() => {
    return [
      {
        [`${prefixCls}__parent`]: props.parent,
        [`${prefixCls}__children`]: !props.parent,
      },
    ];
  });

  function menuHasChildren(menuTreeItem: Menu): boolean {
    return (
      !menuTreeItem.meta?.hideChildrenInMenu &&
      Reflect.has(menuTreeItem, 'children') &&
      !!menuTreeItem.children &&
      menuTreeItem.children.length > 0
    );
  }
</script>