|
|
@@ -0,0 +1,124 @@
|
|
|
+// 引入组件
|
|
|
+import {createApp, nextTick} from "vue";
|
|
|
+import MyToolTip from './ToolTip.vue'
|
|
|
+
|
|
|
+/**
|
|
|
+ * v-ellipse-tooltip.top
|
|
|
+*/
|
|
|
+
|
|
|
+// 位置定位
|
|
|
+function calculationLocation(el, target, placements) {
|
|
|
+ if (!el || !target) return;
|
|
|
+ el.tooltipPosition.y = 0;
|
|
|
+ el.tooltipPosition.x = 0;
|
|
|
+ let el_dom = el.$el.nextElementSibling.getBoundingClientRect()
|
|
|
+ let target_dom = target.getBoundingClientRect()
|
|
|
+
|
|
|
+ if (placements === "left") {
|
|
|
+ el.tooltipPosition.x = target_dom.x - el_dom.width - 10
|
|
|
+ el.tooltipPosition.y = target_dom.y - el_dom.height / 2 + target_dom.height / 2
|
|
|
+ } else if (placements === "bottom") {
|
|
|
+ el.tooltipPosition.x = target_dom.x + target_dom.width / 2 - el_dom.width / 2
|
|
|
+ el.tooltipPosition.y = target_dom.y + el_dom.height + 10
|
|
|
+ } else if (placements === "right") {
|
|
|
+ el.tooltipPosition.x = target_dom.x + target_dom.width + 10
|
|
|
+ el.tooltipPosition.y = target_dom.y - el_dom.height / 2 + target_dom.height / 2
|
|
|
+ } else if (placements === "top") {
|
|
|
+ el.tooltipPosition.x = target_dom.x + target_dom.width / 2 - el_dom.width / 2
|
|
|
+ el.tooltipPosition.y = target_dom.y - el_dom.height - 10
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 方向
|
|
|
+const allPlacements = ['left', 'bottom', 'right', 'top']
|
|
|
+
|
|
|
+
|
|
|
+function getElStyleAttr(element, attr) {
|
|
|
+ const styles = window.getComputedStyle(element)
|
|
|
+ return styles[attr]
|
|
|
+}
|
|
|
+
|
|
|
+// const getPosition = (target) => {
|
|
|
+// const x = target.offsetLeft + target.offsetWidth/2
|
|
|
+// const y = target.offsetTop + target.offsetHeight/2
|
|
|
+// return { x, y}
|
|
|
+// }
|
|
|
+
|
|
|
+const isOverflow = (target) => {
|
|
|
+ const scrollWidth = target.scrollWidth
|
|
|
+ const offsetWidth = target.offsetWidth
|
|
|
+ // const range = document.createRange()
|
|
|
+ // range.setStart(target, 0)
|
|
|
+ // range.setEnd(target, target.childNodes.length)
|
|
|
+ // const rangeWidth = range.getBoundingClientRect().width
|
|
|
+ // const padding = (parseInt(getElStyleAttr(target, 'paddingLeft'), 10) || 0) + (parseInt(getElStyleAttr(target, 'paddingRight'), 10) || 0)
|
|
|
+ // return (rangeWidth + padding > target.offsetWidth) || scrollWidth > offsetWidth
|
|
|
+ return scrollWidth > offsetWidth
|
|
|
+}
|
|
|
+
|
|
|
+export const ellipsisTooltip = {
|
|
|
+ mounted(el, binding) {
|
|
|
+ //获取指令的参数
|
|
|
+ const {
|
|
|
+ value: {
|
|
|
+ placement, content, destroyOnLeave
|
|
|
+ } = {}
|
|
|
+ } = binding;
|
|
|
+ // 加上超出...样式
|
|
|
+ el.style.overflow = "hidden";
|
|
|
+ el.style.textOverflow = "ellipsis";
|
|
|
+ el.style.whiteSpace = "nowrap";
|
|
|
+ //鼠标移开时 清除元素
|
|
|
+ const onMouseLeave = () => {
|
|
|
+ if (el.w_tipInstance) {
|
|
|
+ el.w_tipInstance.hiddenTip()
|
|
|
+ el.w_tooltip.remove()
|
|
|
+ el.w_tipInstance = null
|
|
|
+ el.w_tooltip = null
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const onMouseEnter = () => {
|
|
|
+ // 判断内容长度 需要展示
|
|
|
+ if (isOverflow(el)) {
|
|
|
+ // const positionXY = getPosition(el)
|
|
|
+ const directiveList = allPlacements.filter(placement => binding.modifiers[placement])
|
|
|
+ const placements = directiveList.length ? directiveList : allPlacements
|
|
|
+ if (!el.w_tooltip) {
|
|
|
+ // 创建tooltip实例
|
|
|
+ const vm = createApp(MyToolTip)
|
|
|
+ // 创建根元素
|
|
|
+ el.w_tooltip = document.createElement('div')
|
|
|
+ // 挂载到页面
|
|
|
+ document.body.appendChild(el.w_tooltip)
|
|
|
+ el.w_tooltip.id = `tooltip_${Math.floor(Math.random() * 10000)}`
|
|
|
+ el.w_tipInstance = vm.mount(el.w_tooltip)
|
|
|
+ }
|
|
|
+ // 设置 tooltip 显示方向
|
|
|
+ el.w_tipInstance.placements = placement || placements[0] || 'top'
|
|
|
+ // 设置显示内容
|
|
|
+ el.w_tipInstance.setContent(content || el.innerText)
|
|
|
+ // 使 tooltip 显示
|
|
|
+ el.w_tipInstance.showTip()
|
|
|
+ nextTick(() => {
|
|
|
+ // 计算 tooltip 在页面中的位置
|
|
|
+ calculationLocation(el.w_tipInstance, el, placements[0])
|
|
|
+ })
|
|
|
+ el._scrollHandler = () => {
|
|
|
+ // 重新定位位置
|
|
|
+ if (el.w_tipInstance && el.w_tipInstance.tooltipShow) calculationLocation(el.w_tipInstance, el, placements[0])
|
|
|
+ }
|
|
|
+ window.addEventListener('scroll', el._scrollHandler)
|
|
|
+ const _destroyOnLeave = destroyOnLeave || true
|
|
|
+ if (_destroyOnLeave) el.addEventListener("mouseleave", onMouseLeave);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ el.addEventListener("mouseenter", onMouseEnter);
|
|
|
+ },
|
|
|
+ unmounted(el) {
|
|
|
+ if (el.w_tooltip) {
|
|
|
+ document.body.removeChild(el.w_tooltip)
|
|
|
+ }
|
|
|
+ window.removeEventListener('scroll', el._scrollHandler)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
