1. 怎么判断容器内元素内容是否溢出了 2. 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;
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值