song-ui-u
Version:
vue3 + js的PC前端组件库
143 lines (140 loc) • 4.31 kB
JavaScript
import { defineComponent, ref, inject, provide, createVNode, Transition } from 'vue';
import { useNamespace } from '../../../hook/use-namespace/index.mjs';
import { ChevronRight } from 'song-ui-pro-icon';
import '../../../hook/use-zindex/index.mjs';
import '../../button/index.mjs';
import '../../buttonGroup/index.mjs';
import { XIcon } from '../../icon/index.mjs';
import '../../input/index.mjs';
import '../../textarea/index.mjs';
import '../../row/index.mjs';
import '../../col/index.mjs';
import '../../container/index.mjs';
import '../../checkbox/index.mjs';
import '../../switch/index.mjs';
import '../../form/index.mjs';
import '../../message/index.mjs';
import '../../mask/src/mask.mjs';
import '../../modal/index.mjs';
import '../../messageBox/index.mjs';
import '../../drawer/index.mjs';
import '../../badge/index.mjs';
import '../../space/index.mjs';
import '../../image/index.mjs';
import '../../radio/index.mjs';
import '../../divider/index.mjs';
import '../../chat/index.mjs';
import '../../progress/index.mjs';
import '../../upload/index.mjs';
import '../../vTree/index.mjs';
import '../../table/index.mjs';
import '../../tabs/index.mjs';
import '../index.mjs';
import '../../steps/index.mjs';
import '../../header/index.mjs';
import '../../breadcrumble/index.mjs';
import '../../datePicker/index.mjs';
import '../../tooltip/index.mjs';
import '../../popover/index.mjs';
import '../../timePicker/index.mjs';
import '../../select/index.mjs';
import '../../collapse/index.mjs';
import '../../card/index.mjs';
import '../../timeline/index.mjs';
import '../../tag/index.mjs';
import '../../result/index.mjs';
import '../../sender/index.mjs';
import { useMenu } from './hooks/use-menu.mjs';
var subMenu = /* @__PURE__ */ defineComponent({
name: "x-sub-menu",
props: {
title: {
type: String,
default: ""
},
index: {
type: String,
default: ""
},
align: {
type: String,
default: "left",
// 默认左对齐
validator: (value) => ["left", "right"].includes(value)
}
},
setup(props, {
slots,
emit
}) {
const ns = useNamespace("sub-menu");
const isOpen = ref(false);
const {
isActive,
menuCtx
} = useMenu();
const timer = ref(null);
const DELAY = 200;
const mode = menuCtx.props?.mode;
const clearTimer = () => {
if (timer.value) {
clearTimeout(timer.value);
timer.value = null;
}
};
const setOpenState = (state) => {
if (mode === "horizontal") {
clearTimer();
timer.value = setTimeout(() => {
isOpen.value = state;
}, DELAY);
} else {
isOpen.value = state;
}
};
const change = (e) => {
e.stopPropagation();
setOpenState(!isOpen.value);
menuCtx.change(props.index);
};
const handleMouseEnter = (e) => {
if (mode !== "horizontal") return;
e.stopPropagation();
setOpenState(true);
menuCtx.enter(props.index);
};
const handleMouseLeave = (e) => {
if (mode !== "horizontal") return;
e.stopPropagation();
setOpenState(false);
menuCtx.leave(props.index);
};
const isNested = inject("isSubMenu", false);
provide("isSubMenu", true);
return () => createVNode("li", {
"class": ns.b()
}, [createVNode("div", {
"class": [ns.e("title"), ns.is("active", isActive(props.index))],
"onClick": change,
"onMouseenter": handleMouseEnter,
"onMouseleave": handleMouseLeave
}, [props.title && createVNode("span", null, [props.title]), slots.title && !props.title && createVNode("span", null, [slots.title()]), createVNode(XIcon, {
"class": [ns.e("icon"), isOpen.value ? ns.m("icon", "open") : ""]
}, {
default: () => [createVNode(ChevronRight, null, null)]
})]), createVNode(Transition, {
"name": ns.b()
}, {
default: () => [isOpen.value && createVNode("ul", {
"onMouseenter": handleMouseEnter,
"onMouseleave": handleMouseLeave,
"style": {
backgroundColor: props.backgroundColor
},
"class": [ns.e("menu"), ns.is("nested", isNested), ns.m("mode", mode)]
}, [slots.default?.()])]
})]);
}
});
export { subMenu as default };
//# sourceMappingURL=sub-menu.mjs.map