el-tooltip超出内容时提示框才显示,没有超出不显示
在Element UI中,el-tooltip
组件用于在鼠标悬停时显示提示信息。默认情况下,即使内容没有超出也会显示提示框,因为它是基于触发器事件来决定是否显示提示框的。
如果你想要的效果是:只有当内容超出时,才显示提示框,可以通过监听内容的宽度与其容器的宽度来实现。
以下是一个简单的Vue组件示例,使用了Element UI的el-tooltip
和计算属性来实现这个效果:
<template>
<div>
<el-tooltip
:content="tooltipContent"
:disabled="!isContentOverflow"
placement="top">
<div ref="contentBox">
这里是需要显示提示框的内容
</div>
</el-tooltip>
</div>
</template>
<script>
export default {
data() {
return {
tooltipContent: '这里是超出内容的提示信息'
};
},
computed: {
isContentOverflow() {
const contentBox = this.$refs.contentBox;
return contentBox.scrollWidth > contentBox.offsetWidth;
}
}
};
</script>
在这个例子中,我们定义了一个el-tooltip
,它绑定了一个计算属性isContentOverflow
。这个计算属性会判断内容框(contentBox
)的滚动宽度是否超过了其偏移宽度。如果是,则isContentOverflow
为true
,el-tooltip
的disabled
属性为false
,这时提示框将会显示。如果内容没有超出,则isContentOverflow
为false
,el-tooltip
的disabled
属性为true
,提示框不会显示。
评论已关闭