sard-uniapp 1.19.1 → 1.19.3

package/components/layout/README.md

@@ -0,0 +1,89 @@
+---
+nav: 组件
+title: Layout
+subtitle: 布局
+group: 布局
+---
+
+## 介绍
+
+基于行/列来划分区块以展示内容。栅格系统提供了 12 列容器来布局，需要配套使用`Row`和`Col`组件。
+
+## 引入
+
+```ts
+import Row from 'sard-uniapp/components/row/row.vue'
+import Col from 'sard-uniapp/components/col/col.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+使用`span`属性配置子元素占据的列数。
+
+@code('${DEMO_PATH}/layout/demo/Basic.vue')
+
+### 列偏移
+
+使用`offset`可以将列向右侧偏。
+
+@code('${DEMO_PATH}/layout/demo/Offset.vue')
+
+### 水平对齐
+
+`justify`属性可以配置子元素在父容器中的水平对齐方式。
+
+@code('${DEMO_PATH}/layout/demo/Justify.vue')
+
+### 垂直对齐
+
+`align`属性可以配置子元素在父容器中的垂直对齐方式。
+
+@code('${DEMO_PATH}/layout/demo/Align.vue')
+
+### 列间距
+
+`gap`属性可以配置子元素之间的距离。
+
+@code('${DEMO_PATH}/layout/demo/Gap.vue')
+
+### 列顺序
+
+通过`order`来改变元素的排序。
+
+@code('${DEMO_PATH}/layout/demo/Order.vue')
+
+## API
+
+### RowProps
+
+| 属性       | 描述           | 类型                                                              | 默认值 |
+| ---------- | -------------- | ----------------------------------------------------------------- | ------ |
+| root-class | 组件根元素类名 | string                                                            | -      |
+| root-style | 组件根元素样式 | StyleValue                                                        | -      |
+| gap        | 列间距         | string                                                            | -      |
+| justify    | 水平对齐方式   | 'start' \| 'center' \| 'end' \| 'around' \| 'between' \| 'evenly' | -      |
+| align      | 垂直对齐方式   | 'start' \| 'center' \| 'end' \| 'stretch'                         | -      |
+
+### RowSlots
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义默认内容 | -    |
+
+### ColProps
+
+| 属性       | 描述           | 类型                       | 默认值 |
+| ---------- | -------------- | -------------------------- | ------ |
+| root-class | 组件根元素类名 | string                     | -      |
+| root-style | 组件根元素样式 | StyleValue                 | -      |
+| span       | 列元素宽度     | number \| 'auto' \| 'none' | -      |
+| offset     | 列元素偏移距离 | number                     | -      |
+| order      | 列元素顺序     | number                     | -      |
+
+### ColSlots
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义默认内容 | -    |

package/components/list/README.md

@@ -0,0 +1,118 @@
+---
+nav: 组件
+title: List
+subtitle: 列表
+group: 数据展示
+---
+
+## 介绍
+
+显示一组垂直排列的数据。
+
+## 引入
+
+```ts
+import List from 'sard-uniapp/components/list/list.vue'
+import ListItem from 'sard-uniapp/components/list-item/list-item.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+可以给列表项添加标题、描述和值。
+
+@code('${DEMO_PATH}/list/demo/Basic.vue')
+
+### 可链接的
+
+设置 `arrow` 属性会显示右边的箭头，设置 `hover` 属性会有点击状态。
+
+@code('${DEMO_PATH}/list/demo/Linkable.vue')
+
+### 图标
+
+设置`icon`属性或插槽可以在左边显示图标。
+
+@code('${DEMO_PATH}/list/demo/Icon.vue')
+
+### 自定义内容
+
+列表项的`body`和`footer`默认平分水平空间，如果`footer`需要占据更多的空间，可以设置`body`不扩展。
+
+`value`中的元素默认会向右边靠，如果有使用`footer`属性定义内容，则内容会纵向排列。
+
+@code('${DEMO_PATH}/list/demo/Slot.vue')
+
+### 列表标题和描述
+
+列表标题和描述可以对整个列表进行说明
+
+@code('${DEMO_PATH}/list/demo/Group.vue')
+
+### 卡片风格
+
+可以使用`card`属性让列表显示为卡片风格。
+
+@code('${DEMO_PATH}/list/demo/Card.vue')
+
+## API
+
+### ListProps
+
+| 属性        | 描述           | 类型             | 默认值 |
+| ----------- | -------------- | ---------------- | ------ |
+| root-class  | 组件根元素类名 | string           | -      |
+| root-style  | 组件根元素样式 | StyleValue       | -      |
+| title       | 列表顶部标题   | string \| number | -      |
+| description | 列表底部描述   | string \| number | -      |
+| card        | 卡片风格       | boolean          | false  |
+| inlaid      | 嵌入式列表     | boolean          | false  |
+
+### ListSlots
+
+| 插槽        | 描述                                    | 属性 |
+| ----------- | --------------------------------------- | ---- |
+| default     | 自定义默认内容                          | -    |
+| title       | 自定义标题内容，会覆盖`title`属性       | -    |
+| description | 自定义描述内容，会覆盖`description`属性 | -    |
+
+### ListItemProps
+
+| 属性            | 描述                         | 类型                      | 默认值  |
+| --------------- | ---------------------------- | ------------------------- | ------- |
+| root-class      | 组件根元素类名               | string                    | -       |
+| root-style      | 组件根元素样式               | StyleValue                | -       |
+| title           | 左侧标题                     | string \| number          | -       |
+| description     | 标题下方的描述               | string \| number          | -       |
+| value           | 右侧值                       | string \| number          | -       |
+| hover           | 是否开启点击反馈             | boolean                   | false   |
+| arrow           | 是否展示右侧箭头             | boolean                   | false   |
+| arrow-direction | 箭头方向                     | 'up' \| 'right' \| 'down' | 'right' |
+| icon            | 左侧图标名称，可以为图片路径 | string                    | -       |
+| icon-size       | 图标尺寸                     | string                    | -       |
+| icon-color      | 图标颜色                     | string                    | -       |
+| icon-family     | 图标字体名称                 | string                    | -       |
+
+### ListItemSlots
+
+| 插槽        | 描述                                    | 属性 |
+| ----------- | --------------------------------------- | ---- |
+| default     | 自定义默认内容，会覆盖所有内容          | -    |
+| title       | 自定义标题内容，会覆盖`title`属性       | -    |
+| description | 自定义描述内容，会覆盖`description`属性 | -    |
+| value       | 自定义值内容，会覆盖`value`属性         | -    |
+| arrow       | 自定义箭头                              | -    |
+| icon        | 自定义左侧图标，会覆盖`icon`属性        | -    |
+
+### ListItemEmits
+
+| 事件  | 描述             | 类型                 |
+| ----- | ---------------- | -------------------- |
+| click | 点击列表项时触发 | (event: any) => void |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/list/list.vue

@@ -24,6 +24,14 @@ import {
   isRenderVisible,
   createBem
 } from "../../utils";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {string | number} title 列表顶部标题，默认值：-。
+ * @property {string | number} description 列表底部描述，默认值：-。
+ * @property {boolean} card 卡片风格，默认值：false。
+ * @property {boolean} inlaid 嵌入式列表，默认值：false。
+ */
 export default  _defineComponent({
   ...{
     options: {

package/components/list-item/list-item.vue

@@ -53,6 +53,21 @@ import SarIcon from "../icon/icon.vue";
 import {
   defaultListItemProps
 } from "../list/common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {string | number} title 左侧标题，默认值：-。
+ * @property {string | number} description 标题下方的描述，默认值：-。
+ * @property {string | number} value 右侧值，默认值：-。
+ * @property {boolean} hover 是否开启点击反馈，默认值：false。
+ * @property {boolean} arrow 是否展示右侧箭头，默认值：false。
+ * @property {'up' | 'right' | 'down'} arrowDirection 箭头方向，默认值：'right'。
+ * @property {string} icon 左侧图标名称，可以为图片路径，默认值：-。
+ * @property {string} iconSize 图标尺寸，默认值：-。
+ * @property {string} iconColor 图标颜色，默认值：-。
+ * @property {string} iconFamily 图标字体名称，默认值：-。
+ * @event {(event: any) => void} click 点击列表项时触发
+ */
 export default  _defineComponent({
   components: {
     SarIcon,

package/components/load-more/README.md

@@ -0,0 +1,75 @@
+---
+nav: 组件
+title: LoadMore
+subtitle: 加载更多
+group: 反馈组件
+---
+
+## 介绍
+
+放置在列表底部，做滚动加载使用，展示加载的各种状态。
+
+## 引入
+
+```ts
+import LoadMore from 'sard-uniapp/components/load-more/load-more.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+通过设置 `status` 属性展示不同的状态信息；
+组件处于 `incomplete` 状态时点击会触发 `load-more` 事件，通常用于加载的数据不满一屏无法触底加载时使用。
+
+处于 `error` 状态时点击会触发 `reload` 事件。
+
+@code('${DEMO_PATH}/load-more/demo/Basic.vue')
+
+### 配合 PullDownRefresh 组件一起使用
+
+下面的案例代码展示了经典的“下拉刷新+上拉加载”功能实现。
+
+@code('${DEMO_PATH}/load-more/demo/WithRefresh.vue')
+
+## API
+
+### LoadMoreProps
+
+| 属性            | 描述               | 类型           | 默认值                   |
+| --------------- | ------------------ | -------------- | ------------------------ |
+| root-class      | 组件根元素类名     | string         | -                        |
+| root-style      | 组件根元素样式     | StyleValue     | -                        |
+| status          | 加载的状态         | LoadMoreStatus | 'incomplete'             |
+| incomplete-text | 未加载完的状态文本 | string         | '加载更多'               |
+| loading-text    | 加载中的状态文本   | string         | '加载中...'              |
+| complete-text   | 加载完的状态文本   | string         | '没有更多了'             |
+| error-text      | 加载错误的状态文本 | string         | '请求失败，点击重新加载' |
+
+### LoadMoreSlots
+
+| 插槽       | 描述                                                   | 属性 |
+| ---------- | ------------------------------------------------------ | ---- |
+| incomplete | 自定义未加载完的状态内容，会覆盖 `incompleteText` 属性 | -    |
+| loading    | 自定义加载中的状态内容，会覆盖 `loadingText` 属性      | -    |
+| complete   | 自定义加载完的状态内容，会覆盖 `completeText` 属性     | -    |
+| error      | 自定义加载错误的状态内容，会覆盖 `errorText` 属性      | -    |
+
+### LoadMoreEmits
+
+| 事件      | 描述                             | 类型       |
+| --------- | -------------------------------- | ---------- |
+| load-more | 在 `incomplete` 状态下点击时触发 | () => void |
+| reload    | 在 `error` 状态下点击时触发      | () => void |
+
+### LoadMoreStatus
+
+```ts
+type LoadMoreStatus = 'incomplete' | 'loading' | 'complete' | 'error'
+```
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/load-more/load-more.vue

@@ -26,6 +26,17 @@ import {
 } from "./common";
 import { useTranslate } from "../locale";
 import SarLoading from "../loading/loading.vue";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {LoadMoreStatus} status 加载的状态，默认值：'incomplete'。
+ * @property {string} incompleteText 未加载完的状态文本，默认值：'加载更多'。
+ * @property {string} loadingText 加载中的状态文本，默认值：'加载中...'。
+ * @property {string} completeText 加载完的状态文本，默认值：'没有更多了'。
+ * @property {string} errorText 加载错误的状态文本，默认值：'请求失败，点击重新加载'。
+ * @event {() => void} load-more 在 `incomplete` 状态下点击时触发
+ * @event {() => void} reload 在 `error` 状态下点击时触发
+ */
 export default  _defineComponent({
   components: {
     SarLoading,

package/components/loading/README.md

@@ -0,0 +1,89 @@
+---
+nav: 组件
+title: Loading
+subtitle: 加载
+group: 反馈组件
+---
+
+## 介绍
+
+表示处理中的状态。
+
+## 引入
+
+```ts
+import Button from 'sard-uniapp/components/loading/loading.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+@code('${DEMO_PATH}/loading/demo/Basic.vue')
+
+### 加载类型
+
+使用`type`属性设置不同类型。
+
+@code('${DEMO_PATH}/loading/demo/Type.vue')
+
+### 加载文案
+
+通过`text`属性或者默认插槽展示文字。
+
+@code('${DEMO_PATH}/loading/demo/Text.vue')
+
+### 垂直排布
+
+通过`vertical`属性设置图标和文字垂直排布。
+
+@code('${DEMO_PATH}/loading/demo/Vertical.vue')
+
+### 加载尺寸
+
+`size`属性设置图标大小，`textSize`属性设置文字大小。
+
+@code('${DEMO_PATH}/loading/demo/Size.vue')
+
+### 自定义颜色
+
+`color`属性设置图标颜色，`textColor`属性设置文字颜色。
+
+@code('${DEMO_PATH}/loading/demo/Color.vue')
+
+### 自定义图标
+
+通过 `circular` 插槽可以自定义加载图标。
+
+@code('${DEMO_PATH}/loading/demo/Custom.vue')
+
+## API
+
+### LoadingProps
+
+| 属性       | 描述                   | 类型                  | 默认值     |
+| ---------- | ---------------------- | --------------------- | ---------- |
+| root-class | 组件根元素类名         | string                | -          |
+| root-style | 组件根元素样式         | StyleValue            | -          |
+| type       | 加载类型               | 'clock' \| 'circular' | 'circular' |
+| color      | 加载颜色               | string                | -          |
+| size       | 图标尺寸               | string                | -          |
+| text       | 图标文字               | string                | -          |
+| text-color | 文字颜色               | string                | -          |
+| text-size  | 文字尺寸               | string                | -          |
+| vertical   | 是否垂直排列图标和文案 | boolean               | false      |
+| animated   | 是否开启加载动画       | boolean               | true       |
+| progress   | 当前加载的进度         | number                | 1          |
+
+### LoadingSlots
+
+| 插槽     | 描述                         | 属性 |
+| -------- | ---------------------------- | ---- |
+| default  | 自定义加载文字内容           | -    |
+| circular | 自定义 `circular` 类型的图标 | -    |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/loading/loading.vue

@@ -47,6 +47,19 @@ import {
 import {
   defaultLoadingProps
 } from "./common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {'clock' | 'circular'} type 加载类型，默认值：'circular'。
+ * @property {string} color 加载颜色，默认值：-。
+ * @property {string} size 图标尺寸，默认值：-。
+ * @property {string} text 图标文字，默认值：-。
+ * @property {string} textColor 文字颜色，默认值：-。
+ * @property {string} textSize 文字尺寸，默认值：-。
+ * @property {boolean} vertical 是否垂直排列图标和文案，默认值：false。
+ * @property {boolean} animated 是否开启加载动画，默认值：true。
+ * @property {number} progress 当前加载的进度，默认值：1。
+ */
 export default  _defineComponent({
   ...{
     options: {

package/components/lucky-draw/README.md

@@ -0,0 +1,174 @@
+---
+nav: 组件
+title: LuckyDraw
+subtitle: 幸运抽奖
+group:
+  title: 活动组件
+  order: 6
+version: 1.2+
+---
+
+## 介绍
+
+提供了几个组合式函数，封装了九宫格、幸运大转盘、老虎机等抽奖的主要逻辑。布局与样式需自行实现，可拷贝案例代码再进行修改。
+
+## 引入
+
+```ts
+import { useLuckyGrid, useLuckyWheel, useSlotMachine } from 'sard-uniapp'
+```
+
+## 代码演示
+
+### 九宫格
+
+遍历 `useLuckyGrid` 返回的 `grids` 计算属性来渲染九宫格；`activeIndex` 计算属性用于判断当前活动的奖品。
+
+点击按钮后调用 `play` 方法开始动画；
+
+在确定抽中的奖品下标时调用 `stop` 方法开始减速动画；
+
+在动画完全停止后调用 `complete` 回调函数展示抽中的奖品。
+
+@code('${DEMO_PATH}/lucky-draw/demo/BasicGrid.vue')
+
+utils.ts
+
+@code('${DEMO_PATH}/lucky-draw/demo/utils.ts')
+
+### 自定义宫格行列
+
+`useLuckyGrid` 默认会生成 3x3 个格子，也可以自定义行列数。
+
+宫格的外边缘格子下标从左上角以 0 开始逆时针递增，内部的格子下标从左到右、从上到下以 -1 开始递减。
+
+`centerSize` 计算属性可用于获取中间格子的行列数。
+
+@code('${DEMO_PATH}/lucky-draw/demo/GridSize.vue')
+
+### 大转盘
+
+大转盘与宫格抽奖逻辑类似。
+
+`count` 选项用于指定奖品数量；
+
+`useLuckyWheel` 函数返回的 `sectorDegrees` 计算属性为每个奖品所占的角度；
+
+`degrees` 计算属性为整个大转盘当前旋转的角度。
+
+@code('${DEMO_PATH}/lucky-draw/demo/Wheel.vue')
+
+### 老虎机
+
+老虎机可以一次性抽取多个奖品。
+
+`columns` 选项用于指定列数以及每列的奖品数量；
+
+`offset` 计算属性保存着每一列的百分比偏移量，每一列奖品容器的高度需和奖品高度一致；
+
+为了实现首位相接的效果，还需在渲染的奖品列表的末尾加上第一个奖品。
+
+@code('${DEMO_PATH}/lucky-draw/demo/SlotMechine.vue')
+
+## API
+
+### useLuckyGrid
+
+```ts
+function useLuckyGrid(options?: UseLuckyGridOptions): UseLuckyGridReturn
+```
+
+### UseLuckyGridOptions
+
+| 属性       | 描述                           | 类型                         | 默认值              |
+| ---------- | ------------------------------ | ---------------------------- | ------------------- |
+| row        | 宫格行数                       | number \| Ref\<number>       | 3                   |
+| column     | 宫格列数                       | number \| Ref\<number>       | 3                   |
+| minSpeed   | 最小加速度                     | number \| Ref\<number>       | 0.1                 |
+| maxSpeed   | 最大加速度                     | number \| Ref\<number>       | 0.4                 |
+| accelTime  | 加速时间，单位毫秒             | number \| Ref\<number>       | 2500                |
+| decelTime  | 减速时间，单位毫秒             | number \| Ref\<number>       | 2500                |
+| easeIn     | 加速缓动公式                   | (progress: number) => number | (k) => k \* k       |
+| easeOut    | 减速缓动公式                   | (progress: number) => number | (k) => k \* (2 - k) |
+| startDelay | 加速运动前的等待时间，单位毫秒 | number \| Ref\<number>       | 0                   |
+| endDelay   | 减速运动后的等待时间，单位毫秒 | number \| Ref\<number>       | 500                 |
+| complete   | 完成抽奖动画后的回调           | (index: number) => void      | -                   |
+
+### UseLuckyGridReturn
+
+| 属性        | 描述                                           | 类型                                           |
+| ----------- | ---------------------------------------------- | ---------------------------------------------- |
+| play        | 调用后开始抽奖                                 | () => void                                     |
+| stop        | 调用后开始减速动画                             | (index?: number) => void                       |
+| pause       | 调用后暂停动画                                 | () => void                                     |
+| reset       | 调用后重置动画                                 | () => void                                     |
+| playing     | 用于判断当前是否正在动画                       | ComputedRef\<boolean>                          |
+| activeIndex | 用于判断当前活动的下标                         | ComputedRef\<number \| undefined>              |
+| grids       | 用于渲染成宫格，并根据下标判断奖品和非奖品位置 | ComputedRef\<number[]>                         |
+| centerSize  | 用于渲染中间非奖品格子的行列数                 | ComputedRef\<{ row: number; column: number; }> |
+
+### useLuckyWheel
+
+```ts
+function useLuckyWheel(options?: UseLuckyWheelOptions): UseLuckyWheelReturn
+```
+
+### UseLuckyWheelOptions
+
+| 属性       | 描述                           | 类型                         | 默认值              |
+| ---------- | ------------------------------ | ---------------------------- | ------------------- |
+| count      | 奖品个数                       | number \| Ref\<number>       | 8                   |
+| minSpeed   | 最小加速度                     | number \| Ref\<number>       | 0.01                |
+| maxSpeed   | 最大加速度                     | number \| Ref\<number>       | 0.4                 |
+| accelTime  | 加速时间，单位毫秒             | number \| Ref\<number>       | 2500                |
+| decelTime  | 减速时间，单位毫秒             | number \| Ref\<number>       | 2500                |
+| easeIn     | 加速缓动公式                   | (progress: number) => number | (k) => k \* k       |
+| easeOut    | 减速缓动公式                   | (progress: number) => number | (k) => k \* (2 - k) |
+| startDelay | 加速运动前的等待时间，单位毫秒 | number \| Ref\<number>       | 0                   |
+| endDelay   | 减速运动后的等待时间，单位毫秒 | number \| Ref\<number>       | 300                 |
+| complete   | 完成抽奖动画后的回调           | (index: number) => void      | -                   |
+
+### UseLuckyWheelReturn
+
+| 属性          | 描述                             | 类型                     |
+| ------------- | -------------------------------- | ------------------------ |
+| play          | 调用后开始抽奖                   | () => void               |
+| stop          | 调用后开始减速动画               | (index?: number) => void |
+| pause         | 调用后暂停动画                   | () => void               |
+| reset         | 调用后重置动画                   | () => void               |
+| playing       | 用于判断当前是否正在动画         | ComputedRef\<boolean>    |
+| sectorDegrees | 每个扇形奖品所占的角度，单位 deg | ComputedRef\<number>     |
+| degrees       | 当前转盘渲染的角度，单位 deg     | ComputedRef\<number>     |
+
+### useSlotMachine
+
+```ts
+function useSlotMachine(options: UseSlotMachineOptions): UseSlotMachineReturn
+```
+
+### UseSlotMachineOptions
+
+| 属性         | 描述                           | 类型                                                     | 默认值              |
+| ------------ | ------------------------------ | -------------------------------------------------------- | ------------------- |
+| columns      | 奖品个数                       | number[] \| unknown[][] \| Ref\<number[] \| unknown[][]> | []                  |
+| staggerDelay | 列间交错延迟时间，单位毫秒     | number \| Ref\<number>                                   | 600                 |
+| minSpeed     | 最小加速度                     | number \| Ref\<number>                                   | 0.01                |
+| maxSpeed     | 最大加速度                     | number \| Ref\<number>                                   | 0.3                 |
+| accelTime    | 加速时间，单位毫秒             | number \| Ref\<number>                                   | 2500                |
+| decelTime    | 减速时间，单位毫秒             | number \| Ref\<number>                                   | 2500                |
+| easeIn       | 加速缓动公式                   | (progress: number) => number                             | (k) => k \* k       |
+| easeOut      | 减速缓动公式                   | (progress: number) => number                             | (k) => k \* (2 - k) |
+| startDelay   | 加速运动前的等待时间，单位毫秒 | number \| Ref\<number>                                   | 0                   |
+| endDelay     | 减速运动后的等待时间，单位毫秒 | number \| Ref\<number>                                   | 300                 |
+| complete     | 完成抽奖动画后的回调           | (index: number[]) => void                                | -                   |
+
+### UseSlotMachineReturn
+
+| 属性    | 描述                     | 类型                       |
+| ------- | ------------------------ | -------------------------- |
+| play    | 调用后开始抽奖           | () => void                 |
+| stop    | 调用后开始减速动画       | (index?: number[]) => void |
+| pause   | 调用后暂停动画           | () => void                 |
+| reset   | 调用后重置动画           | () => void                 |
+| playing | 用于判断当前是否正在动画 | ComputedRef\<boolean>      |
+| offset  | 每一列的当前偏移量       | ComputedRef\<number[]>     |