最近做一個項目，涉及到echart圖，要去根據(jù)父元素去自適應寬高，所以需要監(jiān)聽到元素的寬高變化、
因為是監(jiān)聽某一元素的寬高變化，所以這里用的是ResizeObserver.
ResizeObserver是可以監(jiān)聽到DOM元素，寬高的變化，需要注意的一點就是監(jiān)聽出變化結(jié)果是contentBox的寬度和高度。
以下為瀏覽器兼容性
第一步：封裝自定義指令
在directive文件夾下創(chuàng)建一個resizeObserver.js文件
內(nèi)容如下
// 監(jiān)聽元素大小變化的指令
const map = new WeakMap()
const ob = new ResizeObserver((entries) => {
for (const entry of entries) {
// 獲取dom元素的回調(diào)
const handler = map.get(entry.target)
//存在回調(diào)函數(shù)
if (handler) {
// 將監(jiān)聽的值給回調(diào)函數(shù)
handler({
width: entry.borderBoxSize[0].inlineSize,
height: entry.borderBoxSize[0].blockSize
})
}
}
})
export const Resize = {
mounted(el, binding) {
//將dom與回調(diào)的關(guān)系塞入map
map.set(el, binding.value)
//監(jiān)聽el元素的變化
ob.observe(el)
},
unmounted(el) {
//取消監(jiān)聽
ob.unobserve(el)
}
}
export default Resize
第二步：在directive文件夾再創(chuàng)建一個index.js文件，目的是為了集中注冊自定義指令
import { Resize } from "./resizeObserver"
// 自定義指令集合
const directives = {
Resize,
}
export default {
install(app) {
Object.keys(directives).forEach((key) => {
app.directive(key, directives[key])
})
}
}
第三步：在main.js文件進行全局注冊
import directives from "@/util/directive/index"
app.use(directives)
第四步：使用方法文章來源：http://www.zghlxwxcb.cn/news/detail-726449.html
<template>
<div style="height: 100%; width: 100%" v-resize="onResize"></div>
</template>
<script setup>
// 當元素寬高發(fā)生變化時，觸發(fā)下面的方法
const onResize = (dom) => {
console.log(dom) // dom為元素變化后的寬高
}
</script>
以上，希望大家一鍵三連哇~~ 感謝文章來源地址http://www.zghlxwxcb.cn/news/detail-726449.html
到了這里，關(guān)于vue3 封裝自定義指令，監(jiān)聽元素寬高的變化的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
