通过内容文字长度和个数计算显示占比宽度
<div>
<slot></slot>
</div>
确定slot传进来的div 有没有出现省略号
因为应用范围较广 slot 里面被传过来什么都有可能
const el = this.$slots.default[0].elm;
不能保证 el 一定是个 Element对象。
需要确保传递给getComputedStyle()的是一个Element对象。所有在JavaScript中,可以使用instanceof
运算符来检查el是否是一个DOM元素。
如果el是一个DOM元素,那么el instanceof Element将返回 true
可以使用这个检查来决定是否执行getComputedStyle()
为什么用 instanceof
而不是 typeof
因为Element是一个DOM接口,它是所有DOM元素的原型。在JavaScript中,DOM元素被视为对象,因此typeof运算符会返回"object"。
instanceof运算符则用于检查构造函数的prototype属性是否出现在对象的原型链中的任何位置。这使得instanceof能够检查一个对象是否是特定类型的实例,包括自定义的对象类型和DOM接口类型,如Element。
typeof和instanceof的区别
typeof
和instanceof
都是JavaScript中用于检查变量类型的运算符,但它们的用途和行为有一些重要的区别
:
-
typeof运算符:返回一个字符串,表示未经计算的操作数的类型。它可以识别出JavaScript的基本数据类型,如"number", “string”, “boolean”, “undefined”, “symbol”, “bigint”,以及"function"和"object"。但是,对于所有的对象类型(包括数组和null),除了函数之外,它都会返回"object"
-
instanceof运算符:用于检查构造函数的prototype属性是否出现在对象的原型链中的任何位置。它主要用于自定义对象类型,或者检查对象是否是特定类型的实例。
总的来说,typeof更适合检查基本数据类型,而instanceof更适合检查对象是否属于特定的类或构造函数创建的。
判断盒子内是否有省略号的代码示例
isSlotsHasOverflowed() {
// 针对外部传到容器里的标签是否溢出省略号的判断
let overflowState = false;
let fontSize = 0;
let textWidth = 0;
const el = this.$slots.default[0].elm;
// 确保el是一个DOM元素 否则getComputedStyle会报错
if (el instanceof Element) {
// 获取字体字号
fontSize = parseInt(window.getComputedStyle(el).fontSize);
}
const chWidth = fontSize;
const enWidth = Math.ceil(fontSize / 2);
for (let i = 0; i < el.textContent.trim().length; i++) {
if (el.textContent[i]) {
textWidth += chWidth;
} else if (el.textContent[i] === ' ') {
textWidth += fontSize;
} else {
textWidth += enWidth;
}
}
if (el.clientWidth < el.scrollWidth || textWidth > el.clientWidth) {
overflowState = true;
}
// overflowState true 说明有省略号
return overflowState;
}