41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
|
import { getCurrentInstance, nextTick, ref } from 'vue';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* useRect - 获取元素的位置信息（响应式，原生实现）
|
|||
|
|
* @param selector 选择器（如 #id 或 .class）
|
|||
|
|
* @param all 是否获取所有匹配元素
|
|||
|
|
* @returns rect 响应式的节点信息，refresh 主动刷新方法
|
|||
|
|
*/
|
|||
|
|
export function useRect(selector: string | null = null, all = false) {
|
|||
|
|
const rect = ref<any>(all ? [] : null);
|
|||
|
|
const instance = getCurrentInstance();
|
|||
|
|
|
|||
|
|
async function getRect(realSelector: string | null = null, delay = 0): Promise<any> {
|
|||
|
|
realSelector = realSelector || selector;
|
|||
|
|
if (!realSelector) return rect.value;
|
|||
|
|
await nextTick();
|
|||
|
|
return new Promise(resolve => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.createSelectorQuery()
|
|||
|
|
.in(instance?.proxy)
|
|||
|
|
[all ? 'selectAll' : 'select'](realSelector as string)
|
|||
|
|
.boundingClientRect((res: any) => {
|
|||
|
|
rect.value = res;
|
|||
|
|
resolve(res);
|
|||
|
|
})
|
|||
|
|
.exec();
|
|||
|
|
}, delay);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function refresh(selector?: string | null, delay?: number): Promise<any> {
|
|||
|
|
return getRect(selector, delay);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
rect,
|
|||
|
|
getRect,
|
|||
|
|
refresh
|
|||
|
|
};
|
|||
|
|
}
|