antd vue3

<template>
  <a-button type="primary" @click="showModal">Open Modal</a-button>
  <a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk">
    <p>Some contents...</p>
  </a-modal>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { Button, Modal } from 'ant-design-vue';

export default defineComponent({
  components: {
    AButton: Button,
    AModal: Modal,
  },
  setup() {
    const visible = ref(false);

    const showModal = () => {
      visible.value = true;
    };

    const handleOk = () => {
      visible.value = false;
    };

    return {
      visible,
      showModal,
      handleOk,
    };
  },
});
</script>

<style scoped>
/* Add some custom styles if needed */
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了 a-button 和 a-modal 组件，分别来自 ant-design-vue。
   • a-button 按钮绑定了一个点击事件 @click="showModal"，用于显示模态框。
   • a-modal 组件通过 v-model:visible 绑定可见性状态，并定义了标题和内容。

2. 脚本部分 (<script>):

   • 使用了 Vue 3 的组合式 API (setup 函数)。
   • 导入了 Button 和 Modal 组件，并在 components 中注册。
   • 定义了一个响应式变量 visible 来控制模态框的显示与隐藏。
   • 定义了两个方法 showModal 和 handleOk，分别用于显示模态框和关闭模态框。

3. 样式部分 (<style scoped>):

   • 可以根据需要添加自定义样式。