Vue3时间轴（TimeLine/分页和播放暂停功能）

对Element-plus滑块组件的二次封装

基于Vue3（3.4.27），对element-plus(2.7.4)中slider滑块组件的二次封装。其中，用到了element-plus中的部分icon图标。

组件主要是对时间节点进行分页展示和播放，父组件监听到当前时间的改变，从而触发相应的业务逻辑。

效果

自定义属性

• bgcolor?:String  (可选)  值: 'light' | 'dark'  介绍：控制主题颜色 默认为'dark'
• second?:Number  (可选)  介绍：控制自动播放速度 默认为1000
• yearArr:String[]  (必须)  介绍：内容数组

• handleNowValueChange:Function  (必须)  介绍：改变当前值的函数，由父组件定义，供子组件使用

代码

父组件

<template>
  <div class="TimeLineBox">
    <h3>TimeLIne - {
  { nowValue }}</h3>

    <div class="TimeLineBox_content">
      <TimeLine
        bgcolor="light"
        second="1200"
        :nowValue="nowValue"
        :yearArr="yearArr"
        @handleNowValueChange="handleNowValueChange"
      >
      </TimeLine>
    </div>
  </div>
</template>

<script setup>
// vue
import {
  ref,
  computed,
  watch,
  reactive,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";

// 组件
import TimeLine from "@/components/TimeLine.vue";

//父组件
// 有关时间线 变量
let nowValue = ref("");
let yearArr = ref([]);

// 改变nowValue 重要函数
const handleNowValueChange = (val) => {
  console.log("时间线改变", val);
  nowValue.value = val;
};

//监听
watch(nowValue, (newValue, oldValue) => {
  console.log(newValue, oldValue, "我是父组件");
});

//赋值
onBeforeMount(() => {
  setTimeout(() => {
    yearArr.value = [
      "2024-1",
      "2024-2",
      "2024-3",
      "2024-4",
      "2024-5",
      "2024-6",
      "2024-7",
      "2024-8",
      "2024-9",
      "2024-10",
      "2024-11",
      "2024-12",
    ];
  }, 100);
});
</script>

<style lang="scss" scoped>
.TimeLineBox {
  width: 100%;
  heigh