vue实现鼠标放上去就有提示_Vue自定义指令--实现文字溢出显示...鼠标移入浮层展示全部...

这篇博客介绍了如何在Vue中创建一个自定义指令,当鼠标悬停在文本上时,显示超出部分的内容。通过获取元素样式,创建一个临时文本容器来测量文字宽度,如果文字宽度大于元素宽度,则隐藏超出部分,并在鼠标移入时显示浮层,鼠标移出时移除浮层。
摘要由CSDN通过智能技术生成

Vue.directive('showTips', {

// el {element} 当前元素

componentUpdated (el) {

const curStyle = window.getComputedStyle(el, '') // 获取当前元素的style

const textSpan = document.createElement('span') // 创建一个容器来记录文字的width

// 设置新容器的字体样式,确保与当前需要隐藏的样式相同

textSpan.style.fontSize = curStyle.fontSize

textSpan.style.fontWeight = curStyle.fontWeight

textSpan.style.fontFamily = curStyle.fontFamily

// 将容器插入body,如果不插入,offsetWidth为0

document.body.appendChild(textSpan)

// 设置新容器的文字

textSpan.innerHTML = el.innerText

// 如果字体元素大于当前元素,则需要隐藏

if (textSpan.offsetWidth > el.offsetWidth) {

// 给当前元素设置超出隐藏

el.style.overflow = 'hidden'

el.style.textOverflow = 'ellipsis'

el.style.whiteSpace = 'nowrap'

// 鼠标移入

el.onmouseenter = function (e) {

// 创建浮层元素并设置样式

const vcTooltipDom = document.createElement('div')

vcTooltipDom.style.cssText = `

max-width:400px;

max-height: 400px;

overflow: auto;

position:absolute;

top:${e.clientY + 5}px;

left:${e.clientX}px;

background: rgba(0, 0 , 0, .6);

color:#fff;

border-radius:5px;

padding:10px;

display:inline-block;

font-size:12px;

z-index:19999

`

// 设置id方便寻找

vcTooltipDom.setAttribute('id', 'vc-tooltip')

// 将浮层插入到body中

document.body.appendChild(vcTooltipDom)

// 浮层中的文字

document.getElementById('vc-tooltip').innerHTML = el.innerText

}

// 鼠标移出

el.onmouseleave = function () {

// 找到浮层元素并移出

const vcTooltipDom = document.getElementById('vc-tooltip')

vcTooltipDom && document.body.removeChild(vcTooltipDom)

}

}

// 记得移除刚刚创建的记录文字的容器

document.body.removeChild(textSpan)

},

// 指令与元素解绑时

unbind () {

// 找到浮层元素并移除

const vcTooltipDom = document.getElementById('vc-tooltip')

vcTooltipDom && document.body.removeChild(vcTooltipDom)

}

})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值