wot-design-uni/components/wd-tabs/types.ts

一个基于Vue3+TS开发的uni-app组件库，提供70+高质量组件，支持暗黑模式、国际化和自定义主题。

import { type ComponentPublicInstance, type ExtractPropTypes, type InjectionKey } from 'vue'
import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp, numericProp } from '../common/props'

export type TabsProvide = {
  state: {
    activeIndex: number
    lineStyle: string // 激活项边框线样式
    inited: boolean // 是否初始化
    animating: boolean // 是否动画中
    mapShow: boolean // map的开关
    scrollLeft: number // scroll-view偏移量
  }
  props: Partial<TabsProps>
}

export type TabsSlidable = 'auto' | 'always'

export const TABS_KEY: InjectionKey<TabsProvide> = Symbol('wd-tabs')

export const tabsProps = {
  ...baseProps,
  /**
   * 绑定值
   */
  modelValue: makeNumericProp(0),
  /**
   * 标签数超过阈值可滑动
   */
  slidableNum: makeNumberProp(6),
  /**
   * 标签数超过阈值显示导航地图
   */
  mapNum: makeNumberProp(10),
  /**
   * 导航地图的标题
   */
  mapTitle: String,
  /**
   * 粘性布局
   */
  sticky: makeBooleanProp(false),
  /**
   * 粘性布局吸顶位置
   */
  offsetTop: makeNumberProp(0),
  /**
   * 开启手势滑动
   */
  swipeable: makeBooleanProp(false),
  /**
   * 自动调整底部条宽度，设置了 lineWidth 后无效
   */
  autoLineWidth: makeBooleanProp(false),
  /**
   * 底部条宽度，单位像素
   */
  lineWidth: numericProp,
  /**
   * 底部条高度，单位像素
   */
  lineHeight: numericProp,
  /**
   * 颜色
   */
  color: makeStringProp(''),
  /**
   * 非活动状态颜色
   */
  inactiveColor: makeStringProp(''),
  /**
   * 是否开启切换标签内容时的过渡动画
   */
  animated: makeBooleanProp(false),
  /**
   * 切换动画过渡时间，单位毫秒
   */
  duration: makeNumberProp(300),
  /**
   * 是否开启滚动导航
   * 可选值：'auto' | 'always'
   * @default auto
   */
  slidable: makeStringProp<TabsSlidable>('auto'),
  /**
   * 标签可滑动时是否显示滚动条
   */
  showScrollbar: makeBooleanProp(false)
}

export type TabsExpose = {
  /**
   * 设置激活项
   * @param value 激活值
   * @param init 是否已初始化
   * @param setScroll 是否设置scroll-view滚动
   */
  setActive: (value: number | string, init: boolean, setScroll: boolean) => void
  /**
   * 使选中项滚动到可视区域
   */
  scrollIntoView: () => void
  /**
   * 更新激活项边框线样式
   * @param animation 是否开启动画，默认开启
   */
  updateLineStyle: (animation?: boolean) => void
}

export type TabsProps = ExtractPropTypes<typeof tabsProps>

export type TabsInstance = ComponentPublicInstance<TabsProps, TabsExpose>