【vue-超出内容时 el-tooltip 提示框才显示,没有超出不显示】
2023-12-25 19:40:40
使用disabled属性控制el-tooltip的content显示与隐藏
<div v-for="(item,index) in treeData" :key="item.id" @click.stop="changeChecked(item)">
<el-card shadow="hover" :class="[{ 'select-item': item.checked }, 'list-item']">
<div class="item-main">
<el-icon><Document /></el-icon>
<div class="knowledge-name Knowledge" @mouseover="onMouseOver(index)">
<el-tooltip class="box-item" effect="dark" :disabled="isShowTooltip" :content="item.label" placement="top">
<span ref="KnowledgeContent"> {{ item.label }}</span>
</el-tooltip>
</div>
<el-link class="del-btn" type="danger" :icon="ElIconDelete" @click.stop="delNode(item)" />
</div>
</el-card>
</div>
定义isShowTooltip变量控制disabled,经过onMouseOver鼠标悬停事件改变isShowTooltip值
const isShowTooltip = ref(true)
//note el-tooltip超出内容时提示框才显示,没有超出不显示
const onMouseOver = i => {
const parentWidth = proxy.$refs.KnowledgeContent[i]?.parentNode?.offsetWidth // 获取当前元素父级可视宽度
const contentWidth = proxy.$refs.KnowledgeContent[i]?.offsetWidth // 获取当前元素可视宽度
isShowTooltip.value = contentWidth <= parentWidth
}
文章来源:https://blog.csdn.net/qq_43127471/article/details/135198818
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!