vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
1.监听dom元素的宽高变化
你可以使用Vue的指令v-on和v-bind来动态监听div的宽度。
首先，在Vue实例中声明一个data属性，用来存储div的宽度值。例如：
data() {return {divWidth: null, // 存储div的宽度}}
然后，在div元素上使用v-bind将div的宽度绑定到data属性divWidth上，并使用v-on指令监听window的resize事件，当窗口大小发生变化时更新div的宽度值。如下所示：
<template><div><div ref="myDiv" :style="{ width: divWidth + 'px' }"></div></div></template><script>export default {data() {return {divWidth: null,}},mounted() {// 在mounted钩子函数中获取div的初始宽度this.divWidth = this.$refs.myDiv.offsetWidth;// 监听窗口的resize事件，更新div的宽度window.addEventListener('resize', this.updateDivWidth);},methods: {updateDivWidth() {this.divWidth = this.$refs.myDiv.offsetWidth;}},beforeDestroy() {// 在组件销毁前，移除resize事件监听window.removeEventListener('resize', this.updateDivWidth);},}</script>
2.自定义指令监听dom元素的宽高变化
directives: {// 使用局部注册指令的方式resize: {// 指令的名称bind(el, binding) {// el为绑定的元素，binding为绑定给指令的对象let width = '', height = '';function isReize() {const style = document.defaultView.getComputedStyle(el);if (width !== style.width || height !== style.height) {binding.value(); // 关键}width = style.width;height = style.height;}el.__vueSetInterval__ = setInterval(isReize, 300);},unbind(el) {clearInterval(el.__vueSetInterval__);}}}
在html中使用：
<div v-resize="resize"></div> // 绑定的resize是一个函数//在methods中resize() {// 当宽高变化时就会执行//执行某些操作}
当然可以结合一下1和2 这里就不做演示了。
