From 9dfa701454d6a94690bad39dbb0e38f2a0b31489 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期二, 18 六月 2024 18:08:47 +0800
Subject: [PATCH] build
---
src/components/SimpleMenu/src/components/MenuItem.vue | 162 ++++++++++++++++++++++++++---------------------------
1 files changed, 79 insertions(+), 83 deletions(-)
diff --git a/src/components/SimpleMenu/src/components/MenuItem.vue b/src/components/SimpleMenu/src/components/MenuItem.vue
index 3a99796..27c97f4 100644
--- a/src/components/SimpleMenu/src/components/MenuItem.vue
+++ b/src/components/SimpleMenu/src/components/MenuItem.vue
@@ -1,6 +1,6 @@
<template>
<li :class="getClass" @click.stop="handleClickItem" :style="getCollapse ? {} : getItemStyle">
- <Tooltip placement="right" v-if="showTooptip">
+ <Tooltip placement="right" v-if="showTooltip">
<template #title>
<slot name="title"></slot>
</template>
@@ -16,92 +16,88 @@
</li>
</template>
-<script lang="ts">
- import { PropType, defineComponent, ref, computed, unref, getCurrentInstance, watch } from 'vue';
- import { useDesign } from '/@/hooks/web/useDesign';
- import { propTypes } from '/@/utils/propTypes';
+<script lang="ts" setup>
+ import { PropType, ref, computed, unref, getCurrentInstance, watch, useSlots } from 'vue';
+ import { useDesign } from '@/hooks/web/useDesign';
+ import { propTypes } from '@/utils/propTypes';
import { useMenuItem } from './useMenu';
import { Tooltip } from 'ant-design-vue';
import { useSimpleRootMenuContext } from './useSimpleMenuContext';
- export default defineComponent({
- name: 'MenuItem',
- components: { Tooltip },
- props: {
- name: {
- type: [String, Number] as PropType<string | number>,
- required: true,
- },
- disabled: propTypes.bool,
+ defineOptions({ name: 'MenuItem' });
+
+ const props = defineProps({
+ name: {
+ type: [String, Number] as PropType<string | number>,
+ required: true,
},
- setup(props, { slots }) {
- const instance = getCurrentInstance();
-
- const active = ref(false);
-
- const { getItemStyle, getParentList, getParentMenu, getParentRootMenu } =
- useMenuItem(instance);
-
- const { prefixCls } = useDesign('menu');
-
- const { rootMenuEmitter, activeName } = useSimpleRootMenuContext();
-
- const getClass = computed(() => {
- return [
- `${prefixCls}-item`,
- {
- [`${prefixCls}-item-active`]: unref(active),
- [`${prefixCls}-item-selected`]: unref(active),
- [`${prefixCls}-item-disabled`]: !!props.disabled,
- },
- ];
- });
-
- const getCollapse = computed(() => unref(getParentRootMenu)?.props.collapse);
-
- const showTooptip = computed(() => {
- return unref(getParentMenu)?.type.name === 'Menu' && unref(getCollapse) && slots.title;
- });
-
- function handleClickItem() {
- const { disabled } = props;
- if (disabled) {
- return;
- }
-
- rootMenuEmitter.emit('on-menu-item-select', props.name);
- if (unref(getCollapse)) {
- return;
- }
- const { uidList } = getParentList();
-
- rootMenuEmitter.emit('on-update-opened', {
- opend: false,
- parent: instance?.parent,
- uidList: uidList,
- });
- }
- watch(
- () => activeName.value,
- (name: string) => {
- if (name === props.name) {
- const { list, uidList } = getParentList();
- active.value = true;
- list.forEach((item) => {
- if (item.proxy) {
- (item.proxy as any).active = true;
- }
- });
-
- rootMenuEmitter.emit('on-update-active-name:submenu', uidList);
- } else {
- active.value = false;
- }
- },
- { immediate: true },
- );
-
- return { getClass, prefixCls, getItemStyle, getCollapse, handleClickItem, showTooptip };
- },
+ disabled: propTypes.bool,
});
+
+ const slots = useSlots();
+
+ const instance = getCurrentInstance();
+
+ const active = ref(false);
+
+ const { getItemStyle, getParentList, getParentMenu, getParentRootMenu } = useMenuItem(instance);
+
+ const { prefixCls } = useDesign('menu');
+
+ const { rootMenuEmitter, activeName } = useSimpleRootMenuContext();
+
+ const getClass = computed(() => {
+ return [
+ `${prefixCls}-item`,
+ {
+ [`${prefixCls}-item-active`]: unref(active),
+ [`${prefixCls}-item-selected`]: unref(active),
+ [`${prefixCls}-item-disabled`]: !!props.disabled,
+ },
+ ];
+ });
+
+ const getCollapse = computed(() => unref(getParentRootMenu)?.props.collapse);
+
+ const showTooltip = computed(() => {
+ return unref(getParentMenu)?.type.name === 'Menu' && unref(getCollapse) && slots.title;
+ });
+
+ function handleClickItem() {
+ const { disabled } = props;
+ if (disabled) {
+ return;
+ }
+
+ rootMenuEmitter.emit('on-menu-item-select', props.name);
+ if (unref(getCollapse)) {
+ return;
+ }
+ const { uidList } = getParentList();
+
+ rootMenuEmitter.emit('on-update-opened', {
+ opend: false,
+ parent: instance?.parent,
+ uidList: uidList,
+ });
+ }
+ watch(
+ () => activeName.value,
+ (name: string | number) => {
+ if (name === props.name) {
+ const { list, uidList } = getParentList();
+ active.value = true;
+ list.forEach((item) => {
+ if (item.proxy) {
+ (item.proxy as any).active = true;
+ }
+ });
+
+ rootMenuEmitter.emit('on-update-active-name:submenu', uidList);
+ } else {
+ active.value = false;
+ }
+ },
+ { immediate: true },
+ );
</script>
--
Gitblit v1.9.3