實現一個內容超出顯示省略號，并鼠標浮入顯示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-06-18 Elasticsearch之基本查詢及組合查詢操作示例_其它綜合
                  
  2022-09-16 詳解SQL報錯盲注_MsSql
                  
  2022-07-30 Linux常見命令-壓縮和解壓類 一、gzip/gunzip 壓縮 二、zip/unzip 壓縮 三
                  
  2022-07-04 如何用python實現結構體數組_python
                  
  2023-07-05 全局配置cnpm淘寶鏡像
                  
  2022-04-07 c++中的volatile和variant關鍵字詳解_C 語言
                  
  2024-03-10 【Redis】Redis的持久化（備份）
                  
  2022-10-18 AJAX淺析數據交換的實現_AJAX相關