31 lines
864 B
Vue
31 lines
864 B
Vue
<script setup lang="ts">
|
||
// loading 会拦截 click，所以它同时就是「防重复提交」开关
|
||
import { ref } from 'vue'
|
||
import { G3Button, G3Message, G3Space } from '@g3soft/ui'
|
||
|
||
const submitting = ref(false)
|
||
|
||
async function handleSubmit() {
|
||
if (submitting.value) return
|
||
submitting.value = true
|
||
try {
|
||
await new Promise((resolve) => setTimeout(resolve, 1200))
|
||
G3Message.success('提交成功')
|
||
} finally {
|
||
submitting.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<G3Space :size="[12, 12]" align="center" wrap>
|
||
<G3Button :loading="submitting" @click="handleSubmit">
|
||
{{ submitting ? '提交中' : '提交' }}
|
||
</G3Button>
|
||
|
||
<!-- 只是展示加载态：任何变体都可以加载 -->
|
||
<G3Button type="outline" loading>加载中</G3Button>
|
||
<G3Button type="ghost" loading>加载中</G3Button>
|
||
</G3Space>
|
||
</template>
|