Vue 设置el-tooltip根据文字溢出…显示
在开发中,遇到文字溢出需要展示…的情况,要配合el-tooltip进行展示,若只用{{数据.length}}判断,很容易不触发。因此,可以用当前内容的宽度来进行判断,如果内容的宽度>元素的宽度。就展示…且进行tooltip提示。话不多说,来拿代码:
css:
li{
overflow: hidden !important; text-overflow: ellipsis!important; display: -webkit-box!important; -webkit-line-clamp: 1!important; -webkit-box-orient: vertical!important;
}
注(兼容IE)
设置鼠标移入元素的方法
visibilityChange (event) {
const ev = event.target
const evWeight = ev.scrollWidth
const contentWeight = ev.clientWidth
if (evWeight > contentWeight) {
// 实际宽度 > 可视宽度 文字溢出
this.isShowTooltip = false
} else {
// 否则为不溢出
this.isShowTooltip = true
}
}
好啦现在就可以啦!
当然内容较为繁琐,需要反复循环遍历的话,可以在得到数据前先进行修改操作,界面的展示数据尽量简单化。