vue3.x+Ts组件封装

Posted 2021-09-23 朱丽叶

// 1
    import { defineComponent, PropType } from "vue"
    import { IFromItem } from "./types"

    props: {
        fromItem: {
          // 给传递过来的数据进行类型限制  需要在vue中引入PropType 重新断言为自己设置的类型。
          type: Array as PropType<IFromItem[]>,
          // 在vue+ts中props给定默认值为数组或者对象时，使用箭头函数
          default: () => []
        },
        labelWidth: {
          type: String,
          default: "100px"
        },
      },

// 2. 定义数据类型
    export interface IFromItem {
      label: string
      type: "input" | "password" | "select" | "datepicker"
      placeholder?: string
      // 针对select
      options?: any[]
      // 针对特殊的属性
      otherOptions?: any
    }