ElementUI offsetLeft

简述解决方案

在使用ElementUI进行开发时，如果需要获取组件的offsetLeft属性，可以通过原生js或者借助vue的ref特性来实现。对于ElementUI组件而言，直接操作DOM元素并不是实践，但有时为了特定布局或动画效果，确实需要获取元素的位置信息。介绍几种获取ElementUI组件offsetLeft的方法，并提供代码示例。

一、通过ref获取

这是推荐的方式，它符合Vue的响应式原则。
```html

点我

export default {
mounted() {
this.$nextTick(() => {
console.log(this.$refs.myButton.$el.offsetLeft)
})
}
}

```
上面的代码中，我们在mounted生命周期钩子中使用了this.$nextTick，确保dom已经渲染完成，然后通过this.$refs引用组件实例，再访问其$el属性（即真实的dom元素）从而获取offsetLeft值。

二、直接操作DOM

如果你确定要直接操作DOM，可以这样做：
```html

点我

export default {
mounted() {
this.$nextTick(() => {
console.log(document.getElementById('myButton').offsetLeft)
})
}
}

```
这种方式虽然能解决问题，但并不推荐，因为它绕过了Vue的响应式系统，可能会导致一些潜在问题。

三、监听窗口大小变化

有时候我们还需要监听页面尺寸变化来动态获取offsetLeft。
```html

点我

export default {
data() {
return {
buttonOffsetLeft: 0
}
},
mounted() {
this.updateButtonOffsetLeft()
window.addEventListener('resize', this.updateButtonOffsetLeft)
},
methods: {
updateButtonOffsetLeft() {
this.buttonOffsetLeft = this.$refs.myButton.$el.offsetLeft
console.log(this.buttonOffsetLeft)
}
},
beforeDestroy() {
window.removeEventListener('resize', this.updateButtonOffsetLeft)
}
}