Vue3中自定义指令监听元素尺寸变化
vue对元素的宽高变化看了一下,基本都是用的定时器解决的,刚好看到JS的一个属性方法,可以专门监测元素的尺寸变化CDN地址:https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver实现代码如下directives: {resize: {mounted(el, binding) {// 这里使用debounce防抖处理,防抖的延时
·
vue对元素的宽高变化看了一下,基本都是用的定时器解决的,刚好看到
JS
的一个属性方法,可以专门监测元素的尺寸变化
MDN地址:https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver
如果想监听元素的其他属性变化,可以使用
MutationObserver
MDN地址:https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
需要注意的是,虽然MutationObserver
也可以监听元素宽高变化,但是对animation
等通过css改变的宽高变化监听不到
使用之前可以看一下兼容性
ResizeObserver浏览器兼容性
实现代码如下
directives: {
resize: {
mounted(el, binding) {
// 这里使用debounce防抖处理,防抖的延时时间可以通过自定义指令的参数传过来,如`v-resize:300`表示300ms延时
// 也可以将此处延时去掉,放在绑定的函数中自定义
function debounce(fn, delay = 16) {
let t = null
return function () {
if (t) {
clearTimeout(t)
}
const context = this
const args = arguments
t = setTimeout(function () {
fn.apply(context, args)
}, delay)
}
}
el._resizer = new window.ResizeObserver(debounce(binding.value, Number(binding.arg) || 16))
el._resizer.observe(el)
},
unmounted(el) {
el._resizer.disconnect()
},
},
},
使用如下
<div class="box" v-resize:200="onResize"></div>
const onResize = () => {
console.log('is resize')
}
更多推荐
已为社区贡献19条内容
所有评论(0)