song-ui-u/lib/components/tooltip/src/tooltip.vue.cjs.map

vue3 + js的PC前端组件库

{"version":3,"file":"tooltip.vue.cjs","sources":["../../../../../packages/components/tooltip/src/tooltip.vue"],"sourcesContent":["<script setup>\r\nimport { ref, watch, watchEffect, onUnmounted, onMounted, nextTick } from \"vue\";\r\nimport { useNamespace } from \"@ui-library/hook\";\r\n\r\nconst ns = useNamespace(\"tooltip\");\r\n\r\nconst props = defineProps({\r\n  content: { type: String, required: true }, // 提示内容\r\n  position: { type: String, default: \"top\" }, // 位置：top/bottom/left/right\r\n  trigger: { type: String, default: \"hover\" }, // 触发方式：hover/click\r\n  delay: { type: Number, default: 300 }, // 延迟显示（仅 hover）\r\n});\r\n\r\ndefineOptions({\r\n  name: \"x-tooltip\",\r\n});\r\n\r\nconst isVisible = ref(false);\r\nlet timer = null;\r\n\r\n// 事件处理\r\nconst handleHover = (state) => {\r\n  if (props.trigger !== \"hover\") return;\r\n  clearTimeout(timer);\r\n  timer = setTimeout(() => (isVisible.value = state), state ? props.delay : 0);\r\n};\r\n\r\nconst handleClick = () => {\r\n  if (props.trigger == \"click\") {\r\n    isVisible.value = !isVisible.value;\r\n  }\r\n};\r\n\r\n// 点击外部关闭（仅 click 模式）\r\nconst clickOutsideHandler = (e) => {\r\n  // 使用 ns.b() 获取正确的类名\r\n  if (!isVisible.value || !e.target.closest(`.${ns.b()}`)) {\r\n    isVisible.value = false;\r\n  }\r\n};\r\n\r\n// 生命周期\r\nwatchEffect(() => {\r\n  if (props.trigger === \"click\") {\r\n    document.addEventListener(\"click\", clickOutsideHandler);\r\n  } else {\r\n    document.removeEventListener(\"click\", clickOutsideHandler);\r\n  }\r\n});\r\n\r\nonUnmounted(() => {\r\n  document.removeEventListener(\"click\", clickOutsideHandler);\r\n});\r\n\r\n// 添加位置计算逻辑\r\nconst tooltipRef = ref(null);\r\nconst computedPosition = ref(props.position);\r\n\r\nconst updatePosition = () => {\r\n  if (!tooltipRef.value) return;\r\n\r\n  //   const triggerEl = tooltipRef.value.parentElement;\r\n  const triggerEl =\r\n    tooltipRef.value.parentElement.querySelector(\":first-child\");\r\n  const tooltipEl = tooltipRef.value;\r\n  const rect = triggerEl.getBoundingClientRect();\r\n  const tooltipRect = tooltipEl.getBoundingClientRect();\r\n\r\n  // 获取视口尺寸\r\n  const viewportWidth = window.innerWidth;\r\n  const viewportHeight = window.innerHeight;\r\n\r\n  // 检查各个方向的可用空间\r\n  const spaces = {\r\n    top: rect.top,\r\n    bottom: viewportHeight - rect.bottom,\r\n    left: rect.left,\r\n    right: viewportWidth - rect.right,\r\n  };\r\n\r\n  // 根据当前位置和可用空间自动调整\r\n  switch (props.position) {\r\n    case \"top\":\r\n      if (spaces.top < tooltipRect.height) {\r\n        computedPosition.value = \"bottom\";\r\n      }\r\n      break;\r\n    case \"bottom\":\r\n      if (spaces.bottom < tooltipRect.height) {\r\n        computedPosition.value = \"top\";\r\n      }\r\n      break;\r\n    case \"left\":\r\n      if (spaces.left < tooltipRect.width) {\r\n        computedPosition.value = \"right\";\r\n      }\r\n      break;\r\n    case \"right\":\r\n      if (spaces.right < tooltipRect.width) {\r\n        computedPosition.value = \"left\";\r\n      }\r\n      break;\r\n  }\r\n};\r\n\r\n// 监听显示状态变化时更新位置\r\nwatch(\r\n  () => isVisible.value,\r\n  (val) => {\r\n    if (val) {\r\n      nextTick(() => {\r\n        updatePosition();\r\n      });\r\n    }\r\n  }\r\n);\r\n\r\n// 监听窗口大小变化\r\nonMounted(() => {\r\n  window.addEventListener(\"resize\", updatePosition);\r\n});\r\n\r\nonUnmounted(() => {\r\n  window.removeEventListener(\"resize\", updatePosition);\r\n});\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    :class=\"ns.b()\"\r\n    @mouseenter=\"handleHover(true)\"\r\n    @mouseleave=\"handleHover(false)\"\r\n    @click=\"handleClick\"\r\n  >\r\n    <slot></slot>\r\n\r\n    <Transition :name=\"ns.b()\">\r\n      <div\r\n        v-if=\"isVisible\"\r\n        ref=\"tooltipRef\"\r\n        :class=\"[ns.e('content'), ns.m('content', computedPosition)]\"\r\n      >\r\n        {{ content }}\r\n      </div>\r\n    </Transition>\r\n  </div>\r\n</template>\r\n"],"names":["useNamespace","ref","watchEffect","onUnmounted","watch","nextTick","onMounted"],"mappings":"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"}