47 lines
1.3 KiB
Vue
47 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { message } from 'ant-design-vue';
|
|
|
|
import HAPopconfirmButton from './HAPopconfirmButton.vue';
|
|
|
|
async function handleConfirmAsync(e: MouseEvent) {
|
|
console.debug('handleConfirmAsync', e);
|
|
await new Promise((resolve) => {
|
|
setTimeout(resolve, 2000);
|
|
});
|
|
message.success('哇！数据已被成功送入黑洞 🕳️');
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ACard>
|
|
<ACard>
|
|
<APopconfirm @confirm="handleConfirmAsync">
|
|
<AButton size="small" type="text">APopconfirm</AButton>
|
|
</APopconfirm>
|
|
|
|
<AButton size="small" type="text">AButton</AButton>
|
|
|
|
<HAPopconfirmButton
|
|
title="你确定吗？ 🤔 "
|
|
description="别担心，我们只是假装很严肃 🎭"
|
|
@confirm="handleConfirmAsync"
|
|
>
|
|
<AButton size="small" danger type="text">HAPopconfirmButton</AButton>
|
|
</HAPopconfirmButton>
|
|
</ACard>
|
|
<ACard class="mt-4">
|
|
<AForm name="basic" :label-col="{ style: { width: '7em' } }">
|
|
<AFormItem required label="Username">
|
|
<AInput />
|
|
</AFormItem>
|
|
<AFormItem label="Password">
|
|
<AInput />
|
|
</AFormItem>
|
|
<AFormItem>
|
|
<AButton html-type="submit" type="primary">Submit</AButton>
|
|
</AFormItem>
|
|
</AForm>
|
|
</ACard>
|
|
</ACard>
|
|
</template>
|