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: ResizeObserverresize = 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);})
})