vue3 ＜typescript＞ 数据类型封装

前端开发会用到很多的弹框，子传父，父传子的一些方法，而vue3中typescript语法需要定义数据类型，把他们封装起来方便使用

第一步：创建interface.ts文件

第二步：将需要用到的参数用IDialog对象定义好

export interface IDialog {
  isAdd?: boolean;   // true 为新增 false 为编辑
  id?: number | string;
  url?: string;   // 请求地址
  visible: boolean;  //是否显示
  title: string;   //标题
  params?: Params;
}

export type Params = {
  [key: string]: any;
};


export interface IItem {
  type: string;
  id: number;
  dispFlag: string;
}

第三步：在<script lang="ts">中使用

  // 父组件-查看

  handleExamine(row) {
    this.dialog = {
      title: `你瞅啥`,
      visible: true,
      isAdd: false,
      id: row.id,
    };
  }

//子页面-弹框

<script lang="ts">
import { IDialog } from "@/types/interface";  //引入

@Component({
  name: "invoiceEdit",
  components: {},
})
export default class invoiceEdit extends Vue {
   @Prop({ type: Object, default: {} }) dialog!: IDialog; //弹框使用

  private form: any = {
    description: undefined,
    limitNum: undefined,
    maxStock: undefined,
    price: undefined,
    priceNum: undefined,
    priceName: undefined,
    ticketLevel: undefined,
    unsoldNum: undefined,
    status: undefined,
  };
</script>