ant design vue3

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

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const visible = ref(false);

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

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

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

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

解释说明：

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

   • 使用了 a-button 和 a-modal 组件，这两个组件来自 Ant Design Vue。
   • a-button 按钮有一个点击事件 @click="showModal"，当点击按钮时会调用 showModal 方法来显示模态框。
   • a-modal 组件通过 v-model:visible 绑定一个布尔值 visible 来控制模态框的显示和隐藏。

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

   • 使用了 Vue 3 的 Composition API (defineComponent, ref)。
   • 定义了一个响应式变量 visible，用于控制模态框的显示状态。
   • showModal 方法将 visible 设置为 true，从而显示模态框。
   • handleOk 方法将 visible 设置为 false，从而关闭模态框。

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

   • 可以根据需要添加一些样式，这里没有具体的样式定义。