js 动态监听 dom 元素的高度变化.
相关文章
相关知识
- window.onsize = function(){}
缺点: 只能监听视口的变化不能监听 dom 元素的变化.- MutationObserver
优点: MutationObserver 可以用来监听整个 DOM 中的变化。- ResizeObserver
缺点: 兼容性不好。
<script>
export default {
methods: {
handleResize() {
console.log("handle resize");
}
},
mounted() {
const dom = this.$refs.target.$el; // 假设this.$refs.target返回是VueComponent对象
this.observer = new ResizeObserver(this.handleResize);
this.observer.observe(dom, {
box: "border-box" });
},
beforeDestroy() {
this.observer.disconnect();
}
};
</script>
相关依赖
- v-resize-observer
文档地址 @文档- vue-resize