yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
92 lines (91 loc) • 2.94 kB
JavaScript
import { defineComponent, ref, resolveComponent, openBlock, createBlock, withCtx, createVNode, mergeProps, createElementVNode, renderSlot } from "vue";
import { ElIcon } from "element-plus";
import { ArrowDown } from "../../icons";
import { useTimer } from "../../utils/hook";
import EleDropdown from "../../ele-dropdown/index";
import EleTabTool from "../../ele-tab-tool/index";
const _sfc_main = defineComponent({
name: "TabDropdown",
components: { ElIcon, ArrowDown, EleDropdown, EleTabTool },
props: {
/** 右键菜单 */
items: Array,
/** 右键菜单属性 */
dropdownProps: Object,
/** 是否点击后自动关闭菜单 */
autoClose: {
type: Boolean,
default: true
}
},
emits: {
menuClick: (_command) => true
},
setup(props, { emit }) {
const [startAutoCloseTimer] = useTimer(150);
const dropdownRef = ref(null);
const handleCommand = (command) => {
emit("menuClick", command);
if (props.autoClose) {
startAutoCloseTimer(() => {
if (dropdownRef.value) {
dropdownRef.value.handleClose();
}
});
}
};
return { dropdownRef, handleCommand };
}
});
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _hoisted_1 = { style: { "text-align": "center", "outline": "none" } };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_ArrowDown = resolveComponent("ArrowDown");
const _component_ElIcon = resolveComponent("ElIcon");
const _component_EleDropdown = resolveComponent("EleDropdown");
const _component_EleTabTool = resolveComponent("EleTabTool");
return openBlock(), createBlock(_component_EleTabTool, null, {
default: withCtx(() => [
createVNode(_component_EleDropdown, mergeProps({
placement: "bottom-end",
popperClass: "ele-tab-popup",
popperOptions: {
modifiers: [{ name: "offset", options: { offset: [12, 8] } }]
}
}, _ctx.dropdownProps || {}, {
ref: "dropdownRef",
items: _ctx.items,
componentType: "pro",
onCommand: _ctx.handleCommand
}), {
default: withCtx(() => [
createElementVNode("div", _hoisted_1, [
renderSlot(_ctx.$slots, "icon", {}, () => [
createVNode(_component_ElIcon, {
class: "ele-tab-icon",
style: { "vertical-align": "-3px" }
}, {
default: withCtx(() => [
createVNode(_component_ArrowDown)
]),
_: 1
})
])
])
]),
_: 3
}, 16, ["items", "onCommand"])
]),
_: 3
});
}
const tabDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
tabDropdown as default
};