vue?Element?UI擴展內(nèi)容過長使用tooltip顯示
更新時間：2022年06月01日 15:24:42 作者：FangMu
這篇文章主要為大家介紹了vue?Element?UI擴展內(nèi)容過長使用tooltip展示鼠標hover時的提示信息，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
1. 介紹
Tooltip常用于展示鼠標 hover 時的提示信息。
而在實際過程中，有這么一個需求：只有文字內(nèi)容排不下，出現(xiàn)省略號，才需要顯示tooltip的提示內(nèi)容。
本文章的思路是通過一個自定義指令實現(xiàn)如下效果：姓名字段過長時才顯示tooltip
2. element-ui(vue2版本)
2.1 注冊指令
1) akTooltipAutoShow.js
說明：
注冊了一個名稱為 'ak-tooltip-auto-show' 的指令。會根據(jù)內(nèi)容進行判斷是否展示tooltip。
import Vue from 'vue';
import { on, off, getStyle } from 'element-ui/src/utils/dom';
/**
* ak-tooltip-auto-show
* 當(dāng)text沒有被折疊時，不顯示tooltip
*/
Vue.directive('ak-tooltip-auto-show', {
inserted: function (el, binding, vnode) {
el.addEventListener('mouseenter', function (e) {
let defalutSilent = !!Vue.config.silent;
Vue.config.silent = true;
vnode.componentInstance.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) {
vnode.componentInstance.disabled = false;
}
Vue.config.silent = defalutSilent;
});
}
});2.2 使用
說明：
使用<el-tooltip v-ak-tooltip-auto-show>包囊展示的內(nèi)容。
<div class="details-inner__row">
<span class="details-inner__row-name">姓名:</span>
<el-tooltip placement="top" effect="dark" :content="item.name" v-ak-tooltip-auto-show>
<span class="details-inner__row-value">{{item.name}}</span>
</el-tooltip>
</div>
// css
.details-inner__row-value {
width: 80%;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}3. element-plus(vue3版本)
3.1 注冊指令
1) akTooltipAutoShow.js
說明：
注冊了一個名稱為 'ak-tooltip-auto-show' 的指令。會根據(jù)內(nèi)容進行判斷是否展示tooltip。
注意：
因為element-plus與之前的element-ui不一樣，在element-plus(vue3版本)中是 <展示組件>包含<el-tooltip>的，所以代碼中需要在<展示組件>內(nèi)查找<el-tooltop>。
import { getStyle } from 'element-plus/lib/utils/dom/index';
/**
* show-overflow-tooltip for text
* 當(dāng)text沒有被折疊時，不顯示tooltip
*/
const akTooltipAutoShow = {
created(el, binding, vnode) {
let tooltipNode = vnode.children.find((childrenCmpt) => childrenCmpt.component?.type.name == 'ElTooltip');
if (tooltipNode) {
let { content } = tooltipNode.props;
if (content && ['添加', '編輯', '刪除','查看'].includes(content)) {
el.addEventListener('click', function (e) {
let defalutDisabled = tooltipNode.component.props.disabled;
if (!defalutDisabled) {
tooltipNode.component.props.disabled = true;
setTimeout(() => {
tooltipNode.component.props.disabled = defalutDisabled;
}, 200);
}
});
} else {
el.addEventListener('mouseenter', (e) => {
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 akTooltipAutoShow;2) 進行局部或全局注冊
// main.js
const app = createApp(App);
import akTooltipAutoShow from './akTooltipAutoShow.js';
app.directive('ak-tooltip-auto-show', akTooltipAutoShow);3.2 使用
說明：
因element-plus(vue3版本)本身不提供 root element，所以需要把此指令放到<el-tooltip>的父級組件。
<div class="details-inner__row">
<span class="details-inner__row-name">姓名:</span>
<span class="details-inner__row-value" v-ak-tooltip-auto-show>
<el-tooltip placement="top-end" :content="item.name">{{item.name}}</el-tooltip>
</span>
</div>
css
.details-inner__row-value {
width: 80%;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}以上就是vue Element UI擴展內(nèi)容過長使用tooltip顯示示的詳細內(nèi)容，更多關(guān)于vue Element UI內(nèi)容過長tooltip顯示的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue3+electron12+dll開發(fā)客戶端配置詳解
本文將結(jié)合實例代碼，介紹vue3+electron12+dll客戶端配置,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
這篇文章主要介紹了Vue自定義組件雙向綁定實現(xiàn)原理及方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了Vue?如何關(guān)掉響應(yīng)式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue引入微信sdk 實現(xiàn)分享朋友圈獲取地理位置功能
這篇文章主要介紹了h5 vue引入微信sdk 實現(xiàn)分享朋友圈，分享給朋友，獲取地理位置功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
vue.js中methods watch和computed的區(qū)別示例詳解
methods,watch和computed都是以函數(shù)為基礎(chǔ)的,但各自卻都不同,這篇文章主要給大家介紹了關(guān)于vue.js中methods watch和computed區(qū)別的相關(guān)資料,需要的朋友可以參考下2021-08-08
關(guān)于實現(xiàn)Vue3版抖音滑動插件踩坑指南
這篇文章主要給大家介紹了關(guān)于實現(xiàn)Vue3版抖音滑動插件踩坑指南,文中通過實例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了詳解vuex的簡單使用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了在vue中axios設(shè)置timeout超時的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
頁面內(nèi)容太多會導(dǎo)致加載速度過慢,這時可考慮使用滾動加載即還沒有出現(xiàn)在可視范圍內(nèi)的內(nèi)容塊先不加載,出現(xiàn)后再加載,所以本文給大家介紹了基于vue實現(xiàn)頁面滾動加載的示例,需要的朋友可以參考下2024-01-01
前端vue面試總問watch和computed區(qū)別及建議總結(jié)
在現(xiàn)代前端的面試中,vue和react是面試過程中基本必問的技術(shù)棧,其中Vue響應(yīng)式話題,watch和computed是面試官非常喜歡聊的主題,雖然watch和computed它們都用于監(jiān)聽數(shù)據(jù)的變化,但它們在實現(xiàn)原理、使用場景和行為上有著顯著的區(qū)別,本文將深入探討,并提供一些面試過程中的建議2023-10-10