Dialog 对话框 #

<template>
  <a-button type="primary" @click="handleOpen">打开弹窗</a-button>
  <a-dialog v-model="showDialog" width="600px" title="对话框">
    <a-form :model="formData">
      <a-form-item label="姓名" prop="name">
        <a-input v-model="formData.name" />
      </a-form-item>
      <a-form-item label="年龄" prop="age">
        <a-input v-model="formData.age" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button @click="showDialog = false">关闭</a-button>
      <a-button type="primary" @click="showDialog = false">确定</a-button>
    </template>
  </a-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
const formData = reactive({
  name: '',
  age: ''
});
const showDialog = ref(false);
const handleOpen = () => {
  showDialog.value = true;
};
</script>