vue3 typescript 弹窗

Vue3 中结合 TypeScript 使用弹窗通常指的是利用 Vue 的组件系统和第三方库（如 Vuetify 或 Element Plus 等）提供的弹出层功能，并在 TypeScript 类型系统的支持下编写更为安全、强类型的代码。以下是一个简单的例子：

import { VuetifyComponent } from "vue-vuetify";
import { Component, Prop } from 'vue-property-decorator';

@Component({
  components: {
    // 如果你使用的是 Vuetify
    VDialog: VuetifyComponent.extend({
      template: `
        <v-dialog v-model="dialog" max-width="500px">
          <template v-slot:activator="{ on }">
            <v-btn color="primary" @click="dialog = true" v-on="on">{{ buttonLabel }}</v-btn>
          </template>
          <v-card>
            <v-card-text>{{ message }}</v-card-text>
          </v-card>
          <v-dialog-actions>
            <v-btn text @click="dialog = false">关闭</v-btn>
          </v-dialog-actions>
        </v-dialog>
      `,
      props: {
        dialog: Boolean,
        buttonLabel: String,
        message: String,
      },
    }),
  }
})
export default class MyCustomDialog extends VuetifyComponent {
  private dialog = false;

  @Prop() public buttonLabel!: string;
  @Prop() public message!: string;

  openDialog() {
    this.dialog = true;
  }

  closeDialog() {
    this.dialog = false;
  }
}

在这个例子中，`MyCustomDialog` 组件接受 `buttonLabel` 和 `message` 属性，通过 `VDialog` 组件展示一个带按钮的弹窗。`@Prop` 注解用于声明接收的props并提供类型提示。