【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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。