日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

實(shí)現(xiàn)一個(gè)內(nèi)容超出顯示省略號(hào)，并鼠標(biāo)浮入顯示tooltip，不超出的不顯示tooltip組件

作者：DiuDiu_yang 更新時(shí)間： 2022-04-23 編程語(yǔ)言

實(shí)現(xiàn)一個(gè)內(nèi)容超出顯示省略號(hào)，并鼠標(biāo)浮入顯示tooltip，不超出的不顯示tooltip組件

ps：該組件是基于element-plus，使用vue3最新的setup語(yǔ)法糖實(shí)現(xiàn)的。不清楚的大家可以根據(jù)我的思路用其他技術(shù)棧實(shí)現(xiàn)。

背景

項(xiàng)目中有很多地方有超出顯示省略號(hào)，然后鼠標(biāo)浮入顯示tooltip的需求。在這之前，我發(fā)現(xiàn)項(xiàng)目中有些是鼠標(biāo)浮入都顯示tooltip，無關(guān)乎是否超出；還有一些甚至超出顯示省略號(hào)，而沒有加tooltip，也就是這種情況用戶連完整信息都不清楚。我感覺這應(yīng)該不是產(chǎn)品想要的效果，可能是之前需求太多，或者這個(gè)項(xiàng)目經(jīng)手的人太多，導(dǎo)致沒有注意到這種細(xì)微的功能。然后我趁著這版本迭代的空閑期整理了一下，找產(chǎn)品挨個(gè)對(duì)了一下，想統(tǒng)一和完善項(xiàng)目中這種功能。項(xiàng)目主要的技術(shù)棧是vue2，在項(xiàng)目中封裝了一個(gè)組件。在這里，我想著用vue3+element-plus實(shí)現(xiàn)，來給大家整理思路，以及鞏固和學(xué)習(xí)一下vue3新setup語(yǔ)法糖。

功能點(diǎn)

  • 超出顯示省略號(hào)
  • 顯示省略號(hào)的情況下，鼠標(biāo)移入顯示全部
  • 考慮不是純文本的情況，即可自定義內(nèi)容區(qū)
  • 考慮tooltip顯示的內(nèi)容可自定義

實(shí)現(xiàn)

  • 超出顯示省略號(hào)
    這個(gè)其實(shí)不用多說，我們直接用css來實(shí)現(xiàn)就好，就是常見老三樣，加上寬度的限制。

    <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賦默認(rèn)值
  const props = withDefaults(defineProps<props>(), {
    content: '',
    width: ''
  })
script>
<style>
  .content {
    overflow: hidden; 
    white-space: nowrap;
    text-overflow: ellipsis
  }
style>

    現(xiàn)在這樣就實(shí)現(xiàn)了超出顯示省略號(hào)。我們來調(diào)用看看效果：
    在這里插入圖片描述
    組件調(diào)用代碼

    <script setup lang="ts">
  // This starter template is using Vue 3 
      
    相關(guān)推薦