vue项目中想实时监听元素距离左边的距离请问应该是用什么方法

Question

想要实时监听元素距离left的距离

<div ref="bb"  v-for="(item,index) in sendVal" :key='index' >
            {{item}}
        </div>

有很多元素，通过动css3动画从右向左运动，怎样可以监听到每一个元素距离左边的距离，每一个元素到达父元素都要执行一些操作

Answer 1

使用 computed 或者在 data 中声明就可以。
比如说

computed: { 
    offsetLeft(){
        return this.$resf['leftElement'].offsetleft
        // return document.querySelector('#demo').offsetLeft
    }
}

就可以实时获取 leftElement 的距离容器左侧的距离了。

Answer 2

能说一下具体的需求么？一般来说，很多小元素的监听适合用设计模式中的“享元模式”，既想办法侦听一个大元素的变化。比如，这些小元素都在一个大容器里，你就可以侦听大容器的尺寸变化和横向滚动变化。

Answer 3

用MutationObserver监听子元素状态。

要兼容性就定时器轮询dom状态。

通过ref获取的元素如果ref是绑在v-for上，取到的就是数组，试下就知道。

---

建议对dom的操作封装成指令比较好