|
@@ -9,14 +9,15 @@ import MyToolTip from './ToolTip.vue'
|
|
|
// 位置定位
|
|
|
function calculationLocation(el, target, placements) {
|
|
|
if (!el || !target) return;
|
|
|
+ console.log('el:', el)
|
|
|
+ console.log('target:', target)
|
|
|
+
|
|
|
el.tooltipPosition.y = 0;
|
|
|
el.tooltipPosition.x = 0;
|
|
|
- let el_dom = el.$el.nextElementSibling.getBoundingClientRect()
|
|
|
+ let el_dom = el.$el?.nextElementSibling?.getBoundingClientRect() || null
|
|
|
+ if (!el_dom) return
|
|
|
let target_dom = target.getBoundingClientRect()
|
|
|
|
|
|
- console.log('el_dom:', el_dom)
|
|
|
- console.log('target_dom:', target_dom)
|
|
|
-
|
|
|
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
|
|
@@ -86,6 +87,7 @@ export const ellipsisTooltip = localStorage.getItem('useEllipseTooltip') ? {
|
|
|
if (isOverflow(el)) {
|
|
|
const directiveList = allPlacements.filter(placement => binding.modifiers[placement])
|
|
|
const placements = directiveList.length ? directiveList : allPlacements
|
|
|
+ console.log('el.w_tooltip-1:', el.w_tooltip)
|
|
|
if (!el.w_tooltip) {
|
|
|
// 创建tooltip实例
|
|
|
const vm = createApp(MyToolTip)
|
|
@@ -96,12 +98,15 @@ export const ellipsisTooltip = localStorage.getItem('useEllipseTooltip') ? {
|
|
|
el.w_tooltip.id = `tooltip_${Math.floor(Math.random() * 10000)}`
|
|
|
el.w_tipInstance = vm.mount(el.w_tooltip)
|
|
|
}
|
|
|
+ console.log('el.w_tooltip-2:', el.w_tooltip)
|
|
|
// 设置 tooltip 显示方向
|
|
|
el.w_tipInstance.placements = placement || placements[0] || 'top'
|
|
|
// 设置显示内容
|
|
|
el.w_tipInstance.setContent(content || el.innerText)
|
|
|
// 使 tooltip 显示
|
|
|
el.w_tipInstance.showTip()
|
|
|
+ console.log('el:', el)
|
|
|
+ console.log('el.w_tipInstance:', el.w_tipInstance)
|
|
|
nextTick(() => {
|
|
|
// 计算 tooltip 在页面中的位置
|
|
|
calculationLocation(el.w_tipInstance, el, placements[0])
|