element实现超出隐藏省略号，鼠标移动悬浮显示

最新推荐文章于 2023-01-02 21:27:42 发布

37 degrees Celsius

最新推荐文章于 2023-01-02 21:27:42 发布

阅读量951

点赞数

分类专栏： vue element 文章标签： vue vue.js javascript

本文链接：https://blog.csdn.net/qq_46264882/article/details/121662390

版权

vue 同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

element

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中创建一个名为EllipsisTooltip的组件，用于处理文本溢出问题，通过调整样式和方法实现内容可控制的 tooltip 显示。组件接受text、placement和className作为props，可用于展示动态内容并保持美观的显示效果。

摘要由CSDN通过智能技术生成

效果图：
在这里插入图片描述

新增vue文件`EllipsisTooltip.vue`

一般情况下我都是在component文件夹中创建改vue文件

<template>
  <el-tooltip
    :ref="tlp"
    :content="text"
    effect="dark"
    :disabled="!tooltipFlag"
    :placement="placement"
    class="tooltip"
  >
    <span :class="className" @mouseenter="visibilityChange($event)">{{ text }}</span>
  </el-tooltip>
</template>

<script>
export default {
  name: 'EllipsisTooltip',
  props: {
    text: { type: String, default: '' }, // 字符内容
    placement: { type: String, default: 'top-start' },
    className: { type: String, default: 'text' } // class
  },
  data () {
    return {
      disabledTip: false,
      tooltipFlag: false
    }
  },
  methods: {
    // tooltip的可控
    visibilityChange (event) {
      const ev = event.target
      const evHeight = ev.offsetHeight // 文本的实际高度
      const contentHeight = this.$refs.tlp.$el.parentNode.clientHeight // 文本容器高度
      console.log(contentHeight, evHeight)
      if (contentHeight < evHeight) {
        // 实际内容高度 > 文本高度 =》内容溢出
        this.tooltipFlag = true // NameIsIncludeWord ? true : !!false
      } else {
        // 否则为不溢出
        this.tooltipFlag = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
//el-tooltip二次封装
.tooltip-wrap {
  height: 16px; // 必须要有高度设置，因为tooltip的显示条件是通过高度来判断的
  display: inline-block;
  display: -webkit-box;
  -webkit-line-clamp: 1; // 因为通过高度所以只显示一行，溢出显示省略号
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;//英文数字折行

  span {
    line-height: 1.3;//这个行高看自定义样式文本高度
  }
}
</style>

在其他地方调用该组件

在组件中传递该text值即可

<template>
...
	<EllipsisTooltip :text="****" />
...
</template>

<script>
import EllipsisTooltip from '@/components/ellipsisTooltip/EllipsisTooltip.vue'

export default {
  components: {
    EllipsisTooltip
  },
}
</script>