tav-ui

Version:

Tav UI

1 lines • 6.23 kB

Source Map (JSON)

{"version":3,"file":"useTooltip2.mjs","sources":["../../../../../../packages/hooks/web/useTooltip.ts"],"sourcesContent":["import { onMounted, onUnmounted } from 'vue'\nimport { arrow, computePosition, flip, hide, offset, shift } from '@floating-ui/dom'\nimport { useThrottleFn } from '@vueuse/core'\nimport XEUtils from 'xe-utils'\n\nconst CLS = `ta-popper`\n\nfunction createElement({ tagName = 'div', className = '' }) {\n const el = document.createElement(tagName)\n el.className = className\n return el\n}\n\nfunction createAntvTooltip(props: any) {\n const tooltipEl = createElement({\n className: `${CLS}`,\n })\n const contentEl = createElement({\n tagName: 'span',\n className: `${CLS}-content`,\n })\n contentEl.innerHTML = props.title ?? ''\n const arrowEl = createElement({\n className: `${CLS}-arrow`,\n })\n tooltipEl.appendChild(contentEl)\n tooltipEl.appendChild(arrowEl)\n return {\n tooltipEl,\n arrowEl,\n }\n}\n\nexport const $Tooltip = (el: HTMLElement, props: any) => {\n if (!el) return\n\n const { tooltipEl, arrowEl } = createAntvTooltip(props)\n\n function update() {\n computePosition(el, tooltipEl, {\n placement: 'top',\n middleware: [hide(), offset(6), flip(), shift({ padding: 6 }), arrow({ element: arrowEl })],\n }).then(({ x, y, placement, middlewareData }) => {\n Object.assign(tooltipEl.style, {\n left: `${x}px`,\n top: `${y}px`,\n })\n\n const staticSide: any = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[placement.split('-')[0]]\n\n Object.assign(arrowEl.style, {\n left: middlewareData.arrow?.x != null ? `${middlewareData.arrow?.x}px` : '',\n // left: '10px',\n top: middlewareData.arrow?.y != null ? `${middlewareData.arrow?.y}px` : '',\n right: '',\n bottom: '',\n [staticSide]: '-4px',\n })\n\n tooltipEl.dataset.popperPlacement = placement\n })\n }\n\n function showTooltip(newEl?: HTMLElement) {\n setTimeout(() => {\n document.body.appendChild(tooltipEl)\n newEl && (el = newEl)\n update()\n }, props.delay)\n }\n\n function hideTooltip() {\n setTimeout(() => {\n tooltipEl.remove()\n }, props.delay)\n }\n\n return {\n showTooltip,\n hideTooltip,\n }\n}\n\nexport function useHideTooltips(instances: any) {\n if (!instances) return\n const browse = XEUtils.browse()\n // 监听全局事件\n const wheelName = browse.firefox ? 'DOMMouseScroll' : 'mousewheel'\n const listener = () => {\n for (const instance of instances.values()) {\n if (instance) instance?.hideTooltip()\n }\n }\n const handler = useThrottleFn(listener, 30)\n onMounted(() => {\n document.addEventListener(wheelName, handler)\n })\n\n onUnmounted(() => {\n document.removeEventListener(wheelName, handler)\n })\n}\n"],"names":[],"mappings":"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"}