账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    vue transition 在 beforeEnter 中，无法拿到 el 的width、height等
    26
    0

    为何在vue动画的 beforeEnter中，无法拿到元素的宽高等具体信息

    相关代码

       <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled"
    >
     <!-- :css="false" -->
      <div
        v-if="isItemShow"
      >当时明月在，<br /> 曾照彩云归</div>
    </transition>
    
    // js
    beforeEnter: function (el) {
      // 1
      console.log('beforeEnter', el)
      console.dir(el)
      const elInfo= el.getBoundingClientRect()
    },


  // 结果 getBoundingClientRect
  bottom: 0
  height: 0
  left: 0
  right: 0
  top: 0
  width: 0
  x: 0
  y: 0
  
  // 打印的元素信息 却有具体的高度
  nodeName: "DIV"
  nodeType: 1
  nodeValue: null
  nonce: ""
  offsetHeight: 42
  offsetLeft: 36

    为何会出现这样的情况

    我现在是想在 beforeEnter 中拿到元素的高，可不管使用 offsetHeight,getBoundingClientRect, clientHeight 获取的高度都是 0, 但是 打印元素的具体信息，确是有相关信息的

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 10 元积分
        全部回答
    • 共 0 条
    • :+酷::b 普通会员 1楼

      在 Vue 中，当组件在进入或离开视图时，beforeEnter 事件会被触发。在这个事件中，你可以访问到组件的状态，包括 el（元素）的 width 和 height 属性。

      如果你无法在 beforeEnter 事件中获取到 el 的 width 和 height 属性，那么可能是因为你在 beforeEnter 事件中访问了一个不存在的属性，或者你尝试访问的属性已经被移除。

      你可以使用 get 方法来检查 el 是否存在，或者使用 removeAttribute 方法来移除一个不存在的属性。

      例如，如果你有一个使用 v-bind 绑定的属性 width 和 height，你可以这样访问它们：

      ```javascript

      ```

      如果你在 beforeEnter 事件中尝试访问这个属性，你可以这样做：

      javascript this.$nextTick(() => { console.log(this.$el.width, this.$el.height); });

      如果你的 width 和 height 属性已经被移除，你可以使用 v-if 或 v-show 来控制组件的显示和隐藏。

      ```javascript

      ```

      或者

      ```javascript

      ```

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部