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

<div>
  <slot></slot>
</div>
1
2
3

确定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;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28