1. 怎么判断容器内元素内容是否溢出了 2. typeof和instanceof的区别

元素内容是否溢出了 2. typeof和instanceof的区别"/>

1. 怎么判断容器内元素内容是否溢出了 2. typeof和instanceof的区别

通过内容文字长度和个数计算显示占比宽度

• typeof和instanceof的区别
• 判断盒子内是否有省略号的代码示例

<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中用于检查变量类型的运算符，但它们的用途和行为有一些重要的区别：

1. typeof运算符：返回一个字符串，表示未经计算的操作数的类型。它可以识别出JavaScript的基本数据类型，如"number", “string”, “boolean”, “undefined”, “symbol”, “bigint”，以及"function"和"object"。但是，对于所有的对象类型（包括数组和null），除了函数之外，它都会返回"object"

2. 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;}