目录实现思路1. 创建一个自定义指令文件showTip.js。该文件放在directives文件夹下。内容如下:2. 全局引入3. 组件中使用总结实现思路 最近在做项目的时候遇到一
最近在做项目的时候遇到一个样式,文本超出某个宽度的时候需要展示...,鼠标移上去展示提示信息,如果过没有超出宽度则不展示提示框。这篇文章主要就是介绍如何实现的。
首先我们分析一下要根据文本的宽度是否超过展示提示框,那么就必须要获取文本的宽度和容器的宽度,然后还要根据el-tooltip的disabled属性来判断是否需要展示tool-tip。我们可以通过自定义一个指令来是实现。大致思路如下:
特别注意:
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;
在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');
在需要使用的组件中使用该指令
<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的资料请关注编程网其它相关文章!
--结束END--
本文标题: vue3超出文本展示eltooltip实现示例
本文链接: https://www.lsjlt.com/news/197623.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0