uniapp vue3 中监听元素高度变化

在 uni-app 中使用 Vue3 监听元素高度变化可以使用 ResizeObserver。

首先你需要在 main.js 中引入 ResizeObserver polyfill：

import '@vue/devtools'
import Vue from 'vue'
import App from './App'
import './registerServiceWorker'
import './styles/index.scss'
import { ResizeObserver } from '@juggle/resize-observer'

Vue.config.productionTip = false

Vue.use(ResizeObserver)

new Vue({
  render: h => h(App)
}).$mount('#app')

然后在你的 Vue 组件中使用 ResizeObserver 即可：

import { ResizeObserver } from '@juggle/resize-observer'

export default {
  data() {
    return {
      height: 0,
    }
  },
  mounted() {
    this.resizeObserver = new ResizeObserver(entries => {
      const entry = entries[0]
      this.height = entry.contentRect.height
    })
    this.resizeObserver.observe(this.$refs.observer)
  },
  beforeDestroy() {
    this.resizeObserver.disconnect()
  },
}

在模板中你可以这样使用：

<template>
  <div ref="observer">{{ height }}</div>
</template>

注意：ResizeObserver 会对性能造成一定的影响，所以在使用的时候应该谨慎考虑是否真的需要使用。