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

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

import type { ExtractPropTypes, PropType } from 'vue'
import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
import type { SwiperNavProps } from '../wd-swiper-nav/types'
import type { ImageMode } from '../wd-img/types'

/**
 * 轮播滑动方向
 */
export type DirectionType = 'horizontal' | 'vertical'

/**
 * 切换动画
 */
export type EasingType = 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic'

/**
 * 指示器位置
 */
export type IndicatorPositionType = 'left' | 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'right'

/**
 * first：第一个滑块。
 * current：实时的当前滑块。
 * highest：高度最大的滑块。
 * none：不根据滑块调整高度，容器高度取决于自身样式。
 */
export type AdjustHeightType = 'first' | 'current' | 'highest' | 'none'

// 资源类型
export type SwiperItemType = 'image' | 'video'

export interface SwiperList {
  [key: string]: any
  // 图片、视频等资源地址
  value?: string
  // 视频资源的封面
  poster?: string
  // 资源文件类型，可选值：'image' | 'video'
  type?: SwiperItemType
}

export const swiperProps = {
  ...baseProps,

  /**
   * 是否自动播放轮播图
   * 类型：boolean
   * 默认值：true
   */
  autoplay: makeBooleanProp(true),

  /**
   * 当前轮播在哪一项（下标）
   * 类型：number
   * 默认值：0
   */
  current: makeNumberProp(0),

  /**
   * 轮播滑动方向，可选值：'horizontal'（水平）或'vertical'（垂直）
   * 类型：string
   * 默认值：'horizontal'
   */
  direction: makeStringProp<DirectionType>('horizontal'),

  /**
   * 同时显示的滑块数量
   * 类型：number
   * 默认值：1
   */
  displayMultipleItems: makeNumberProp(1),

  /**
   * 滑动动画时长，单位为毫秒
   * 类型：number
   * 默认值：300
   */
  duration: makeNumberProp(300),

  /**
   * 指定 swiper 切换缓动动画类型
   * 类型：string
   * 默认值：'default'
   */
  easingFunction: makeStringProp<EasingType>('default'),

  /**
   * 轮播的高度
   * 类型：number 或 string（数字或可转换为数字的字符串）
   * 默认值：'192'
   */
  height: makeNumericProp('192'),

  /**
   * 轮播间隔时间，单位为毫秒
   * 类型：number
   * 默认值：5000
   */
  interval: makeNumberProp(5000),

  /**
   * 图片列表，可以是一个图片对象数组或字符串数组
   * 类型：array
   * 默认值：空数组
   */
  list: {
    type: Array as PropType<SwiperList[] | string[]>,
    default: () => []
  },

  /**
   * 是否循环播放轮播图
   * 类型：boolean
   * 默认值：true
   */
  loop: makeBooleanProp(true),

  /**
   * 视频是否循环播放
   * 类型：boolean
   * 默认值：true
   */
  videoLoop: makeBooleanProp(true),

  /**
   * 视频是否静音播放
   * 类型：boolean
   * 默认值：true
   */
  muted: makeBooleanProp(true),

  /**
   * 后边距
   * 类型：number 或 string（数字或可转换为数字的字符串）
   * 默认值：'0'
   */
  nextMargin: makeNumericProp('0'),

  /**
   * 页码信息展示位置，可选值：'left' | 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'right'
   * 类型：string
   * 默认值：'bottom'
   */
  indicatorPosition: makeStringProp<IndicatorPositionType>('bottom'),
  /**
   * 前边距
   * 类型：number 或 string（数字或可转换为数字的字符串）
   * 默认值：'0'
   */
  previousMargin: makeNumericProp('0'),
  /**
   * 是否应用边距到第一个、最后一个元素
   * 类型：boolean
   * 默认值：false
   */
  snapToEdge: makeBooleanProp(false),
  /**
   * 指示器全部配置，可以是布尔值或指示器配置对象
   * 类型：boolean 或 object
   * 默认值：true
   */
  indicator: {
    type: [Boolean, Object] as PropType<boolean | Partial<SwiperNavProps>>,
    default: true
  },

  /**
   * 图片裁剪、缩放的模式
   * 类型：string
   * 默认值：'aspectFill'
   */
  imageMode: makeStringProp<ImageMode>('aspectFill'),
  /**
   * 选项对象中，value 对应的 key
   */
  valueKey: makeStringProp('value'),
  /**
   * 选项对象中，标题 text 对应的 key
   */
  textKey: makeStringProp('text'),
  /**
   * 视频是否自动播放
   * 类型：boolean
   * 默认值：true
   */
  autoplayVideo: makeBooleanProp(true),
  /**
   * 切换轮播项时是否停止上一个视频的播放
   * 类型：boolean
   * 默认值：true
   */
  stopPreviousVideo: makeBooleanProp(true),
  /**
   * 视频播放时是否停止自动轮播
   * 类型：boolean
   * 默认值：false
   */
  stopAutoplayWhenVideoPlay: makeBooleanProp(false),
  /**
   * 自动以指定滑块的高度为整个容器的高度。当 vertical 为 true 时，默认不调整
   * 仅支付宝小程序支持
   * 类型：'first' | 'current' | 'highest' | 'none'
   * 默认值：false
   */
  adjustHeight: makeStringProp<AdjustHeightType>('highest'),
  /**
   * vertical 为 true 时强制使 adjust-height 生效。
   * 仅支付宝小程序支持
   * 类型：boolean
   * 默认值：false
   */
  adjustVerticalHeight: makeBooleanProp(false),
  /**
   * 自定义指示器类名
   * 类型：string
   */
  customIndicatorClass: makeStringProp(''),

  /**
   * 自定义图片类名
   * 类型：string
   */
  customImageClass: makeStringProp(''),

  /**
   * 自定义上一个图片类名
   * 类型：string
   */
  customPrevImageClass: makeStringProp(''),

  /**
   * 自定义下一个图片类名
   * 类型：string
   */
  customNextImageClass: makeStringProp(''),

  /**
   * 自定义swiper子项类名
   * 类型：string
   */
  customItemClass: makeStringProp(''),
  /**
   * 自定义上一个子项类名
   * 类型：string
   */
  customPrevClass: makeStringProp(''),
  /**
   * 自定义下一个子项类名
   * 类型：string
   */
  customNextClass: makeStringProp(''),
  /**
   * 自定义文字标题类名
   * 类型：string
   */
  customTextClass: makeStringProp(''),
  /**
   * 自定义文字标题样式
   * 类型：string
   */
  customTextStyle: makeStringProp('')
}

export type SwiperProps = ExtractPropTypes<typeof swiperProps>