在 Vue.js 中调整元素大小时如何触发事件？

Question

目前，我触发一个事件以在安装组件时采用与当前元素相同的高度，但这并不总是有效，因为它被发送一次并且如果元素被调整大小它将不会再次发送。我还需要设置一个超时，因为有时组件中的图表会在 ajax 调用后更改高度。

如何在当前元素的高度发生更改时发送此事件？

这就是我目前正在做的事情：

     mounted: function() {
        setTimeout(function() {
            this.$emit('resize', this.$el.offsetHeight);
        },1000);
    }

原文由 KingKongFrog 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有更多基于 ResizeObserver 的 Vue 风格 解决方案，但并非所有浏览器都支持 - 尚未

文档： https : //caniuse.com/#feat=resizeobserver

范例

data () {
  return {
    ro: null,
  }
},

methods: {
  onResize () {
    this.$emit('resize', this.$refs.myElement.offsetHeight)
  },
},

mounted () {
  this.ro = new ResizeObserver(this.onResize)
  this.ro.observe(this.$refs.myElement)
},

beforeDestroy () {
  this.ro.unobserve(this.$refs.myElement)
}

原文由 NiKO 发布，翻译遵循 CC BY-SA 4.0 许可协议