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