頁面tooltip組件限制工具函數(shù)使用示例詳解
需求描述
有這樣一個需求:頁面已經(jīng)寫了太多的詳情表單元素，并且每一個表單元素都使用了Tooltip組件來包裹，這樣是不符合需求的，因為用戶需要限定當表單元素的文本太多時，也就是說出現(xiàn)了省略號才會出現(xiàn)Tooltip組件的包裹。比如項目采用的element UI組件庫。在一個頁面有太多的這樣的表單元素:
<el-form>
<el-form-item label="姓名" prop="name">
<el-tooltip :content="form.name">
<el-input v-model="form.name" disabled="true"></el-input>
</el-tooltip>
</el-form-item>
.....后續(xù)出現(xiàn)多個這樣的元素
</el-form>如果我每一個都加disabled屬性，那么頁面模板元素有將近一百個，很顯然我這樣加是很耗費時間的，很顯然對于追求高效的我是不喜歡一個一個加，然后一個一個判斷的。
在這之前，我們需要確定一點，那就是我們控制文本的截斷是通過CSS代碼來實現(xiàn)的。也就是如下這段代碼:
.el-input {
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}因此，完成以上的需求的第一步就是需要先判斷哪些元素滿足被截斷的條件。那么如何判斷文本是否被截斷呢？關于這個實現(xiàn)，我想element ui的表格組件符合這種場景，所以我只需要去參考一下element ui的表格組件的截斷判斷實現(xiàn)就知道了。沒錯，我在源碼中找到了實現(xiàn)方式。
創(chuàng)建range元素
核心思路就是創(chuàng)建一個range元素，通過獲取range元素width然后與元素的offsetWidth進行判斷就行了。所以，我按照element ui的實現(xiàn)思路完成了這個工具函數(shù)。如下所示:
function isTextOverflow(element) {
// use range width instead of scrollWidth to determine whether the text is overflowing
// to address a potential FireFox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1074543#c3
if (!element || !element.childNodes || !element.childNodes.length) {
return false;
}
const range = document.createRange();
range.setStart(element, 0);
range.setEnd(element, element.childNodes.length);
const rangeWidth = range.getBoundingClientRect().width;
// if the element has padding style,should add the padding value.
const padding = (parseInt(getStyle(element, 'paddingLeft'), 10) || 0) + (parseInt(getStyle(element, 'paddingRight'), 10) || 0);
return rangeWidth + padding > element.offsetWidth || element.scrollWidth > element.offsetWidth;
}
function hasClass(el, cls) {
if (!el || !cls) {
return false;
}
if (cls.indexOf(" ") > -1) {
return console.error(`className should not contain space!`);
}
if (el.classList) {
return el.classList.contains(cls);
} else {
return (" " + el.className + " ").indexOf(" " + cls + " ") > -1;
}
}
function camelCase(name) {
return name.replace(/([\:\_\-]+(.))/g, (_, separator, letter, offset) => offset ? letter.toUpperCase() : letter).replace(/^moz([A-Z])/, "Moz$1")
}
// IE version more than 9
function getStyle(el, styleName) {
if (!element || !styleName) return null;
styleName = camelCase(styleName);
if (styleName === 'float') {
styleName = 'cssFloat';
}
try {
var computed = document.defaultView.getComputedStyle(element, '');
return element.style[styleName] || computed ? computed[styleName] : null;
} catch (e) {
return element.style[styleName];
}
}收集所有的tooltip組件實例
這只是完成了第一步，接下來是第二步，就是我需要將頁面上所有包含tooltip組件的vue組件實例都要收集起來。首先我們可以確定頁面所有的toolTip組件實例應該都是當前這個表單組件實例的所有子組件，因此，我想到了遞歸去收集所有包含tooltip組件的組件實例。代碼如下:
export function findToolTip(children,tooltips = []){
//這里寫代碼
}所有的tooltip組件實例都是vue組件實例的子組件，所以我們可以知道我們?nèi)パh(huán)組件實例的子組件，即vm.$children屬性。然后tooltip組件有什么標志呢？或者說我們?nèi)绾闻袛嘣撟咏M件實例就是一個tooltip組件呢？我又參考了element ui tooltip組件的實現(xiàn)，發(fā)現(xiàn)element ui tooltip組件都會有一個doDestory方法。所以我們就可以根據(jù)這個來做判斷。所以遞歸方法，我們就可以寫好了。如下:
//參數(shù)1：子組件實例數(shù)組
//參數(shù)2：收集組件實例的數(shù)組
export function findToolTip(children,tooltips = []){
for(let i = 0,len = children.length;i < len;i++){
//遞歸條件
if(Array.isArray(children[i]) && children[i].length){
findToolTip(children[i],tooltips);
}else{
//判斷如果doDestroy屬性是一個方法，則代表是一個tooltip組件，添加到數(shù)組中
if(typeof children[i].doDestroy === "function"){
tooltips.push(children[i]);
}
}
}
//把收集到的組件實例返回
return tooltips;
}
//調(diào)用方式，傳入當前組件實例this對象的所有子組件實例
//如:findToolTip(this.$children)我們找到所有tooltip組件實例了，接下來，我們要遍歷它，然后判斷是否符合截斷條件，不符合我們就需要將組件給銷毀，事實上，我們直接設置tooltip組件實例的disabled屬性為true就可以了。接下來，就是這個工具函數(shù)的實現(xiàn)了。如下:
// 參數(shù)1:當前組件實例this對象
// 參數(shù)2:用于獲取被tooltip包裹的子元素的類名
export function isShowToolTip(vm,className="el-input"){
//這里寫代碼
}如何修改tooltip組件?
接下來，我們就要實現(xiàn)這個工具函數(shù)。首先，我們需要確定的是，因為disabled是props數(shù)據(jù)，props是單向數(shù)據(jù)流，vue.js是不建議我們直接修改的，那么我們應該如何做到設置disabled呢？我想了很久，想的辦法就是重新渲染整個組件，利用Vue.compie API也就是編譯API直接重新編譯整個tooltip組件，然后替換原本渲染的tooltip組件。如下:
const res = Vue.compile(`<el-tooltip disabled><el-input value="${ child && child.innerText }" disabled></el-input></el-tooltip>`);
const reRender = new Vue({
render:res.render,
staticRenderFns:res.staticRenderFns
}).$mount(parent);//parent為獲取的tooltip組件實例根元素所以，接下來在工具函數(shù)里，我們可以這樣實現(xiàn):
// 參數(shù)1:當前組件實例this對象
// 參數(shù)2:用于獲取被tooltip包裹的子元素的類名
export function isShowToolTip(vm,className="el-input"){
//為了確保能夠獲取到DOM元素，需要調(diào)用一次nextTick方法
vm.$nextTick(() => {
const allTooltips = findToolTip(vm.$children);
allTooltips.forEach(item => {
//獲取子元素
const child = item.$el.querySelector("." + className);
//判斷是否被截斷
if(!isTextOverflow(child)){
//獲取渲染元素
const parent = item.$el;
const res = Vue.compile(`<el-tooltip disabled><el-input value="${ child && child.innerText }" disabled></el-input></el-tooltip>`);
const reRender = new Vue({
render:res.render,
staticRenderFns:res.staticRenderFns
}).$mount(parent);
}
})
}};
}如何使用這個工具函數(shù)?
如此一來，就做到了一個方法完成了以上的需求。如何使用這個方法呢，很簡單，我們可以在詳情組件里面監(jiān)聽表單詳情數(shù)據(jù)的變化。如:
watch:{
form(val){
if(typeof val === "object" && val && Object.keys(val).length){
//將this當做參數(shù)傳入即可
isShowToolTip(this);
}
}
}關于這個需求更好的實現(xiàn)，如有更好的方法，望不吝賜教。
以上就是頁面tooltip組件的限制工具函數(shù)使用示例詳解的詳細內(nèi)容，更多關于頁面tooltip組件限制的資料請關注腳本之家其它相關文章！
相關文章
vue+echarts實現(xiàn)數(shù)據(jù)實時更新
這篇文章主要為大家詳細介紹了vue+echarts實現(xiàn)數(shù)據(jù)實時更新，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue3+ts+vite中“@“路徑失效的解決辦法,在使用vite腳手架生成項目時,解決引入路徑失敗的錯誤,可以按照本文介紹的步驟操作,需要的朋友可以參考下2024-11-11
本文主要介紹了VUE引入使用G2圖表的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue在手機中通過本機IP地址訪問webApp的方法,需要的朋友可以參考下2018-08-08
這篇文章主要給大家介紹了基于vue大數(shù)據(jù)表格卡頓問題的完美解決方案，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-03-03
vue?el-table中使用el-select選中后無效的解決
這篇文章主要介紹了vue?el-table中使用el-select選中后無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本篇文章主要介紹了Vue三層嵌套路由的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
詳解vue3?defineModel如何實現(xiàn)雙向綁定
隨著?Vue?3.3?引入的?defineModel?宏,開發(fā)者可以更加簡潔地實現(xiàn)組件內(nèi)部的雙向數(shù)據(jù)綁定,下面就跟隨小編一起來學習一下如何使用defineModel實現(xiàn)雙向綁定吧2024-12-12
這篇文章主要為大家介紹了LogicFlow內(nèi)置菜單插件實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
Vue中.env、.env.development及.env.production文件說明
這篇文章主要給大家介紹了關于Vue中.env、.env.development及.env.production文件說明的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2022-09-09