|
@@ -57,68 +57,68 @@ const isOverflow = (target) => {
|
|
}
|
|
}
|
|
|
|
|
|
export const ellipsisTooltip = {
|
|
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)
|
|
|
|
- }
|
|
|
|
|
|
+ // 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)
|
|
|
|
+ // }
|
|
}
|
|
}
|
|
|
|
|