使用vue3+setup语法糖+ts+antdesign的modal写一个弹出框的组件

好的，以下是一个使用Vue3 + TypeScript + Ant Design Modal组件的示例代码：

<template>
  <a-button type="primary" @click="showModal">打开弹出框</a-button>
  <a-modal v-model:visible="visible" :title="title" @ok="handleOk" @cancel="handleCancel">
    <p>{{ content }}</p>
  </a-modal>
</template>

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

export default defineComponent({
  name: 'MyModal',
  components: { Modal, Button },
  setup() {
    const visible = ref(false);
    const title = ref('提示');
    const content = ref('这是弹出框内容');

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

    const handleOk = () => {
      visible.value = false;
      // 点击确定按钮后的操作
    };

    const handleCancel = () => {
      visible.value = false;
      // 点击取消按钮后的操作
    };

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

在这个示例代码中，我们首先引入了Ant Design的Modal和Button组件。然后，使用`defineComponent`方法定义了一个名为`MyModal`的组件。在`setup`函数中，我们定义了一些响应式的变量，包括`visible`（控制弹出框的显示与隐藏）、`title`（弹出框的标题）、`content`（弹出框的内容）。接着，我们定义了三个方法，分别是`showModal`、`handleOk`和`handleCancel`。`showModal`方法用于显示弹出框，`handleOk`方法和`handleCancel`方法则分别在点击弹出框的确定和取消按钮时触发。

最后，在模板中，我们使用Ant Design的Button组件来触发`showModal`方法，使用Ant Design的Modal组件来展示弹出框。在Modal组件中，我们使用Vue3的语法糖`v-model:visible`来绑定弹出框的显示与隐藏状态。同时，我们通过`:title`传递了弹出框的标题，通过`@ok`和`@cancel`监听了弹出框的确定和取消事件。在弹出框的内容中，我们使用了响应式变量`content`来展示弹出框的内容。