写一个全局监听方法
js
const parentDom = document.body
mounted() {
document.body.addEventListener('mouseover', this.handleOver)
// document.body.addEventListener('mouseleave', this.removeDom)
},
methods: {
handleOver(e){
var target = e.target;
target.removeEventListener('mouseleave', this.removeDom)
if (target.getAttribute('tooltip')) {
// const parentDom = document.body
// const parentDom = document.querySelector('#dv-full-screen-container')
let tooltipText = target.getAttribute('tooltip'); // 获取当前所需文本
// console.log(target)
// 在此处编写点击事件处理逻辑
const curStyle = window.getComputedStyle(target, '');
// 获取当前hover元素的宽高和位置 用来确定 弹窗的位置
let targetObj = target.getBoundingClientRect()
console.log(targetObj)
console.log(targetObj.top);
// console.log(curStyle.width)
// console.log(curStyle.height)
const tooltip = document.createElement('div');
tooltip.className = 'tooltipCls';
tooltip.innerHTML = tooltipText;
parentDom.appendChild(tooltip);
tooltip.style.cssText = `
display: inline-block;
max-width: 500px;
max-height: 400px;
position: fixed;
top: ${targetObj.top - 10}px;
left: ${targetObj.left + (parseFloat(targetObj.width) / 2)}px;
padding: 10px;
overflow: auto;
font-size: 14px;
color: #fff;
background: rgba(0, 0 , 0, .8);
border-radius: 5px;
z-index: 19999;
transform: translate(-50%, -100%);
`;
target.addEventListener('mouseleave', this.removeDom)
}
},
removeDom({target}){
// console.log(target)
if (target.getAttribute('tooltip')) {
setTimeout(() => {
const tooltip = document.querySelector('.tooltipCls')
// console.log(tooltip)
tooltip && parentDom.removeChild(tooltip);
}, 100);
}
}
},
beforeDestroy() {
document.body.removeEventListener('mouseover', this.handleOver)
document.body.removeEventListener('mouseleave', this.removeDom)
}