cloud-ui.vusion/src/components/u-carousel.vue/api.yaml

Vusion Cloud UI

- name: u-carousel
  title: 幻灯片
  icon: carousel
  description: 动态播放内部内容
  labels:
    - Display
  attrs:
    - name: loop
      title: 循环播放
      type: boolean
      default: true
      description: 是否循环播放
      advanced: true
    - name: direction
      title: 播放方向
      type: string
      default: right
      description: 幻灯片播放方向
      advanced: true
    - name: animation
      title: 过度动画
      type: string
      description: 幻灯片过渡动画
      advanced: true
    - name: data-source
      title: 数据源
      type: Array<Item> | Function
      description: 展示数据的输入源，可设置为集合类型变量（List<T>）或输出参数为集合类型的逻辑。
      designer-value: "[{}]"
      group: 数据属性
      brifeDoc: ""
      docDescription: ""
      tooltipLink: ""
    - name: data-schema
      title: 数据类型
      type: schema
      description: 数据源返回的数据结构的类型，自动识别类型进行展示说明
      group: 数据属性
      compType: dataTypeSelect
      brifeDoc: ""
      docDescription: IDE 根据配置的数据源动态计算返回内容的数据结构，用于动态配置项 current.item 的类型说明。
      tooltipLink: ""
    - name: value
      title: 值
      type: any
      sync: true
      description: 播放位置
      advanced: true
      group: 数据属性
    - name: autoplay
      title: 轮播
      type: boolean
      default: true
      description: ""
      group: 主要属性
      brifeDoc: ""
      docDescription: 是否循环播放所有图片
      tooltipLink: ""
    - name: interval
      title: 切换间隔时间
      type: number
      default: 4000
      description: 单位：毫秒，幻灯片切换时间，如果设置值小于动画时长，会在动画完成后切换
      group: 主要属性
      brifeDoc: ""
      docDescription: 单位：毫秒，幻灯片切换时间，如果设置值小于动画时长，会在动画完成后切换
      tooltipLink: ""
  slots:
    - concept: Slot
      name: default
      description: 插入`<u-carousel-item>`子组件。
      empty-background: add-sub-large
      support:
        - name: u-carousel-item
          title: 幻灯片子项
          snippet: '<u-carousel-item><u-image style="width: 100%; height: 100%"
            fit="cover"
            src="https://static-vusion.163yun.com/assets/cloud-ui/1.jpg"></u-carousel-item>'
    - concept: Slot
      name: item
      description: 自定义选项的结构和样式
      slotProps:
        concept: Param
        name: current
        typeAnnotation:
          concept: TypeAnnotation
          typeKind: generic
          typeNamespace: nasl.ui
          typeName: Current
          typeArguments:
            - concept: TypeAnnotation
              typeKind: typeParam
              typeName: T
  events:
    - name: before-select
      title: 选择前
      description: 选择某一页前触发
      advanced: true
      params:
        - name: $event
          type: object
          description: 自定义事件对象
          schema:
            $ref: "#/systemTypes/ChangeItemEvent"
        - name: $event.value
          type: any
          description: 选中项的值
        - name: $event.oldValue
          type: any
          description: 旧的值
        - name: $event.itemVM
          type: UCarouselItem
          description: 选中项实例
        - name: $event.preventDefault
          type: Function
          description: 阻止选择流程
        - name: senderVM
          type: UCarousel
          description: 发送事件实例
    - name: select
      title: 选择后
      description: 选择某一页时触发
      advanced: true
      params:
        - name: $event
          type: object
          description: 自定义事件对象
          schema:
            $ref: "#/systemTypes/ChangeItemEvent"
        - name: $event.value
          type: any
          description: 选中项的值
        - name: $event.oldValue
          type: any
          description: 旧的值
        - name: $event.itemVM
          type: UCarouselItem
          description: 选中项实例
        - name: senderVM
          type: UCarousel
          description: 发送事件实例
    - name: before-load
      title: 加载前
      description: 加载前触发
      advanced: true
      params:
        - name: $event
          type: object
          description: 自定义事件对象
          schema:
            $ref: "#/systemTypes/EventTarget"
        - name: $event.preventDefault
          type: Function
          description: 阻止加载流程
        - name: senderVM
          type: UTableView
          description: 发送事件实例
    - name: load
      title: 加载后
      description: 加载后触发
      params:
        - name: $event
          type: "null"
          description: 无
        - name: senderVM
          type: UTableView
          description: 发送事件实例
  methods:
    - name: reload
      description: 清除缓存，重新加载
      params: []
- name: u-carousel-item
  title: 幻灯片选项
  attrs:
    - name: title
      title: 标题
      type: string
      description: 该项的标题
      advanced: true
    - name: value
      title: 值
      type: any
      description: 该项的值
      advanced: true
  slots:
    - concept: Slot
      name: default
      description: 插入文本或 HTML。
      empty-background: image
    - concept: Slot
      name: title
      description: 自定义标题文本。
      advanced: true
  description: 幻灯片选项