bhuh12 / vue-router-tab

Vue.js tab components, based on Vue Router.

Home Page:https://bhuh12.github.io/vue-router-tab/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TabScroll.vue报空错误

jktantan opened this issue · comments

Bug 描述

在跳出有router-tab组件的页面时,如果鼠标正好处理tabscroll,会出现‘TypeError: Cannot read properties of undefined (reading 'clientWidth')’的错误。

问题重现

重现行为的步骤:

  1. 跳出e router-tab组件的页面
  2. 鼠标在这期间正好处于tab-scroll的范围。
  3. 此时会激发mouseenter的行为,进行update处理,在update中this.$refs.container会获取到null,导致出错。

关键代码

   // 更新滚动数据
    update() {
      const { clientWidth, scrollWidth, scrollLeft } = this.$refs.container

      // 判断是否移动端
      // userAgent 中包含 mobile 字段,或者浏览器滚动条宽度为 0
      this.isMobile =
        /mobile/i.test(navigator.userAgent) || !getScrollbarWidth()

      Object.assign(this.scrollData, { clientWidth, scrollWidth, scrollLeft })
    },

开发环境(请填写以下信息)

  • Nuxtjs

v1.2.8 已发布,请更新试试

已解决问题