Vue封装文字超出一行，省略号显示，鼠标悬浮展示全部

2024-07-13 19:32| 来源: 网络整理| 查看: 265

效果图：

为大家提供了两个版本，一个是Vue+iview，一个是Vue+elementui，代码如下：

一、 Vue+iview

1）NormalTextTooltipol.vue组件代码

export default { name: "tooltipWrap", props: { text: { default: "" }, // 字符内容 placement: { type: String, default: "top-start" }, className: { type: String, default: "text" } // class }, data() { return { disabledTip: false, tooltipFlag: false }; }, methods: { // tooltip的可控 visibilityChange(event) { const ev = event.target; const ev_weight = ev.scrollWidth; // 文本的实际宽度 const content_weight = this.$refs.tlp.$el.parentNode.clientWidth; // 文本容器宽度(父节点) if (ev_weight > content_weight) { // 文本宽度 > 实际内容宽度 =》内容溢出 this.tooltipFlag = true; } else { // 否则为不溢出 this.tooltipFlag = false; } } } }; .ivu-tooltip-inner { max-width: none !important; } .ivu-tooltip { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; } .tooltip-wrap { height: 18px; } .over-flow { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; } p { width: 100%; margin: 0; }

2）引用组件并使用，代码如下：

import NormalTextTooltipol from "../../../components/NormalTextTooltipol"; export default { components: { NormalTextTooltipol }, data() { return { info: "我是很长很长的测试数据数据数据数据" }; }, created() {}, methods: {} }; 二、 Vue+elementUi

1）NormalTextTooltipol.vue组件代码

export default { name: "tooltipWrap", props: { text: { default: "" }, // 字符内容 placement: { type: String, default: "top-start" }, className: { type: String, default: "text" } // class }, data() { return { disabledTip: false, tooltipFlag: false }; }, methods: { // tooltip的可控 visibilityChange(event) { const ev = event.target; const ev_weight = ev.scrollWidth; // 文本的实际宽度 const content_weight = this.$refs.tlp.$el.parentNode.clientWidth; // 文本容器宽度(父节点) if (ev_weight > content_weight) { // 文本宽度 > 实际内容宽度 =》内容溢出 this.tooltipFlag = true; } else { // 否则为不溢出 this.tooltipFlag = false; } } } }; .tooltip-wrap { height: 18px; } .over-flow { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; } p { width: 100%; margin: 0; }

2）引入和使用方法，与第一个例子相同，大家可以参照，在此就不在赘述

【本文地址】

公司简介

联系我们