ivue-material-plus

Version:

A high quality UI components Library with Vue.js

1 lines • 7.64 kB

Source Map (JSON)

{"version":3,"file":"menu-item.mjs","sources":["../../../../../src/components/ivue-menu/menu-item.vue"],"sourcesContent":["<template>\r\n \r\n <li v-if=\"$router && to\">\r\n <slot name=\"link\">\r\n <a\r\n :class=\"wrapperClasses\"\r\n :style=\"wrapperStyles\"\r\n :href=\"linkUrl\"\r\n :target=\"target\"\r\n @click.exact=\"handleActive($event, false)\"\r\n @click.ctrl=\"handleActive($event, true)\"\r\n @click.meta=\"handleActive($event, true)\"\r\n >\r\n <slot></slot>\r\n </a>\r\n </slot>\r\n </li>\r\n\r\n \r\n <li\r\n v-else\r\n :class=\"wrapperClasses\"\r\n :style=\"wrapperStyles\"\r\n @click=\"handleActive\"\r\n >\r\n <slot></slot>\r\n </li>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n computed,\r\n getCurrentInstance,\r\n inject,\r\n onBeforeMount,\r\n onMounted,\r\n ref,\r\n} from 'vue';\r\nimport { mixinsLink } from '../../utils/mixins/mixins-link';\r\nimport { findComponentUpward, findComponentsUpward } from '../../utils/helpers';\r\nimport { oneOf } from '../../utils/assist';\r\n\r\n// ts\r\nimport { MenuContextKey } from './types/menu';\r\nimport { SubmenuContextKey } from './types/submenu';\r\nimport { _ComponentInternalInstance, Props } from './types/menu-item';\r\n\r\nconst prefixCls = 'ivue-menu-item';\r\n\r\nexport default {\r\n name: prefixCls,\r\n props: {\r\n /**\r\n * 菜单项的唯一标识，必填\r\n *\r\n * @type {String | NUmber}\r\n */\r\n name: {\r\n type: [String, Number],\r\n required: true,\r\n },\r\n /**\r\n * 禁用\r\n *\r\n * @type {Boolean}\r\n */\r\n disabled: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n /**\r\n * 跳转的链接，支持 vue-router 对象\r\n *\r\n * @type {Object | String}\r\n */\r\n to: {\r\n type: [Object, String],\r\n },\r\n /**\r\n * 相当于 a 链接的 target 属性\r\n *\r\n * @type {String}\r\n */\r\n target: {\r\n type: String,\r\n validator(value: string) {\r\n return oneOf(value, ['_blank', '_self', '_parent', '_top']);\r\n },\r\n default: '_self',\r\n },\r\n /**\r\n * 路由跳转时，开启 replace 将不会向 history 添加新记录\r\n *\r\n * @type {Boolean}\r\n */\r\n replace: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n },\r\n setup(props: Props) {\r\n // vm\r\n const { uid, proxy } = getCurrentInstance() as _ComponentInternalInstance;\r\n\r\n // inject\r\n const Menu = inject(MenuContextKey, {\r\n default: null,\r\n });\r\n\r\n const Submenu = inject(SubmenuContextKey, {\r\n default: null,\r\n });\r\n\r\n // route link\r\n const { handleCheckClick, handleOpenTo, handleLink, linkUrl } = mixinsLink(\r\n proxy,\r\n props\r\n );\r\n\r\n // 激活\r\n const active = ref<boolean>(false);\r\n\r\n // computed\r\n\r\n // 外部样式\r\n const wrapperClasses = computed(() => {\r\n return [\r\n `${prefixCls}`,\r\n {\r\n [`${prefixCls}--active`]: active.value,\r\n [`${prefixCls}--selected`]: active.value,\r\n [`${prefixCls}--disabled`]: props.disabled,\r\n },\r\n ];\r\n });\r\n\r\n // 外部样式\r\n const wrapperStyles = computed(() => {\r\n const styles: {\r\n paddingLeft?: string;\r\n } = {};\r\n\r\n const len = findComponentsUpward(proxy, 'ivue-menu-submenu').length;\r\n\r\n if (Submenu.default !== null && Menu.mode !== 'horizontal') {\r\n styles.paddingLeft = `${43 + (len - 1) * 24}px`;\r\n }\r\n\r\n return styles;\r\n });\r\n\r\n // methods\r\n\r\n // 激活\r\n const handleActive = (event: Event, newWindow = false as boolean) => {\r\n // 禁用\r\n if (props.disabled) {\r\n return;\r\n }\r\n\r\n // 打开新窗口\r\n if (newWindow || props.target === '_blank') {\r\n // 如果是 newWindow，直接新开窗口就行，无需发送状态\r\n handleCheckClick(event, newWindow);\r\n\r\n // 发送选择事件\r\n Menu.handleEmitSelectEvent(props.name);\r\n }\r\n // 没有打开新窗口\r\n else {\r\n const parent = findComponentUpward(proxy, 'ivue-menu-submenu');\r\n\r\n // 选择当前菜单\r\n if (parent) {\r\n Submenu.handleMenuItemSelect(props.name);\r\n }\r\n // 激活子菜单\r\n else {\r\n Menu.menuItemActive(props.name);\r\n }\r\n\r\n // 如果是 newWindow，直接新开窗口就行，无需发送状态\r\n handleCheckClick(event, newWindow);\r\n }\r\n };\r\n\r\n // 激活当前菜单\r\n const activeName = (name: string | number) => {\r\n // 激活\r\n if (props.name === name) {\r\n active.value = true;\r\n\r\n if (Submenu.activeName) {\r\n Submenu.activeName(name);\r\n }\r\n }\r\n // 取消激活\r\n else {\r\n active.value = false;\r\n }\r\n };\r\n\r\n // 添加菜单\r\n const addMenuItem = () => {\r\n if (Menu.data) {\r\n // 插入当前菜单\r\n Menu.data.menuItemList.push({\r\n uid: uid,\r\n activeName,\r\n });\r\n }\r\n };\r\n\r\n // 删除菜单\r\n const removeMenuItem = () => {\r\n const { menuItemList } = Menu.data;\r\n\r\n if (menuItemList && menuItemList.length) {\r\n const index = menuItemList.findIndex((item) => item.uid === uid);\r\n\r\n menuItemList.splice(index, 1);\r\n }\r\n };\r\n\r\n // onMounted\r\n onMounted(() => {\r\n addMenuItem();\r\n });\r\n\r\n // onBeforeMount\r\n onBeforeMount(() => {\r\n removeMenuItem();\r\n });\r\n\r\n return {\r\n // data\r\n active,\r\n\r\n // computed\r\n wrapperClasses,\r\n wrapperStyles,\r\n linkUrl,\r\n\r\n // methods\r\n handleActive,\r\n handleCheckClick,\r\n handleOpenTo,\r\n handleLink,\r\n };\r\n },\r\n};\r\n</script>\r\n"],"names":["_openBlock","_createElementBlock","_Fragment","_createCommentVNode","_renderSlot","_createElementVNode","_normalizeClass","_normalizeStyle","_withModifiers"],"mappings":";;;;;;SACE,YAAW,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,QAAA,EAAA;AACD,EAAA,OAAAA,SAAW,EAAA,EAAEC,kBAAA,CAAAC,QAAA,EAAA,IAAA,EAAA;AAAA,IAAvBC,mBAAA,gBAAA,CAAA;AAAA,IACE,IAAA,CAAA,WAAA,MAYO,CAAA,EAAA,eADD,EAAAF,kBAAA,CAAA,MAAA,UAAA,EAAA;AAAA,MAAAG,WATI,IAAE,CAAA,MAAA,EAAA,MAAA,EAAA,IAAA,MAAA;AAAA,QAAAC,mBACF,GAAE,EAAA;AAAA,UACP,KAAA,EAAMC,cAAO,CAAA,MAAA,CAAA,cAAA,CAAA;AAAA,UACb,KAAA,EAAMC,cAAQ,CAAA,MAAA,CAAA,aAAA,CAAA;AAAA,UACd,MAAK,MAAA,CAAA,OAAA;AAAA,UAAA,QAAA,MAAA,CAAA,MAAA;AAAA;YAEO,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,cAAA,CAAA,MAAA,KAAA,MAAA,CAAA,YAAA,CAAa,MAAM,EAAA,KAAA,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA,CAAA;AAAA,YAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAA,cAAA,CAAA,MAAA,KAAA,MAAA,CAAA,YAAA,CAAA,MAAA,EAAA,IAAA,CAAA,EAAA,CAAA,MAAA,CAAA,CAAA,CAAA;AAAA;WAEhC;AAAA,SAAA,EAAA;AAAA;;;oBAMN,EAAA,EAOKP,mBAAAC,QAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,EAAA;AAAA,MAAAC,mBALG,4BAAE,CAAA;AAAA,MAAAE,mBACF,IAAE,EAAA;AAAA,QACP,KAAA,EAAKC,cAAA,CAAA,MAAA,CAAA,cAAA,CAAA;AAAA,QAAA,KAAA,EAAAC,cAAA,CAAA,MAAA,CAAA,aAAA,CAAA;AAAA,QAEN,OAAa,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,MAAA,CAAA,YAAA,IAAA,MAAA,CAAA,YAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,OAAA,EAAA;AAAA;;;;;;;;;"}