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的区别

typeofinstanceof都是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;
    }

你可能感兴趣的:(1024程序员节,vue.js,javascript)