1.4.0 • Published 2 years ago
@urcloud/debounce-async-button v1.4.0
DebounceAsyncButton
Vue3 component for debounce async function.
How it works
Multi-click button will only invoke async function once,unless the promise is not pending.
Install
npm i @urcloud/debounce-async-button -S
Usage
<template>
<p>
<DebounceAsyncButton v-slot="slotProps" @click="() => testAsync('click')">
<button :loading="slotProps.loading">button</button>
</DebounceAsyncButton>
</p>
<p>
<DebounceAsyncButton
v-slot="slotProps"
disabled
@click="() => testAsync('click')"
>
<button :loading="slotProps.loading" :disabled="slotProps.disabled">
button disabled
</button>
</DebounceAsyncButton>
</p>
<p>
<DebounceAsyncAbstractButton>
<button @click="() => testAsync('click')">button</button>
</DebounceAsyncAbstractButton>
</p>
<p>
<DebounceAsyncAbstractButton>
<button disabled @click="() => testAsync('click')">
button disabled
</button>
</DebounceAsyncAbstractButton>
</p>
</template>
<script setup lang="ts">
import {
DebounceAsyncButton,
DebounceAsyncAbstractButton,
} from "@urcloud/debounce-async-button";
const delay = (time: number) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, time);
});
};
const testAsync = async (args: string) => {
await delay(3000);
console.log("test async ", args);
};
</script>
1.2.7
2 years ago
1.2.6
2 years ago
1.2.5
2 years ago
1.3.3
2 years ago
1.2.4
2 years ago
1.3.2
2 years ago
1.2.3
2 years ago
1.4.0
2 years ago
1.2.2
2 years ago
1.3.0
2 years ago
1.2.0
3 years ago
1.2.1
3 years ago
1.1.0
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.0
3 years ago