使用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, PropType } from 'vue';
import { Modal, Button } from 'ant-design-vue';

export default defineComponent({
  name: 'MyModal',
  components: { Modal, Button },
  props: {
    visibleProp: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
  },
  setup(props) {
    const visible = ref(props.visibleProp);
    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,
    };
  },
  watch: {
    visibleProp(newValue) {
      this.visible = newValue;
    },
  },
});
</script>

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

在`setup`函数的返回值中，我们将定义的变量和方法暴露出去，以便在模板中使用。此外，我们还使用了`watch`来监听父组件传递过来的`visibleProp`属性的变化，并将其同步到本组件的`visible`变量中，以确保父组件控制的状态可以同步到弹出框中。

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