vue动态约束插槽类型

137 阅读1分钟

这里的IDetail可以是声明的,也可以是vue的generic组件约束的; 声明的时候需要用Record包一下

defineSlots<{
  'table-empty': () => any
} &
  /**
   * search 搜索区域插槽
   * search-key-slotName
   */
  Record<`search-${(keyof IDetail) extends string ? keyof IDetail : string}-${string}`, () => any>
  /**
    * table 列表区域插槽
    * table-key(-slotName)
    */
  & Record<`table-${(keyof IDetail) extends string ? keyof IDetail : string}${string}`, (...arg: any[]) => IScope>
>()
<script setup lang="ts" generic="IDetail">