自定义组件参考链接:https://vueuse.org/core/useResizeObserver/
npm install @wuyongyu/custom-hooksjs
// 方式一
// xxx.vue里面
import useResize from '@yongyu/custom-hooks';
onMounted(() => {
const boxElement = document.querySelector('#box') as HTMLElement;
useResize(boxElement, (e: DOMRectReadOnly) => {
console.log('e: ', e);
})
})
// 方式二
// main.ts 里面
import useResize from '@yongyu/custom-hooks';
app.use(useResize);
// xxx.vue里面
const handleResize = (e: DOMRectReadOnly) => {
console.log('e: ', e);
}
`
`style
#box{
background-color: red;
border: 1px solid green;
resize: both;
overflow: hidden;
}
.text {
width: 500px;
height: 500px;
}
``