ivue-material-plus/dist/unplugin-vue-components/es/components/ivue-tooltip/index2.mjs.map

A high quality UI components Library with Vue.js

{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-tooltip/index.vue"],"sourcesContent":["<template>\r\n  <div\r\n    :class=\"prefixCls\"\r\n    v-click-outside:[capture]=\"handleClickOutside\"\r\n    @click=\"handleClickShowPopper\"\r\n    @mouseenter=\"handleMouseenter\"\r\n    @mousemove=\"handleMousemove\"\r\n    @mouseleave=\"handleMouseleave\"\r\n  >\r\n    <!-- 描述 -->\r\n    <div :class=\"`${prefixCls}-rel`\" ref=\"reference\">\r\n      <slot></slot>\r\n    </div>\r\n    <!-- 为封装到组件中来构建 UI -->\r\n    <teleport to=\"body\" :disabled=\"!transfer\">\r\n      <transition name=\"fade-tooltip\">\r\n        <div\r\n          ref=\"popper\"\r\n          :class=\"popperClasses\"\r\n          :style=\"popperStyles\"\r\n          @click.stop\r\n          @mouseenter=\"handleMouseenter\"\r\n          @mouseleave=\"handleMouseleave\"\r\n          v-show=\"!disabled && (visible || always)\"\r\n        >\r\n          <div :class=\"[`${prefixCls}-content`]\">\r\n            <!-- arrow -->\r\n            <div\r\n              :class=\"[`${prefixCls}-arrow`]\"\r\n              ref=\"arrow\"\r\n              v-show=\"!noArrow\"\r\n            ></div>\r\n            <!-- 内容 -->\r\n            <div :class=\"innerClasses\" :style=\"innerStyles\">\r\n              <slot name=\"content\">{{ content }}</slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </transition>\r\n    </teleport>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  defineComponent,\r\n  onMounted,\r\n  getCurrentInstance,\r\n  computed,\r\n  watch,\r\n  ref,\r\n} from 'vue';\r\n\r\n// utils\r\nimport { transferIndex, transferIncrease } from '../../utils/transfer-queue';\r\nimport { oneOf } from '../../utils/assist';\r\nimport Popper from '../../utils/mixins/popper';\r\n// 注册外部点击事件插件\r\nimport { ClickOutside } from '../../utils/directives';\r\n\r\n// ts\r\nimport { _ComponentInternalInstance, Props } from './types/tooltip';\r\n\r\nconst prefixCls = 'ivue-tooltip';\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  mixins: [Popper],\r\n  // 注册局部指令\r\n  directives: { ClickOutside },\r\n  props: {\r\n    /**\r\n     * 是否将弹层放置于 body 内\r\n     * 带有 fixed 的 Table 列内使用时，\r\n     * 建议添加此属性，它将不受父级样式影响，\r\n     * 从而达到更好的效果\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    transfer: {\r\n      type: Boolean,\r\n      default() {\r\n        const global = getCurrentInstance().appContext.config.globalProperties;\r\n\r\n        return !global.$IVUE || global.$IVUE.transfer === ''\r\n          ? false\r\n          : global.$IVUE.transfer;\r\n      },\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     * 是否总是可见\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    always: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 延迟显示，单位毫秒\r\n     *\r\n     * @type {Number}\r\n     */\r\n    delay: {\r\n      type: Number,\r\n      default: 0,\r\n    },\r\n    /**\r\n     * 鼠标离开时Tooltip不会关闭\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    controlled: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 开启 transfer 时，给浮层添加额外的 class 名称\r\n     *\r\n     * @type {String}\r\n     */\r\n    transferClassName: {\r\n      type: String,\r\n    },\r\n    /**\r\n     * 提示框的内容\r\n     *\r\n     * @type {String, Number}\r\n     */\r\n    content: {\r\n      type: [String, Number],\r\n      default: '',\r\n    },\r\n    /**\r\n     * 最大宽度，超出最大值后，文本将自动换行，并两端对齐\r\n     *\r\n     * @type {String, Number}\r\n     */\r\n    maxWidth: {\r\n      type: [String, Number],\r\n    },\r\n    /**\r\n     * 显示前执行\r\n     *\r\n     * @type {Function}\r\n     */\r\n    beforeShowPopper: {\r\n      type: Function,\r\n    },\r\n    /**\r\n     * 是否手动控制 Tooltip\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    manual: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 是否开启外部点击的 capture 模式，可通过全局配置\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    capture: {\r\n      type: Boolean,\r\n      default() {\r\n        const global = getCurrentInstance().appContext.config.globalProperties;\r\n        return !global.$IVUE ? true : global.$IVUE.capture;\r\n      },\r\n    },\r\n    /**\r\n     * 主题，可选值为 dark 或 light\r\n     *\r\n     * @type {String}\r\n     */\r\n    theme: {\r\n      type: String,\r\n      validator(value: string) {\r\n        return oneOf(value, ['dark', 'light']);\r\n      },\r\n      default: 'light',\r\n    },\r\n    /**\r\n     * 不显示三角形\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    noArrow: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 弹窗的展开方向\r\n     *\r\n     * @type {String}\r\n     */\r\n    placement: {\r\n      type: String,\r\n      validator(value: string) {\r\n        return oneOf(value, [\r\n          'top',\r\n          'top-start',\r\n          'top-end',\r\n          'bottom',\r\n          'bottom-start',\r\n          'bottom-end',\r\n          'left',\r\n          'left-start',\r\n          'left-end',\r\n          'right',\r\n          'right-start',\r\n          'right-end',\r\n        ]);\r\n      },\r\n      default: 'bottom',\r\n    },\r\n  },\r\n  setup(props: Props) {\r\n    // 支持访问内部组件实例\r\n    const { proxy } = getCurrentInstance() as _ComponentInternalInstance;\r\n\r\n    // dom\r\n    const popper = ref<HTMLElement>(null);\r\n    const reference = ref<HTMLElement>(null);\r\n\r\n    // 延迟\r\n    const timeout = ref<ReturnType<typeof setTimeout> | null>(null);\r\n    // 当前元素index\r\n    const zIndex = ref<number>(0);\r\n\r\n    // 显示隐藏\r\n    const visible = ref<boolean>(false);\r\n\r\n    // 鼠标类型\r\n    const mouseType = ref<string>('');\r\n\r\n    // computed\r\n\r\n    // 悬浮框样式\r\n    const popperClasses = computed(() => {\r\n      return [\r\n        `${prefixCls}-popper`,\r\n        {\r\n          // 主题\r\n          [`${prefixCls}-${props.theme}`]: true,\r\n          // 是否将弹层放置于 body 内\r\n          [`${prefixCls}-transfer`]: props.transfer,\r\n          // 开启 transfer 时，给浮层添加额外的 class 名称\r\n          [props.transferClassName]: props.transferClassName,\r\n        },\r\n      ];\r\n    });\r\n\r\n    // 悬浮框样式\r\n    const popperStyles = computed(() => {\r\n      const styles = {};\r\n\r\n      // 是否将弹层放置于 body 内\r\n      if (props.transfer) {\r\n        styles['z-index'] = 1060 + zIndex.value;\r\n      }\r\n\r\n      return styles;\r\n    });\r\n\r\n    // 内容\r\n    const innerClasses = computed(() => {\r\n      return [\r\n        `${prefixCls}-inner`,\r\n        {\r\n          [`${prefixCls}-inner-with-width`]: !!props.maxWidth,\r\n        },\r\n      ];\r\n    });\r\n\r\n    // 内容\r\n    const innerStyles = computed(() => {\r\n      const styles = {};\r\n\r\n      if (props.maxWidth) {\r\n        styles['max-width'] = `${props.maxWidth}px`;\r\n      }\r\n\r\n      return styles;\r\n    });\r\n\r\n    // methods\r\n\r\n    // 显示\r\n    const handleShowPopper = (event) => {\r\n      // 显示前执行\r\n      if (props.beforeShowPopper) {\r\n        const beforeShowPopper = props.beforeShowPopper(event);\r\n\r\n        // 是否执行下一步\r\n        if (!beforeShowPopper) {\r\n          return;\r\n        }\r\n      }\r\n\r\n      if (timeout.value) {\r\n        clearTimeout(timeout.value);\r\n      }\r\n\r\n      // 延迟时间\r\n      timeout.value = setTimeout(() => {\r\n        visible.value = true;\r\n        mouseType.value = event.type;\r\n      }, props.delay);\r\n\r\n      zIndex.value = handleGetIndex();\r\n    };\r\n\r\n    // 隐藏\r\n    const handleClosePopper = () => {\r\n      // 清除延迟\r\n      if (timeout.value) {\r\n        clearTimeout(timeout.value);\r\n\r\n        // 鼠标离开时Tooltip不会关闭\r\n        if (!props.controlled) {\r\n          timeout.value = setTimeout(() => {\r\n            visible.value = false;\r\n            mouseType.value = '';\r\n          }, 100);\r\n        }\r\n      }\r\n    };\r\n\r\n    // 获取index\r\n    const handleGetIndex = () => {\r\n      transferIncrease();\r\n\r\n      return transferIndex;\r\n    };\r\n\r\n    // 鼠标进入\r\n    const handleMouseenter = (event) => {\r\n      // 是否手动控制\r\n      if (props.manual) {\r\n        return;\r\n      }\r\n\r\n      // 是否显示\r\n      if (visible.value) {\r\n        // 清除定时器\r\n        if (timeout.value) {\r\n          clearTimeout(timeout.value);\r\n        }\r\n\r\n        return;\r\n      }\r\n\r\n      handleShowPopper(event);\r\n    };\r\n\r\n    // 鼠标离开\r\n    const handleMouseleave = () => {\r\n      // 是否手动控制\r\n      if (props.manual) {\r\n        return;\r\n      }\r\n\r\n      handleClosePopper();\r\n    };\r\n\r\n    // 鼠标移动\r\n    const handleMousemove = () => {\r\n      if (mouseType.value !== 'mouseenter') {\r\n        return;\r\n      }\r\n\r\n      if (timeout.value) {\r\n        clearTimeout(timeout.value);\r\n      }\r\n\r\n      if (!visible.value) {\r\n        visible.value = true;\r\n      }\r\n    };\r\n\r\n    // 点击显示\r\n    const handleClickShowPopper = (event) => {\r\n      // 是否手动控制\r\n      if (!props.manual) {\r\n        return;\r\n      }\r\n\r\n      handleShowPopper(event);\r\n    };\r\n\r\n    // 点击外部\r\n    const handleClickOutside = () => {\r\n      // 是否手动控制\r\n      if (!props.manual) {\r\n        return;\r\n      }\r\n\r\n      // 是否显示\r\n      if (!visible.value) {\r\n        return;\r\n      }\r\n\r\n      handleClosePopper();\r\n    };\r\n\r\n    // watch\r\n\r\n    watch(\r\n      () => props.content,\r\n      () => {\r\n        proxy.updatePopper();\r\n      }\r\n    );\r\n\r\n    // onMounted\r\n    onMounted(() => {\r\n      zIndex.value = handleGetIndex();\r\n\r\n      // 是否总是可见\r\n      if (props.always) {\r\n        proxy.updatePopper();\r\n      }\r\n    });\r\n\r\n    return {\r\n      prefixCls,\r\n\r\n      // dom\r\n      popper,\r\n      reference,\r\n\r\n      // data\r\n      visible,\r\n\r\n      // computed\r\n      popperClasses,\r\n      popperStyles,\r\n      innerClasses,\r\n      innerStyles,\r\n\r\n      // methods\r\n      handleShowPopper,\r\n      handleClosePopper,\r\n      handleClickShowPopper,\r\n      handleClickOutside,\r\n      handleMouseenter,\r\n      handleMouseleave,\r\n      handleMousemove,\r\n    };\r\n  },\r\n});\r\n</script>\r\n"],"names":["_withDirectives","_openBlock","_createElementBlock","_normalizeClass","_createCommentVNode","_createElementVNode","_renderSlot","_createBlock","_Teleport","_Transition","_withCtx","_normalizeStyle","_withModifiers","_vShow"],"mappings":"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"}