vue3自定义hooks

获取dom的id属性

index.ts

import { onMounted } from "vue"
type option = {
    el: string
}

export default function(option:option):Promise<{name: string}> {
    return new Promise((resolve)=>{
        onMounted(()=>{
            const dom:HTMLElement = document.querySelector(option.el) as HTMLDivElement;
            resolve({name: dom.id})
        })
    })
}

使用

<template>
    <div class="ad"></div>
</template>
<script setup lang="ts">
//hooks 的工具库 vueuse
import getId from './hooks/index';
getId({
    el: '.ad'
}).then(res => {
    console.log(res);
})
</script>

获取dom的大小

function useResize(el: HTMLElement, callback: (cr: DOMRectReadOnly, resize: ResizeObserver) => void) {
    let resize: ResizeObserver
    resize = new ResizeObserver((entries) => {
        for (let entry of entries) {
            const cr = entry.contentRect;
            callback(cr, resize)
        }
    });
    resize.observe(el)
}

export default useResize

使用

onMounted(() => {
    useResize(document.querySelector('#ad') as HTMLElement, (e) => {
        console.log(e);
    })
})