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实现示例的详细内容,更多关于vue 超出文本展示el tooltip的资料请关注脚本之家其它相关文章!