custom-hooks

自定义组件参考链接：https://vueuse.org/core/useResizeObserver/

使用方式：

// 方式一
// xxx.vue里面
<div id="box" ><div class="text"></div></div>

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里面
<div id="box" v-resize="handleResize"><div class="text"></div></div>

const handleResize = (e: DOMRectReadOnly) => {
    console.log('e: ', e);
}

#box{
  background-color: red;
  border: 1px solid green;
  resize: both;
  overflow: hidden;
}
.text {
  width: 500px;
  height: 500px;
}