vue3超出文本展示el?tooltip如何實(shí)現(xiàn)

這篇文章主要介紹“vue3超出文本展示el tooltip如何實(shí)現(xiàn)”，在日常操作中，相信很多人在vue3超出文本展示el tooltip如何實(shí)現(xiàn)問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue3超出文本展示el tooltip如何實(shí)現(xiàn)”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

實(shí)現(xiàn)思路

最近在做項(xiàng)目的時(shí)候遇到一個(gè)樣式，文本超出某個(gè)寬度的時(shí)候需要展示...，鼠標(biāo)移上去展示提示信息，如果過(guò)沒(méi)有超出寬度則不展示提示框。這篇文章主要就是介紹如何實(shí)現(xiàn)的。

首先我們分析一下要根據(jù)文本的寬度是否超過(guò)展示提示框，那么就必須要獲取文本的寬度和容器的寬度，然后還要根據(jù)el-tooltip的disabled屬性來(lái)判斷是否需要展示tool-tip。我們可以通過(guò)自定義一個(gè)指令來(lái)是實(shí)現(xiàn)。大致思路如下：

• 獲取容器的寬度，獲取文本的寬度。

• 判斷寬度，并且監(jiān)聽(tīng)mouseenter事件，如果文本的寬度>容器的寬度, 就將tool-tip的disabled的屬性設(shè)置為false，否則就設(shè)置為true

特別注意：

• 在vue3中，我們不能將指定綁定在el-tooltip上，而是需要綁定在el-tooltip的外層容器上。因此在獲取元素的時(shí)候就需要在外層容器上內(nèi)查找el-tooltop。

• 在計(jì)算元素的寬度的時(shí)候還要考慮左右的padding的大小

代碼實(shí)現(xiàn)

1. 創(chuàng)建一個(gè)自定義指令文件showTip.js。

該文件放在directives文件夾下。內(nèi)容如下：

import { getStyle } from 'element-plus/lib/utils/dom/index';
const showTip = {
  created(el, binding, vnode) {
    let tooltipNode = vnode.children.find((childCmpt) => childCmpt.component?.type.name == 'ElTooltip');
    if (tooltipNode) {
      // let { content } = tooltipNode.props;
      el.addEventListener('mouseenter', () => {
        tooltipNode.component.props.disabled = true;
        const range = document.createRange();
        range.setStart(el, 0);
        range.setEnd(el, el.childNodes.length);
        const rangeWidth = Math.round(range.getBoundingClientRect().width);
        const padding = (parseInt(getStyle(el, 'paddingLeft'), 10) || 0) + (parseInt(getStyle(el, 'paddingRight'), 10) || 0);
        if (rangeWidth + padding > el.offsetWidth || el.scrollWidth > el.offsetWidth) {
          tooltipNode.component.props.disabled = false;
        }
      });
    }
  }
};
export default showTip;

2. 全局引入

在main.js中引入該指令文件

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import showTip from './directives/showTip.js';
const app = createApp(App);
app.directive('show-tip', showTip);
app.use(ElementPlus).mount('#app');

3. 組件中使用

在需要使用的組件中使用該指令

<template>
  <div class="test-wrapper">
    <div class="test-value" v-show-tip>
    <el-tooltip placement="top" :content="name">{{name}}</el-tooltip>
    </div>
  </div>
</template>
<script setup>
const name = '這是一段一段一段一段一段非常非常非常非常長(zhǎng)長(zhǎng)的文本';
</script>
<style scoped>
.test-value {
  width: 20%;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>

效果如下： 文本超出，鼠標(biāo)移上去就會(huì)展示提示信息。

到此，關(guān)于“vue3超出文本展示el tooltip如何實(shí)現(xiàn)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！