比如项目采用的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>
.....后续出现多个这样的元素
</el-form>如果我每一个都加disabled属性，那么页面模板元素有将近一百个，很显然我这样加是很耗费时间的，很显然对于追求高效的我是不喜欢一个一个加，然后一个一个判断的。
在这之前，我们需要确定一点，那就是我们控制文本的截断是通过CSS代码来实现的。也就是如下这段代码:
.el-input {
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}因此，完成以上的需求的第一步就是需要先判断哪些元素满足被截断的条件。那么如何判断文本是否被截断呢？关于这个实现，我想element ui的表格组件符合这种场景，所以我只需要去参考一下element ui的表格组件的截断判断实现就知道了。
创建range元素
核心思路就是创建一个range元素，通过获取range元素width然后与元素的offsetWidth进行判断就行了。所以，我按照element ui的实现思路完成了这个工具函数。如下所示:
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组件实例的子组件，所以我们可以知道我们去循环组件实例的子组件，即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"){
//这里写代码
}如果你想开发小程序或者了解更多小程序的内容，可以通过专业开发公司，来帮助你实现开发需求：厦门在乎科技-专注厦门小程序开发公司、APP开发、网站开发、H5小游戏开发
