This commit is contained in:
Chuck1sn
2025-05-21 22:11:23 +08:00
parent e8365bbe4d
commit 224a7a6a30
4 changed files with 28 additions and 16 deletions

View File

@@ -1,28 +1,26 @@
<template>
<button
:disabled="disabled"
@click="handleClick"
type="button"
:class="[
<button :disabled="disabled" @click="handleClick" type="button" :class="[
'text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 dark:bg-blue-600 inline-flex items-center',
disabled ? `${disabledStyle} cursor-not-allowed` : 'bg-blue-700 hover:bg-blue-800 '
]"
>
<LoadingIcon v-if="isLoading" />
disabled ? `${disabledStyle}` : 'bg-blue-700 hover:bg-blue-800 '
]">
<LoadingIcon v-if="isLoading && !abortable" />
<StopIcon v-if="isLoading && abortable" />
{{isLoading ? loadingContent : submitContent}}
</button>
</template>
<script setup lang="ts">
import LoadingIcon from "./icons/LoadingIcon.vue";
import StopIcon from "./icons/StopIcon.vue";
const { loadingContent, submitContent, isLoading, disabledStyle, disabled } =
const { loadingContent, submitContent, isLoading = false, disabledStyle, disabled = false, abortable = false } =
defineProps<{
loadingContent: string;
loadingContent?: string;
submitContent: string;
isLoading: boolean;
disabledStyle: string;
disabledStyle?: string;
disabled: boolean;
abortable: boolean;
handleClick: (event: Event) => void;
}>();
</script>