可拖动的时间轴(vue3+ts使用element-plus的Slider滑块封装)

以下是一个简化的Vue 3和TypeScript中使用Element Plus的ElSlider组件来创建可拖动时间轴组件的示例：

<template>
  <el-slider
    v-model="timeValue"
    :min="minTime"
    :max="maxTime"
    @change="handleTimeChange"
  ></el-slider>
</template>
 
<script lang="ts">
import { ref, defineComponent } from 'vue';
import { ElSlider } from 'element-plus';
 
export default defineComponent({
  components: {
    ElSlider,
  },
  setup() {
    const timeValue = ref(0);
    const minTime = ref(0);
    const maxTime = ref(24);
 
    const handleTimeChange = (value: number) => {
      console.log('时间已更改为：', value);
    };
 
    return {
      timeValue,
      minTime,
      maxTime,
      handleTimeChange,
    };
  },
});
</script>
 
<style>
/* 在这里添加样式 */
</style>

这个组件使用了el-slider来创建一个可以拖动的时间轴，其中v-model绑定了一个响应式数据timeValue，min和max属性分别设置了时间轴的最小值和最大值，@change事件在拖动滑块时触发并执行handleTimeChange方法。这个例子提供了一个基本框架，可以根据具体需求进行扩展和定制。