vue3+ts 弹窗关闭

在 Vue3 中使用 TypeScript 关闭弹窗，可以采用以下步骤：

1. 创建弹窗的组件，例如：

<template>
  <div v-if="visible">
    <h2>{{title}}</h2>
    <p>{{content}}</p>
    <button @click="close">关闭</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";

export default defineComponent({
  props: {
    title: String,
    content: String,
    visible: Boolean,
    onClose: Function as PropType<() => void>,
  },
  methods: {
    close() {
      this.onClose?.();
    },
  },
});
</script>

2. 在父组件中引入弹窗组件并使用它，例如：

<template>
  <div>
    <button @click="showModal">打开弹窗</button>
    <my-modal
      title="这是弹窗标题"
      content="这是弹窗内容"
      :visible="visible"
      @onClose="closeModal"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import MyModal from "./MyModal.vue";

export default defineComponent({
  components: {
    MyModal,
  },
  setup() {
    const visible = ref(false);

    function showModal() {
      visible.value = true;
    }

    function closeModal() {
      visible.value = false;
    }

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

在上述代码中，我们使用了 `ref` 创建一个响应式变量 `visible`，用于控制弹窗的显示和隐藏。当点击“打开弹窗”按钮时，调用 `showModal` 函数将 `visible` 设置为 `true`，从而显示弹窗。当弹窗中的“关闭”按钮被点击时，调用 `closeModal` 函数将 `visible` 设置为 `false`，从而关闭弹窗。

注意，在弹窗组件中，我们使用了可选链操作符 `?.` 来调用 `onClose` 函数，这是为了避免在未传递 `onClose` 属性时出现的类型错误。