【Vue】mounted钩子函数获取节点高/宽度出错

• 场景1：涉及异步请求

  • 问题：如图片是异步的GET请求，js运行的肯定比图片GET要快，所以当执行mounted钩子函数的时候，图片还没有全部加载完，这时候就会得到一个错误的offset值

  • 解决方案：(监听图片加载完成的事件)

    • 给图片加上ref属性，并在那个组件里的mounted钩子函数中写，

      this.$refs.img.onload = ()=>{
          Bus.$emit('loadImgSuccess')
      }

    • 这里的Bus是用的EventBus，两个组件中事件响应的办法。

    • 需要得到offsetTop的组件中这样写，

      Bus.$on('loadImgSuccess', () => {
          var offsetTop = this.$refs.dom.offsetTop 
      })

      这时候就可以确认每次不管是页面新打开还是当前页刷新都可以得到正确的offset值。

• 场景2：使用v-if

  • 问题：可以检测html中是否用了v-if , 因为默认值为false时的话，部分dom还未渲染当然获取不到
  • 解决方案：将v-if改为v-show,则可以获取的到dom，因为v-show会渲染dom，只是控制display的显隐

• 场景3：默认

  • 解决方法：setTimeout异步获取

    mounted() {
        setTimeout(() => {
            // 是否显示左右进度条
            this.updateNavScroll();
        }, 500);