npm package: @hqzh/timeline-base
Description: <!--  * @Author: yangjing  * @Date: 2022-02-10 15:58:03  * @LastEditors: 吴建明  * @LastEditTime: 2024-07-05 11:10:37  * @Description: -->
Author: yangjing
Latest version: 1.0.4

<!--
 * @Author: yangjing
 * @Date: 2022-02-10 15:58:03
 * @LastEditors: 吴建明
 * @LastEditTime: 2024-07-05 11:10:37
 * @Description:
-->

# t-timeline-base@1.0.0

功能：时间轴组件可以展示某个时间段，用户可以查看和选择时间点、播放时间切换的动画。目前支持年、月、日、小时的时间。  
结构：该时间轴时间轴的结构分为左右两个模块，两个模块由一个父容器包裹。左模块只有一个播放按钮。右模块包括步进按钮（能控制当前指示的时间前进后退）、轴线、刻度、刻度文本和信息提示框。

## 示例

### 基础用法

time-change 事件在当前时间切换的时候触发。默认不触发这个事件。若要默认触发此事件，需要将 immediate-trigger 设置为 true。

```vue demo
<template>
  <t-timeline-base
    :time-data="timeData"
    :cur-time="curTime"
    :c-style="cStyle"
    :control-button-info="controlButtonInfo"
    @time-change="changeTime"
  />
  当前选中的时间：{{ curTime }}
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
export default defineComponent({
  setup() {
    const init = 1976 // 起始时间
    const timeData = Array.from({ length: 6 }, (v, i) => (init + i).toString())
    const state = reactive({
      timeData,
      curTime: '1977',
      cStyle: {},
      controlButtonInfo: {
        playImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/play.png',
        pauseImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/pause.png',
        hoverPlayUrl:
          'http://192.168.24.250:7777/lego-generated-apps/lego_file/res/2023-04-23/1ec8424894ca46d48532801b80fb216b.png',
        hoverPauseUrl:
          'http://192.168.24.250:7777/lego-generated-apps/lego_file/res/2023-04-23/3f82a8593ad24945b62108e76424d441.png',
      },
    })

    /**
     * 处理时间改变
     * @param param.time - 当前选中的时间
     * @param param.index - 当前选中时间的索引
     */
    function changeTime(param: { time: string; index: number }) {
      state.curTime = param.time
    }

    return {
      ...toRefs(state),
      changeTime,
    }
  },
})
</script>
```

### 基础用法-带颜色值区间

time-colors 属性可以配置每个时间区间片段的颜色值，默认最后一个颜色值的片段不展示，如果按照最后一个颜色值为准，传递给time-colors时去除第一个颜色值即可。

```vue demo
<template>
  <t-timeline-base
    :time-data="timeData"
    :cur-time="curTime"
    :c-style="cStyle"
    :time-colors="timeDataColor"
    :control-button-info="controlButtonInfo"
    @time-change="changeTime"
  />
  当前选中的时间：{{ curTime }}
</template>
<script lang="ts">
import {
  defineComponent, reactive, toRefs, ref,
} from 'vue';

export default defineComponent({
  setup() {
    const init = 1976; // 起始时间
    const timeData = Array.from({ length: 6 }, (v, i) => (init + i).toString());
    const state = reactive({
      timeData,
      timeDataColor: ['#ffee6f', '#4C1B8E', '#FF6B2C', '#39E573', '#B2543D', '#7C91C4'],
      curTime: '1977',
      cStyle: {},
      controlButtonInfo: {
        playImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/play.png',
        pauseImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/pause.png',
        hoverPlayUrl:
          'http://192.168.24.250:7777/lego-generated-apps/lego_file/res/2023-04-23/1ec8424894ca46d48532801b80fb216b.png',
        hoverPauseUrl:
          'http://192.168.24.250:7777/lego-generated-apps/lego_file/res/2023-04-23/3f82a8593ad24945b62108e76424d441.png',
      },
    });

    /**
     * 处理时间改变
     * @param param.time - 当前选中的时间
     * @param param.index - 当前选中时间的索引
     */
    function changeTime(param: { time: string; index: number }) {
      state.curTime = param.time;
    }

    return {
      ...toRefs(state),
      changeTime,
    };
  },
});
</script>

```

### 循环切换

设置 loop 为 true 来使时间轴可循环切换时间。这里将播放的时间间隔（play-interval）设置成了 1500 ms。

```vue demo
<template>
  <t-timeline-base
    :time-data="timeData"
    :cur-time="curTime"
    :play-interval="1500"
    :step-button-visible="true"
    :loop="true"
    :control-button-info="controlButtonInfo"
    @time-change="changeTime"
  />
  当前选中的时间：{{ curTime }}
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
export default defineComponent({
  setup() {
    const init = 1976 // 起始时间
    const timeData = Array.from({ length: 6 }, (v, i) => (init + i).toString())
    const state = reactive({
      timeData,
      curTime: '1977',
      controlButtonInfo: {
        playImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/play.png',
        pauseImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/pause.png',
      },
    })

    /**
     * 处理时间改变
     * @param param.time - 当前选中的时间
     * @param param.index - 当前选中时间的索引
     */
    function changeTime(param: { time: string; index: number }) {
      state.curTime = param.time
    }

    return {
      ...toRefs(state),
      changeTime,
    }
  },
})
</script>
```

### 默认播放

设置 auto-play 为 true 来使时间轴加载完后立马播放时间轴动画。

```vue demo
<template>
  <t-timeline-base
    :time-data="timeData"
    :cur-time="curTime"
    :play-interval="1500"
    :auto-play="true"
    :control-button-info="controlButtonInfo"
    @time-change="changeTime"
  />
  当前选中的时间：{{ curTime }}
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
export default defineComponent({
  setup() {
    const init = 1976 // 起始时间
    const timeData = Array.from({ length: 6 }, (v, i) => (init + i).toString())
    const state = reactive({
      timeData,
      curTime: '1977',
      controlButtonInfo: {
        playImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/play.png',
        pauseImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/pause.png',
      },
    })

    /**
     * 处理时间改变
     * @param param.time - 当前选中的时间
     * @param param.index - 当前选中时间的索引
     */
    function changeTime(param: { time: string; index: number }) {
      state.curTime = param.time
    }

    return {
      ...toRefs(state),
      changeTime,
    }
  },
})
</script>
```

### 带步进器的时间轴

设置 step-button-visible 为 true ，你就能得到一个带步进器（前进后退按钮）的时间轴了。

```vue demo
<template>
  <t-timeline-base
    :time-data="timeData"
    :cur-time="curTime"
    :step-button-visible="true"
    :control-button-info="controlButtonInfo"
    @time-change="changeTime"
  />
  当前选中的时间：{{ curTime }}
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
export default defineComponent({
  setup() {
    const init = 1976
    const timeData = Array.from({ length: 6 }, (v, i) => (init + i).toString())
    const state = reactive({
      timeData,
      curTime: '1977',
      controlButtonInfo: {
        playImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/play.png',
        pauseImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/pause.png',
      },
    })

    /**
     * 处理时间改变
     * @param param.time - 当前选中的时间
     * @param param.index - 当前选中时间的索引
     */
    function changeTime(param: { time: string; index: number }) {
      state.curTime = param.time
    }

    return {
      ...toRefs(state),
      changeTime,
    }
  },
})
</script>
```

### 取消播放按钮的时间轴

在配置项中无直接取消播放按钮的时间轴。若有此需求，可以设置 cStyle.controlButton.common.display 为 'none'将其隐藏。

```vue demo
<template>
  <t-timeline-base
    :time-data="timeData"
    :cur-time="curTime"
    :c-style="cStyle"
    :control-button-info="controlButtonInfo"
    @time-change="changeTime"
  />
  当前选中的时间：{{ curTime }}
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
export default defineComponent({
  setup() {
    const init = 1976
    const timeData = Array.from({ length: 6 }, (v, i) => (init + i).toString())
    const state = reactive({
      timeData,
      curTime: '1977',
      cStyle: {
        controlButtonPlay: {
          default: {
            display: 'none',
          },
        },
      },
      controlButtonInfo: {
        playImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/play.png',
        pauseImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/pause.png',
      },
    })

    /**
     * 处理时间改变
     * @param param.time - 当前选中的时间
     * @param param.index - 当前选中时间的索引
     */
    function changeTime(param: { time: string; index: number }) {
      state.curTime = param.time
    }

    return {
      ...toRefs(state),
      changeTime,
    }
  },
})
</script>
```

### 改变提示框样式

在 cStyle.toolTip 中去改变提示框样式。时间轴上有两种提示框，一种是指向当前选中时间的提示框，另一种是随光标在坐标轴上滑动而显示的提示框。cStyle.toolTip.currentTime 表示第一种提示框的样式，cStyle.toolTip.hover 表示第二种提示框的样式。cStyle.toolTip.common 表示两种提示框公共样式。两种提示框若样式相同推荐采用 cStyle.toolTip.common 来设置。

```vue demo
<template>
  <t-timeline-base
    :time-data="timeData"
    :cur-time="curTime"
    :c-style="cStyle"
    :control-button-info="controlButtonInfo"
    @time-change="changeTime"
  />
  当前选中的时间：{{ curTime }}
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
export default defineComponent({
  setup() {
    const init = 1976
    const timeData = Array.from({ length: 6 }, (v, i) => (init + i).toString())
    const state = reactive({
      timeData,
      curTime: '1977',
      cStyle: {
        toolTipCurrentTime: {
          default: {
            color: '#555',
            borderRadius: '50%',
            background: '#cde',
          },
        },
        toolTipHover: {
          default: {
            color: '#555',
            borderRadius: '50%',
            background: '#edc',
          },
        },
      },
      controlButtonInfo: {
        playImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/play.png',
        pauseImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/pause.png',
      },
    })

    /**
     * 处理时间改变
     * @param param.time - 当前选中的时间
     * @param param.index - 当前选中时间的索引
     */
    function changeTime(param: { time: string; index: number }) {
      state.curTime = param.time
    }

    return {
      ...toRefs(state),
      changeTime,
    }
  },
})
</script>
```

### 无进度条效果的时间轴

特点：时间轴的轴线不可点击，仅能点击刻度来切换时间；时间轴的刻度整体向上偏移了自身高度的 50%。
提示：这里是通过改变了 cStyle.axisFirstLevelItem.default 以及 cStyle.axisSecondLevelItem.default 的 transform 属性来控制刻度的偏移。这里最好不要使用 left、right 等定位属性来整体改变刻度的位置。
此处还设置了每间隔 1 个单位隐藏一个刻度文本值（interval 设置为 1）。

```vue demo
<template>
  <t-timeline-base
    :time-data="timeData"
    :cur-time="curTime"
    :c-style="cStyle"
    :interval="1"
    :control-button-info="controlButtonInfo"
    @time-change="changeTime"
  />
  当前选中的时间：{{ curTime }}
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
export default defineComponent({
  setup() {
    const init = 1976
    const timeData = Array.from({ length: 10 }, (v, i) => (init + i).toString())
    // 刻度通用样式
    const axisItemCommonStyle = {
      transform: 'translate(-50%, -50%)',
      cursor: 'pointer',
      borderRadius: '50%',
    }
    const state = reactive({
      timeData,
      curTime: '1977',
      cStyle: {
        // 轴线刻度文本样式
        axisLabel: {
          default: {
            marginTop: '5px',
          },
        },
        // 一级刻度样式
        axisFirstLevelItem: {
          default: {
            ...axisItemCommonStyle,
            width: '10px',
            height: '10px',
          },
          active: {
            backgroundColor: 'red',
          },
        },
        // 二级刻度样式
        axisSecondLevelItem: {
          default: {
            ...axisItemCommonStyle,
            width: '8px',
            height: '8px',
          },
          active: {
            backgroundColor: 'red',
          },
        },
        // 轴线进度条容器样式
        axisLineProgressWrappper: {
          default: {
            height: '1px',
            background: '#333',
            // 时间轴不可点击
            pointerEvents: 'none',
          },
        },
        // 轴线进度条当前进度样式
        axisLineProgressCurrent: {
          default: {
            display: 'none',
          },
        },
        toolTipCurrentTime: {
          default: {
            top: '-15px',
          },
        },
        toolTipHover: {
          default: {
            top: '-15px',
          },
        },
      },
      controlButtonInfo: {
        playImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/play.png',
        pauseImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/pause.png',
      },
    })

    /**
     * 处理时间改变
     * @param param.time - 当前选中的时间
     * @param param.index - 当前选中时间的索引
     */
    function changeTime(param: { time: string; index: number }) {
      state.curTime = param.time
    }

    return {
      ...toRefs(state),
      changeTime,
    }
  },
})
</script>
```

### 时间轴文本片段折行效果 年-月

在刻度的文本中，此处称离轴最近的一端为一级刻度文本，较远的一端为二级刻度文本。相同的二级刻度文本会被隐藏。比如下图中的数据全是 1977 年的数据，1977 只会显示一次。

提示：由于多日期需要做数据处理后才显示到时间轴上。若想要在初始状态下获取时间轴上的数据，建议将 immediate-trigger 属性设置为 true，在 time-change 绑定的函数中获取处理后的时间。以下多日期的示例都将 immediate-trigger 属性设置为 true。

```vue demo
<template>
  <t-timeline-base
    :time-data="timeData"
    :cur-time="curTime"
    :immediate-trigger="true"
    :c-style="cStyle"
    :control-button-info="controlButtonInfo"
    @time-change="changeTime"
  />
  当前选中的时间：{{ curTime }}
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
export default defineComponent({
  setup() {
    const state = reactive({
      timeData: [
        '1977.01',
        '1977.02',
        '1977.03',
        '1977.04',
        '1977.05',
        '1977.06',
        '1977.07',
        '1977.08',
        '1977.09',
        '1977.10',
        '1977.11',
        '1977.12',
      ],
      curTime: '1977.02',
      cStyle: {
        wrapper: {
          default: {
            height: '80px',
          },
        },
        wrapperLeftMoudle: {
          default: {
            display: 'flex',
            alignItems: 'center',
          },
        },
      },
      controlButtonInfo: {
        playImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/play.png',
        pauseImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/pause.png',
      },
    })

    /**
     * 处理时间改变
     * @param param.time - 当前选中的时间
     * @param param.index - 当前选中时间的索引
     */
    function changeTime(param: { time: string; index: number }) {
      state.curTime = param.time
    }

    return {
      ...toRefs(state),
      changeTime,
    }
  },
})
</script>
```

### 时间轴文本片段折行效果 年-月-日

```vue demo
<template>
  <t-timeline-base
    :time-data="timeData"
    :cur-time="curTime"
    :c-style="cStyle"
    :immediate-trigger="true"
    :control-button-info="controlButtonInfo"
    @time-change="changeTime"
  />
  当前选中的时间：{{ curTime }}
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
export default defineComponent({
  setup() {
    const state = reactive({
      timeData: [
        '1977/01/01',
        '1977/01/02',
        '1977/01/03',
        '1977/01/04',
        '1977/01/05',
        '1977/01/06',
        '1977/01/07',
        '1977/01/08',
        '1977/01/09',
        '1977/01/10',
        '1977/01/11',
        '1977/01/12',
        '1977/01/13',
        '1977/01/14',
        '1977/01/15',
      ],
      curTime: '1977/01/02',
      cStyle: {
        wrapper: {
          default: {
            height: '120px',
          },
        },
        wrapperLeftMoudle: {
          default: {
            display: 'flex',
            alignItems: 'center',
          },
        },
      },
      controlButtonInfo: {
        playImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/play.png',
        pauseImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/pause.png',
      },
    })

    /**
     * 处理时间改变
     * @param param.time - 当前选中的时间
     * @param param.index - 当前选中时间的索引
     */
    function changeTime(param: { time: string; index: number }) {
      state.curTime = param.time
    }

    return {
      ...toRefs(state),
      changeTime,
    }
  },
})
</script>
```

### 时间轴文本片段折行效果 年-月-日-小时

当前传入时间的格式是'1977 年 01 月 01 日 00 时'，会被自动格式化为'1977-01-01 00'。

```vue demo
<template>
  <div @click="changeTimeData">点击</div>
  <div @click="changeCurTime">点击改变选中值</div>
  <t-timeline-base
    :time-data="timeData"
    :cur-time="curTime"
    :loop="false"
    :c-style="cStyle"
    :immediate-trigger="true"
    :control-button-info="controlButtonInfo"
    @time-change="changeTime"
  />
  当前选中的时间：{{ curTime }}
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
export default defineComponent({
  setup() {
    const state = reactive({
      timeData: [
        '1977年01月01日00时',
        '1977年01月01日08时',
        '1977年01月01日16时',
        '1977年01月02日00时',
        '1977年01月02日08时',
        '1977年01月02日16时',
      ],
      curTime: '1977年01月02日16时',
      cStyle: {
        wrapper: {
          default: {
            height: '120px',
            padding: '0 20px',
          },
        },
        wrapperLeftMoudle: {
          default: {
            display: 'flex',
            alignItems: 'center',
          },
        },
      },
      controlButtonInfo: {
        playImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/play.png',
        pauseImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/pause.png',
      },
    })

    /**
     * 处理时间改变
     * @param param.time - 当前选中的时间
     * @param param.index - 当前选中时间的索引
     */
    function changeTime(param: { time: string; index: number }) {
      state.curTime = param.time
    }

    const changeTimeData = () => {
      state.timeData = [
        '2022年01月01日00时',
        '2022年01月01日08时',
        '2022年01月01日16时',
        '2022年01月02日00时',
        '2022年01月02日08时',
        '2022年01月02日16时',
        '2022年01月03日00时',
        '2022年01月03日08时',
        '2022年01月03日16时',
        '2022年01月04日00时',
        '2022年01月04日08时',
      ]
    }

    const changeCurTime = () => {
      state.curTime = '2022-01-01 08'
    }

    return {
      ...toRefs(state),
      changeTime,
      changeTimeData,
      changeCurTime,
    }
  },
})
</script>
```

### 始终显示一级和二级刻度

若要始终显示一级和二级刻度，需要将 second-tick 设置为 true。

```vue demo
<template>
  <t-timeline-base
    :time-data="timeData"
    :cur-time="curTime"
    :c-style="cStyle"
    :second-tick="true"
    :control-button-info="controlButtonInfo"
    @time-change="changeTime"
  />
  当前选中的时间：{{ curTime }}
</template>
<script lang="ts">
import {
  defineComponent, reactive, toRefs, ref,
} from 'vue';

export default defineComponent({
  setup() {
    const state = reactive({
      timeData: [
        '1977-01-01',
        '1977-01-02',
        '1977-01-03',
        '1977-01-04',
        '1977-01-05',
        '1977-01-06',
        '1977-01-07',
        '1977-01-08',
        '1977-01-09',
        '1977-01-10',
        '1977-01-11',
        '1977-01-12',
        '1977-01-13',
        '1977-01-14',
        '1977-01-15',
      ],
      curTime: '1977-01-03',
      cStyle: {
        wrapper: {
          default: {
            height: '120px',
          },
        },
        wrapperLeftMoudle: {
          default: {
            display: 'flex',
            alignItems: 'center',
          },
        },
      },
      controlButtonInfo: {
        playImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/play.png',
        pauseImgUrl:
          'http://192.168.0.183:8104/visual-building/components/images/timeline-base/pause.png',
      },
    });

    /**
     * 处理时间改变
     * @param param.time - 当前选中的时间
     * @param param.index - 当前选中时间的索引
     */
    function changeTime(param: { time: string; index: number }) {
      state.curTime = param.time;
    }

    return {
      ...toRefs(state),
      changeTime,
    };
  },
});
</script>
```

## 安装

### npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

```shell script
npm i @p-base/timeline-base
yarn add @p-base/timeline-base
```

### 使用

```javascript
import TTimelineBase from '@p-base/timeline-base'
import '@p-base/timeline-base/lib/index.css'
createApp(App).use(TTimelineBase)
```

### CDN

由于公司暂时没有提供可以使用的 CDN 地址，所以目前可以在制品库中找到对应资源，下载安装包，使用 umd 包，在页面上引入 js 和 css 文件即可开始使用。
制品库地址：<http://192.168.0.112:8081/#browse/browse:npm-vue-components>

```HTML
<!-- 引入vue框架 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="lib/index.css">
<!-- 引入组件库 -->
<script src="lib/index.js"></script>
```

### 使用

```javascript
Vue.createApp().use(TTimelineBase)
```

## 属性

| 参数                | 说明                         | 类型    | 可选值         | 默认值 | 版本号 |
| ------------------- | ---------------------------- | ------- | -------------- | ------ | ------ |
| time-data           | 时间数据                     | array   | --             | []     |        |
| time-colors         | 时间数据对应的颜色           | array   | --             | []     |        |
| control-button-info | 播放按钮自定义图片信息       | object  | 属性详情见下文 | --     |        |
| cur-time            | 选中时间                     | string  | --             | ''     |        |
| auto-play           | 默认是否开始播放             | boolean | true \| false  | false  |        |
| loop                | 是否循环播放                 | boolean | true \| false  | false  |        |
| play-interval       | 播放速度（单位：ms）         | number  | --             | 3000   |        |
| interval            | 刻度标签的显示间隔           | number  | --             | 0      |        |
| step-button-visible | 步进按钮是否显示             | boolean | true \| false  | false  |        |
| inverse             | 是否反转                     | boolean | true \| false  | false  |        |
| immediate-trigger   | 事件默认是否触发             | boolean | true \| false  | false  |        |
| c-style             | 自定义样式                   | object  | 属性详情见下文 | --     |        |
| step-button-color   | 前进后退按钮不同状态下的颜色 | object  | 属性详情见下文 | --     |        |
| second-tick         | 是否始终显示一级和二级刻度   | boolean | true \|false   | false  |        |

## stepButtonColor 的属性

| 参数    | 默认值  | 说明                    |
| ------- | ------- | ----------------------- |
| default | #dee2e8 | 按钮默认状态下的颜色    |
| hover   | #02d6db | 按钮 hover 状态下的颜色 |
| disable | #3b5a84 | 按钮禁用状态下的颜色    |

## controlButtonInfo 的属性

| 参数        | 默认值 | 说明             |
| ----------- | ------ | ---------------- |
| playImgUrl  | ''     | 播放按钮图片地址 |
| pauseImgUrl | ''     | 暂停播放图片地址 |

## 颜色变量使用说明

| 颜色变量                           | 说明                      |
| ---------------------------------- | ------------------------- |
| --t-timeline-base-wrapper-bg-color | 时间轴容器背景色          |
| --t-timeline-base-bg-color         | 时间轴背景色              |
| --t-timeline-base-current-bg-color | 时间轴 current 区域背景色 |
| --t-timeline-base-tip-bg-color     | 时间轴提示框背景色        |
| --t-timeline-axis-bg-color         | 时间轴刻度背景色          |
| --t-timeline-text-color            | 时间轴文本色              |

## c-style 的属性

| 参数                      | 允许接收的状态  | 说明                                 |
| ------------------------- | --------------- | ------------------------------------ |
| wrapper                   | default         | 时间轴容器                           |
| wrapperLeftMoudle         | default         | 左侧模块样式                         |
| wrapperRightMoudle        | default         | 右侧模块样式                         |
| axisLineProgressWrappper  | default         | 轴线进度条容器样式                   |
| axisLineProgressCurrent   | default         | 轴线进度条当前进度样式               |
| axisLabel                 | default         | 轴线刻度文本样式                     |
| axisFirstLevelItem        | default、active | 轴线一级刻度样式                     |
| axisSecondLevelItem       | default、active | 轴线二级刻度样式                     |
| controlButtonPlay         | default         | 播放按钮样式                         |
| controlButtonPause        | default         | 暂停按钮样式                         |
| toolTipCurrentTimeWrapper | default         | 指示当前时间的提示框整体样式         |
| toolTipHoverWrapper       | default         | 鼠标悬停在轴线上显示的提示框整体样式 |

## 事件

| 事件名称    | 说明                                                             | 回调参数                                                                           |
| ----------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| time-change | 时间切换事件                                                     | { time: string, index: number } 当前选中时间日期，当前选中时间日期位于时间轴索引值 |
| gap-set     | 当刻度之间的间隔大小发生改变时触发，用于获取时间轴刻度之间的宽度 | 时间轴刻度之间的宽度 number 类型                                                   |

## 其他属性及用法

[继承 Element-plus 的属性及用法文档](https://element-plus.gitee.io/zh-CN/component/button.html#button-attributes)

作者：吕芷欣、杨静