判断内容是否超出超出省略并且鼠标hover出现tooltip

bobringtheboys

已于 2024-03-13 11:15:35 修改

阅读量465

点赞数 10

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

于 2024-02-19 17:35:16 首次发布

本文链接：https://blog.youkuaiyun.com/bobringtheboys/article/details/136175309

本文介绍了如何在Vue中使用`el-tooltip`组件创建一个具有自适应宽度的描述标签，当内容过长时可以实现文本溢出并显示省略号。它展示了组件的属性设置、数据管理以及鼠标悬停事件的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--
 * @Descripttion:
 * @version:
 * @Author: Xueran
 * @Date: 2022-10-25 21:48:41
 * @LastEditors: Xueran
 * @LastEditTime: 2022-10-25 21:56:01
-->
<template>
  <el-tooltip
    :content="value !== null ? value + '' : '-'"
    :disabled="tooltipShow"
    placement="top-start"
  >
    <div :class="style.parentBox" @mouseover="isShowTooltip">
      <span ref="content"  >
        {{ value }}
      </span>
    </div>
  </el-tooltip>
</template>

<script>
import style from './index.module.css';

export default {
  name: 'DescriptionsTooltip',
  props: ['value'],
  data() {
    return {
      style,
      tooltipShow: false
    };
  },
  methods: {
    isShowTooltip() {
      const bool =
        this.$refs.content.offsetWidth <
        this.$refs.content.parentNode.offsetWidth;
      this.tooltipShow = bool;
    }
  }
};
</script>


注意: 外面的盒子需要包起来 并且要有个固定宽度  

     <div class="value">
       <descriptions-tooltip :value="你绑定的变量 || '-'" />
     </div >
     
    .value {
      外盒子的宽度需要固定
    }
    .parentBox {
	  width: 100%;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	}