vue操作子组件dom样式问题

Mrlonely
  • 83

子组件:
在computed里面设置的style

 <div class="main fixed bg_fff t0 b0 flex column oh" id="video_box" :style="style"  v-if="showTag"></div>
computed: {
      style() {
        const width = this.width;
        return {
          top: '40px',
          left: `${this.W / 2}px`,
          marginLeft: `${0 - width / 2}px`,
          width: `${width}px`
        };
      }
    }

这个子组件是能够拖动的fixed,现在的需求:在他拖动这个子组件以后,父组件或者子组件获取到这个子组件的top值(距离页面顶部的距离),然后重新给他赋值。
父组件:
引用子组件

<consultation-video-dialog ref="videoDialog" :id="consultId" :room-id="room.roomNo" class="video_box"></consultation-video-dialog>
    </div>
console.log(this.$refs.videoDialog.style.cssText); // 父组件打印 返回undefined

尝试改变this.$refs.videoDialog.style.top,但是拖动以后子组件里的style的top一直是初始化的40px,获取到没有什么意义
怎么才能给子组件样式动态赋值呢

回复
阅读 1.9k
2 个回答

你子组件top写死的就是40px呀,子组件的top根据offsetTop获取top值才可以吧

不知道是否有可能是因为没有正确获取到子组件的 DOM 对象引起的,前几天也刚好遇到一个问题是因为 ref 作为保留属性,没法传给子组件,并且因为获取子组件的 DOM 时多包装了一层导致无法获取到真正的子组件标签,试试用 this.$refs.videoDialog.$children 获取子元素的 DOM,打印看看有没有获取到样式。

你知道吗?

宣传栏