如何做镜框 网站,一个专门做字画的网站,网站开发的几个步骤,wordpress自定义页面创建专辑描述
自定义指令 v-resize mounted(el, binding)#xff1a;当元素被挂载到DOM上时#xff0c;这个钩子会被调用。 如果浏览器支持 ResizeObserver#xff0c;则创建一个 ResizeObserver 实例来监听元素的大小变化。当变化发生时#xff0c;它会遍历所有的变化条目#x…
描述
自定义指令 v-resize mounted(el, binding)当元素被挂载到DOM上时这个钩子会被调用。 如果浏览器支持 ResizeObserver则创建一个 ResizeObserver 实例来监听元素的大小变化。当变化发生时它会遍历所有的变化条目并调用绑定的回调函数 binding.value将变化的详情作为参数传递。如果浏览器不支持 ResizeObserver则使用一个回退方案。创建一个 handleResize 函数当窗口大小变化时这个函数会被调用并使用 getBoundingClientRect 方法获取元素的新大小然后将这个信息传递给绑定的回调函数。同时将这个函数绑定到 window 对象的 resize 事件上并立即执行一次以获取初始大小。为了能够在元素卸载时取消监听将 ResizeObserver 实例和 handleResize 函数分别存储在元素的 _resizeObserver 和 _resizeHandler 属性中。 unmounted(el)当元素被卸载时这个钩子会被调用。 如果元素有 _resizeObserver 属性即浏览器支持 ResizeObserver则调用 disconnect 方法停止监听。如果元素有 _resizeHandler 属性即浏览器不支持 ResizeObserver则从 window 对象的 resize 事件中移除 handleResize 函数以防止内存泄漏。
监听窗口变化元素大小发生变化则会调用指令绑定的回调方法
此处需要考虑浏览器兼容性部分老版本浏览器无法兼容ResizeObserver会导致报错崩溃
resizeWin是窗口变化的回调方法
使用 div v-resizeresizeWin129391239/div代码
app.directive(resize, {mounted(el, binding) {if (window.ResizeObserver) {// Use ResizeObserver if availableconst resizeObserver new ResizeObserver(entries {for (let entry of entries) {binding.value(entry);}});resizeObserver.observe(el);el._resizeObserver resizeObserver;} else {// Fallback for browsers that do not support ResizeObserverconst handleResize () {binding.value({contentRect: el.getBoundingClientRect()});};window.addEventListener(resize, handleResize);el._resizeHandler handleResize;handleResize();}},unmounted(el) {if (el._resizeObserver) {el._resizeObserver.disconnect();}if (el._resizeHandler) {window.removeEventListener(resize, el._resizeHandler);}}});
拓展
【10分钟学习Vue自定义指令开发】复制指令v-copy
【10分钟学习Vue自定义指令开发】元素变化指令
【10分钟学习Vue自定义指令开发】鼠标放置提示指令
