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

Question

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

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

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

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

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)
}

Answer 2

在 ResizeObserver 成为标准之前，您可以使用 MutationObserver 来跟踪元素的大小。 代码笔链接

 new Vue({ el: "#app", data() { return { width: null, height: null, observer: null }; }, mounted() { //get initial dimensions. Mutation observer will observe mutations only const box = this.$refs.box, boxSize = box.getBoundingClientRect(); this.width = Math.trunc(boxSize.width) + "px"; this.height = Math.trunc(boxSize.height) + "px"; // initialize the observer on mount this.initObserver(); }, //disconnect the observer before destroy beforeDestroy() { if (this.observer) this.observer.disconnect(); }, methods: { initObserver() { const box = this.$refs.box, vm = this, config = { attributes: true }; // create the observer const observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { // check if the mutation is attributes and update the width and height data if it is. if (mutation.type === "attributes") { let { width, height } = box.style; vm.width = width; vm.height = height; } }); }); // observe element's specified mutations observer.observe(box, config); // add the observer to data so we can disconnect it later this.observer = observer; } } });

 .box { text-align: center; font-family: Arial; box-sizing: border-box; width: 150px; height: 150px; border: 2px solid red; padding: 10px; margin: 0 auto; resize: both; overflow: auto; } .size { color: #2a9966; font-weight: 600; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <!-- more info on refs: https://vuejs.org/v2/api/#ref --> <div class=" box" ref="box"> <h4>Resize Me</h4> <p> <span>width: </span><span class="size">{{ width }}</span> </p> <p> <span>height: </span><span class="size">{{ height }}</span> </p> </div> </div>

Answer 3

我在让ResizeObserver在 Vue2 TypeScript 项目中工作时遇到了一些问题。 两种方法使用（AFAICT）相同的结果：

• 使用resize-observer-polyfill （它本质上包装了MutationObserver ）。 这需要从我的组件中import ResizeObserver from 'resize-observer-polyfill' 。

• 根据这个答案安装@types/resize-observer-browser npm 包，并在我的tsconfig.json中添加一个条目：

   { "compilerOptions": { ... "types": [ ... "resize-observer-browser" ] } }

  第二种方法不需要任何额外的导入，是我喜欢的解决方案。

两种方法都提供相同的ResizeObserver API，例如

this.resizeObserver = new ResizeObserver((entries, observer) => {
    log("Resize called", entries, observer)
})
this.resizeObserver.observe(this.$refs.canvas as Element)

（注：仅在 2021 年 2 月的 Chrome 88 中测试）