实现一个内容超出显示省略号，并鼠标浮入显示tooltip，不超出的不显示tooltip组件

实现一个内容超出显示省略号，并鼠标浮入显示tooltip，不超出的不显示tooltip组件

ps：该组件是基于element-plus，使用vue3最新的setup语法糖实现的。不清楚的大家可以根据我的思路用其他技术栈实现。

背景

项目中有很多地方有超出显示省略号，然后鼠标浮入显示tooltip的需求。在这之前，我发现项目中有些是鼠标浮入都显示tooltip，无关乎是否超出；还有一些甚至超出显示省略号，而没有加tooltip，也就是这种情况用户连完整信息都不清楚。我感觉这应该不是产品想要的效果，可能是之前需求太多，或者这个项目经手的人太多，导致没有注意到这种细微的功能。然后我趁着这版本迭代的空闲期整理了一下，找产品挨个对了一下，想统一和完善项目中这种功能。项目主要的技术栈是vue2，在项目中封装了一个组件。在这里，我想着用vue3+element-plus实现，来给大家整理思路，以及巩固和学习一下vue3新setup语法糖。

功能点

• 超出显示省略号
• 显示省略号的情况下，鼠标移入显示全部
• 考虑不是纯文本的情况，即可自定义内容区
• 考虑tooltip显示的内容可自定义

实现

• 超出显示省略号
  这个其实不用多说，我们直接用css来实现就好，就是常见老三样，加上宽度的限制。

  <template>
    <div class="content" :style="{width: props.width}">
      {{props.content}}
    div>
  template>
  <script setup lang="ts">
    // 定义props的类型
    interface props {
      content: string,
      width: string
    }
    // 使用withDefaults来给props赋默认值
    const props = withDefaults(defineProps<props>(), {
      content: '',
      width: ''
    })
  script>
  <style>
    .content {
      overflow: hidden; 
      white-space: nowrap;
      text-overflow: ellipsis
    }
  style>
  

  现在这样就实现了超出显示省略号。我们来调用看看效果：
  
  组件调用代码

  <script setup lang="ts">
    // This starter template is using Vue 3 
        
  相关推荐
        
  
                  
  2022-04-21 C++实现MyString的示例代码_C 语言
                  
  2022-10-19 python类参数定义及数据扩展方式unsqueeze/expand_python
                  
  2023-11-16 【Python】从列表/dataframe/pandas中删除 nan
                  
  2022-11-17 C#实现表格数据转实体的示例代码_C#教程
                  
  2022-05-12 如何封装发布Composer包并在项目中安装使用
                  
  2022-03-23 如何使用Redis实现电商系统的库存扣减_Redis
                  
  2022-04-23 .NET Core使用APB vNext框架入门教程_实用技巧
                  
  2022-09-07 Python中的if判断语句中包含or问题_python