You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
8.4 KiB
1 line
8.4 KiB
2 years ago
|
{"version":3,"file":"menu.mjs","sources":["../../../../../../packages/components/cascader-panel/src/menu.vue"],"sourcesContent":["<template>\n <el-scrollbar\n :key=\"menuId\"\n tag=\"ul\"\n role=\"menu\"\n :class=\"ns.b()\"\n :wrap-class=\"ns.e('wrap')\"\n :view-class=\"[ns.e('list'), ns.is('empty', isEmpty)]\"\n @mousemove=\"handleMouseMove\"\n @mouseleave=\"clearHoverZone\"\n >\n <el-cascader-node\n v-for=\"node in nodes\"\n :key=\"node.uid\"\n :node=\"node\"\n :menu-id=\"menuId\"\n @expand=\"handleExpand\"\n />\n <div v-if=\"isLoading\" :class=\"ns.e('empty-text')\">\n <el-icon size=\"14\" :class=\"ns.is('loading')\">\n <loading />\n </el-icon>\n {{ t('el.cascader.loading') }}\n </div>\n <div v-else-if=\"isEmpty\" :class=\"ns.e('empty-text')\">\n {{ t('el.cascader.noData') }}\n </div>\n <svg\n v-else-if=\"panel?.isHoverMenu\"\n ref=\"hoverZone\"\n :class=\"ns.e('hover-zone')\"\n />\n </el-scrollbar>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, getCurrentInstance, inject, ref } from 'vue'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { generateId } from '@element-plus/utils'\nimport { Loading } from '@element-plus/icons-vue'\nimport ElIcon from '@element-plus/components/icon'\nimport ElCascaderNode from './node.vue'\nimport { CASCADER_PANEL_INJECTION_KEY } from './types'\n\nimport type { default as CascaderNode } from './node'\nimport type { PropType } from 'vue'\nimport type { Nullable } from '@element-plus/utils'\n\nexport default defineComponent({\n name: 'ElCascaderMenu',\n\n components: {\n Loading,\n ElIcon,\n ElScrollbar,\n ElCascaderNode,\n },\n\n props: {\n nodes: {\n type: Array as PropType<CascaderNode[]>,\n required: true,\n },\n index: {\n type: Number,\n required: true,\n },\n },\n\n setup(props) {\n const instance = getCurrentInstance()!\n const ns = useNamespace('cascader-menu')\n\n const { t } = useLocale()\n const id = generateId()\n let activeNode: Nullable<HTMLElement> = null\n let hoverTimer: Nullable<number> = null\n\n const panel = inject(CASCADER_PANEL_INJECTION_KEY)!\n\n const hoverZone = ref<null | SVGSVGElement>(null)\n\n const isEmpty = computed(() => !props.nodes.length)\n const isLoading = computed(() => !panel.initialLoaded)\n const menuId = computed(() => `cascader-menu-${id}-${props.index}`)\n\n const handleExpand = (e: MouseEvent) => {\n activeNode = e.target as HTMLElement\n }\n\n const handleMouseMove = (e: MouseEvent) => {\n if (!panel.isHoverMenu || !activeNode || !hoverZone.value) return\n\n if (activeNode.contains(e.target as HTMLElement)) {\n clearHoverTimer()\n\n const el = instance.vnode.el as HTMLElement\n const { left } = el.getBoundingClientRect()\n const { offsetWidth, offsetHeight } = el\n const startX = e.clientX - left\n const top = activeNode.offsetTop\n const bottom = top + activeNode.offsetHeight\n\n hoverZone.value.innerHTML = `\n <path style=\"pointer-events: auto;\" fill=\"transparent\" d=\"M${startX} ${top} L${offsetWidth} 0 V${top} Z\" />\n <path style=\"pointer-events: auto;\" fill=\"transparent\" d=\"M${startX} ${bottom} L${offsetWidth} ${offsetHeight} V${bottom} Z\" />\n `\n } else if (!hoverTimer) {\n hoverTimer = window.setTimeout(\n clearHoverZone,\n panel.config.hoverThreshold\n )\n }\n }\n\n const clearHoverTimer = () => {\n if (!hoverTimer) return\n clearTimeout(hoverTimer)\n hoverTimer = null\n }\n\n const clearHoverZone = () => {\n if (!hoverZone.value) return\n hoverZone.value.innerHTML = ''\n clearHoverTimer()\n }\n return {\n ns,\n panel,\n hoverZone,\n isEmpty,\n isLoading,\n menuId,\n t,\n handleExpand,\
|