一个工具函数,实现页面tooltip组件的限制使用

2021年09月15日 阅读数:1
这篇文章主要向大家介绍一个工具函数,实现页面tooltip组件的限制使用,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

需求描述

有这样一个需求:页面已经写了太多的详情表单元素,而且每个表单元素都使用了Tooltip组件来包裹,这样是不符合需求的,由于用户须要限定当表单元素的文本太多时,也就是说出现了省略号才会出现Tooltip组件的包裹。好比项目采用的element UI组件库。在一个页面有太多的这样的表单元素:css

<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>
   .....后续出现多个这样的元素
</el-form>

若是我每个都加disabled属性,那么页面模板元素有将近一百个,很显然我这样加是很耗费时间的,很显然对于追求高效的我是不喜欢一个一个加,而后一个一个判断的。html

在这以前,咱们须要肯定一点,那就是咱们控制文本的截断是经过CSS代码来实现的。也就是以下这段代码:vue

.el-input {
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}

所以,完成以上的需求的第一步就是须要先判断哪些元素知足被截断的条件。那么如何判断文本是否被截断呢?关于这个实现,我想element ui的表格组件符合这种场景,因此我只须要去参考一下element ui的表格组件的截断判断实现就知道了。没错,我在源码中找到了实现方式。git

建立range元素

核心思路就是建立一个range元素,经过获取range元素width而后与元素的offsetWidth进行判断就好了。因此,我按照element ui的实现思路完成了这个工具函数。以下所示:github

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组件的组件实例。代码以下:segmentfault

export function findToolTip(children,tooltips = []){
    //这里写代码
}

全部的tooltip组件实例都是vue组件实例的子组件,因此咱们能够知道咱们去循环组件实例的子组件,即vm.$children属性。而后tooltip组件有什么标志呢?或者说咱们如何判断该子组件实例就是一个tooltip组件呢?我又参考了element ui tooltip组件的实现,发现element ui tooltip组件都会有一个doDestory方法。因此咱们就能够根据这个来作判断。因此递归方法,咱们就能够写好了。以下:数组

//参数1:子组件实例数组
//参数2:收集组件实例的数组
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组件,添加到数组中
            if(typeof children[i].doDestroy === "function"){
                tooltips.push(children[i]);
            }
        }
    }
    //把收集到的组件实例返回
    return tooltips;
}
//调用方式,传入当前组件实例this对象的全部子组件实例
//如:findToolTip(this.$children)

咱们找到全部tooltip组件实例了,接下来,咱们要遍历它,而后判断是否符合截断条件,不符合咱们就须要将组件给销毁,事实上,咱们直接设置tooltip组件实例的disabled属性为true就能够了。接下来,就是这个工具函数的实现了。以下:函数

// 参数1:当前组件实例this对象
// 参数2:用于获取被tooltip包裹的子元素的类名
export function isShowToolTip(vm,className="el-input"){
    //这里写代码
}

如何修改tooltip组件?

接下来,咱们就要实现这个工具函数。首先,咱们须要肯定的是,由于disabled是props数据,props是单向数据流,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组件实例根元素

因此,接下来在工具函数里,咱们能够这样实现:ui

// 参数1:当前组件实例this对象
// 参数2:用于获取被tooltip包裹的子元素的类名
export function isShowToolTip(vm,className="el-input"){
    //为了确保可以获取到DOM元素,须要调用一次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);
            }
        })
    }};
}

如何使用这个工具函数?

如此一来,就作到了一个方法完成了以上的需求。如何使用这个方法呢,很简单,咱们能够在详情组件里面监听表单详情数据的变化。如:

watch:{
    form(val){
        if(typeof val === "object" && val && Object.keys(val).length){
            //将this当作参数传入便可
            isShowToolTip(this);
        }
    }
}

关于这个需求更好的实现,若有更好的方法,望不吝赐教。