vue3超出文本展示el tooltip如何实现

这篇文章主要介绍“vue3超出文本展示el tooltip如何实现”，在日常操作中，相信很多人在vue3超出文本展示el tooltip如何实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue3超出文本展示el tooltip如何实现”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

实现思路

最近在做项目的时候遇到一个样式，文本超出某个宽度的时候需要展示...，鼠标移上去展示提示信息，如果过没有超出宽度则不展示提示框。这篇文章主要就是介绍如何实现的。

首先我们分析一下要根据文本的宽度是否超过展示提示框，那么就必须要获取文本的宽度和容器的宽度，然后还要根据el-tooltip的disabled属性来判断是否需要展示tool-tip。我们可以通过自定义一个指令来是实现。大致思路如下：

• 获取容器的宽度，获取文本的宽度。

• 判断宽度，并且监听mouseenter事件，如果文本的宽度>容器的宽度, 就将tool-tip的disabled的属性设置为false，否则就设置为true

特别注意：

• 在vue3中，我们不能将指定绑定在el-tooltip上，而是需要绑定在el-tooltip的外层容器上。因此在获取元素的时候就需要在外层容器上内查找el-tooltop。

• 在计算元素的宽度的时候还要考虑左右的padding的大小

代码实现

1. 创建一个自定义指令文件showTip.js。

该文件放在directives文件夹下。内容如下：

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 = '这是一段一段一段一段一段非常非常非常非常长长的文本';</script><style scoped>.test-value {  width: 20%;  display: inline-block;  white-space: nowrap;  text-overflow: ellipsis;  overflow: hidden;}</style>

效果如下： 文本超出，鼠标移上去就会展示提示信息。

到此，关于“vue3超出文本展示el tooltip如何实现”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！