useReadyResolve | Code Tools

动态生成一个 input 的文件选择框进行模拟点击

@niu-tools/vue3

useReadyResolve

运行结果：

加载中

<script setup lang="ts">
import { ref } from 'vue'
import { useReadyResolve } from '@niu-tools/vue3'

const { callFn, onReady, isLoading } = useReadyResolve()

setTimeout(() => {
    callFn(1)
}, 1000)

const result = ref()
onReady((num) => {
    result.value = num
})
</script>

<template>
    <div>运行结果：</div>
    <div>
        {{ isLoading ? '加载中' : result }}
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useReadyResolve } from '@niu-tools/vue3'

const { callFn, onReady, isLoading } = useReadyResolve()

setTimeout(() => {
    callFn(1)
}, 1000)

const result = ref()
onReady((num) => {
    result.value = num
})
</script>

<template>
    <div>运行结果：</div>
    <div>
        {{ isLoading ? '加载中' : result }}
    </div>
</template>

源码

查看源码

useReadyResolve/index.ts源码

import { ref } from 'vue'

export function useReadyResolve() {
    let readyResolve: (value: any) => void
    const isLoading = ref(false)
    const promise = new Promise(resolve => {
        isLoading.value = true
        readyResolve = resolve
    })

    function callFn(value?: any) {
        readyResolve(value)
    }

    function onReady(cb: (value: unknown) => unknown) {
        promise.then((res) => {
            isLoading.value = false
            cb(res)
        })
    }

    return {
        isLoading,
        callFn,
        onReady,
    }
}

import { ref } from 'vue'

export function useReadyResolve() {
    let readyResolve: (value: any) => void
    const isLoading = ref(false)
    const promise = new Promise(resolve => {
        isLoading.value = true
        readyResolve = resolve
    })

    function callFn(value?: any) {
        readyResolve(value)
    }

    function onReady(cb: (value: unknown) => unknown) {
        promise.then((res) => {
            isLoading.value = false
            cb(res)
        })
    }

    return {
        isLoading,
        callFn,
        onReady,
    }
}

源码 ​

源码