vue3 ant design 封装一个弹框，并在父组件调用

好的，我可以帮您解答这个问题。

首先，我们可以使用 Ant Design Vue 中的 Modal 组件来封装一个弹框。下面是一个简单的示例代码：

<template>
  <a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel">
    <p>{{ message }}</p>
  </a-modal>
</template>

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

export default defineComponent({
  name: 'MyModal',
  components: {
    Modal,
  },
  props: {
    visible: Boolean,
    message: String,
  },
  methods: {
    handleOk() {
      this.$emit('ok');
    },
    handleCancel() {
      this.$emit('cancel');
    },
  },
});
</script>

在这个示例中，我们使用了 Ant Design Vue 中的 Modal 组件，并将它封装成一个名为 MyModal 的组件。我们在组件中定义了两个 props：visible 和 message，分别用来控制弹框的显示和传递弹框的内容。我们还定义了两个方法：handleOk 和 handleCancel，分别在用户点击确认和取消按钮时触发，并通过 $emit 方法向父组件传递事件。

接下来，我们可以在父组件中引入 MyModal 组件，并使用 v-model 来控制弹框的显示。下面是一个示例代码：

<template>
  <div>
    <a-button @click="showModal">打开弹框</a-button>
    <my-modal v-model="modalVisible" :message="modalMessage" @ok="handleOk" @cancel="handleCancel" />
  </div>
</template>

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

export default defineComponent({
  name: 'MyComponent',
  components: {
    MyModal,
  },
  setup() {
    const modalVisible = ref(false);
    const modalMessage = ref('');

    const showModal = () => {
      modalVisible.value = true;
      modalMessage.value = '这是弹框的内容';
    };

    const handleOk = () => {
      modalVisible.value = false;
      console.log('用户点击了确认按钮');
    };

    const handleCancel = () => {
      modalVisible.value = false;
      console.log('用户点击了取消按钮');
    };

    return {
      modalVisible,
      modalMessage,
      showModal,
      handleOk,
      handleCancel,
    };
  },
});
</script>

在这个示例中，我们首先引入了 MyModal 组件，并在模板中使用 v-model 来控制弹框的显示。我们还定义了一个 showModal 方法，用来在用户点击按钮时显示弹框，并传递弹框的内容。在 MyModal 组件中，我们将父组件传递的 visible 和 message props 绑定到 Modal 组件上，并通过 $emit 方法向父组件传递事件。

这样，我们就成功地封装了一个弹框组件，并在父组件中调用了它。希望这个示例能够帮助到您。