1. 超出显示tooptips
export const title = {
inserted: function(el,binding) {
let tooltip = document.createElement('div')
// tooltip.className = 'tooltip tooltip-top'
tooltip.className = 'tooltip ' + (binding.value || 'tooltip-top')
document.body.appendChild(tooltip)
el.className = el.className + ' ellipsis'
el.addEventListener('mouseenter', e => {
let curtarget = e.currentTarget
if (curtarget.clientWidth != curtarget.scrollWidth) {
let left = curtarget.offsetLeft - curtarget.scrollLeft
let top = curtarget.offsetTop - curtarget.scrollTop
let temp = curtarget
while (temp?.offsetParent) {
let tempOther = temp
while (temp.offsetParent !== tempOther.parentElement) {
left = left - tempOther.parentElement.scrollLeft
top = top - tempOther.parentElement.scrollTop
tempOther = tempOther.parentElement
}
//兼容transfrom偏移
let translates = document.defaultView.getComputedStyle(temp.offsetParent,null).transform;
let translateX = translates.includes('matrix')?parseFloat(translates.substring(6).split(',')[4]):0;
let translateY = translates.includes('matrix')?parseFloat(translates.substring(6).split(',')[5]):0;
left = left + temp.offsetParent.offsetLeft - temp.offsetParent.scrollLeft + translateX
top = top + temp.offsetParent.offsetTop - temp.offsetParent.scrollTop + translateY
temp = temp?.offsetParent
}
tooltip.style.left = left + curtarget.clientWidth / 2 + 'px'
tooltip.style.top = top + 'px'
tooltip.style.zIndex = 99999
tooltip.innerHTML = curtarget.innerText
// tooltip.className = 'tooltip tooltip-top show'
tooltip.className = 'tooltip show ' + (binding.value || 'tooltip-top')
}
})
el.addEventListener('mouseleave', e => {
// tooltip.className = 'tooltip tooltip-top'
tooltip.className = 'tooltip ' + (binding.value || 'tooltip-top')
})
},
}
2. 禁止连续点击
//传参:1000毫秒内禁止连续点击
//<div @click='addNum' v-points="1000"></div>
//不传参:默认350毫秒
//<div @click='addNum' v-points></div>
export const points = {
inserted(el, binding) {
el.addEventListener('click', () => {
el.style.pointerEvents = 'none'
setTimeout(() => {
el.style.pointerEvents = 'auto'
}, binding.value || 350)
})
},
}
3. 跟随鼠标位置 显示tooptip
export const title2 = {
inserted: function(el) {
let tooltip = document.createElement('div')
tooltip.className = 'tooltip tooltip-top'
document.body.appendChild(tooltip)
el.className = el.className + ' ellipsis'
el.addEventListener('mouseenter', e => {
let curtarget = e.currentTarget
if (curtarget.clientWidth != curtarget.scrollWidth) {
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft //分别兼容ie和chrome
var scrollY = document.documentElement.scrollTop || document.body.scrollTop
var left = e.pageX || e.clientX + scrollX //兼容火狐和其他浏览器
var top = e.pageY || e.clientY + scrollY
tooltip.style.left = left + 'px'
tooltip.style.top = top - 5 + 'px'
tooltip.style.zIndex = 99999
tooltip.innerHTML = curtarget.innerText
tooltip.className = 'tooltip tooltip-top show'
}
})
el.addEventListener('mouseleave', e => {
tooltip.className = 'tooltip tooltip-top'
})
},
}

Comments | NOTHING