TimeSlider时间轴

时间轴

基础用法

<template>
    <TimeSlider
      :datas="timeDatas"
      :max-num="5"
      :active-item="timeDatas[0]"
      :play-step="3000"
      name="时间轴"
      @change-item="updateTime"
    ></TimeSlider>
</template>

<script setup lang="ts">
    const timeDatas = [
     '2024-01',
     '2024-02',
     '2024-03',
     '2024-04',
     '2024-05',
     '2024-06',
    ];
    const updateTime = (val: string) => {
        console.log('调整了时间轴', val);
    };
</script>

<style lang="scss" scoped>
.cus-tool {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 600px;
}
</style>

属性参数

属性名	说明	类型	默认值	Required
datas	时间轴数据项	Array(string)	-	true
maxNum	显示时间轴数据项最大数量	Number	-	false
active-item	初始显示的数据项	String	-	false
play-step	自动播放时间间隔	Number	5000	-
name	组件名	String	-	false

方法事件

事件名	说明	回调参数
@change-item	时间轴监听事件	当前时间轴数据项