vue3+elementPlus,根据时间线组件再次封装可滑动组件

效果图：

直接上代码：

<template>
  <el-card>
    <div class="overviewTwo_div">
      <div>项目阶段</div>
      <div class="overviewTwo_timeLine" id="nav">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :hollow="activity.hollow"
            :timestamp="activity.timestamp"
          >
            {{ activity.content }}
            <el-card shadow="hover">
              <h3>{{ activity.jutiTime }}</h3>
              <p>
                {{ activity.title }}
              </p>
              <div>
                <el-button style="color: #fff" color="rgba(255, 103, 112, 1)"
                  >延期</el-button
                >
              </div>
            </el-card>
            <div class="reason" v-if="activity.reason.length > 0">
              {{ activity.reason }}
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'overviewTwo', // 项目概览
};
</script>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { MoreFilled } from '@element-plus/icons-vue';
import { addEvent } from '@better-scroll/shared-utils';

const state = reactive<any>({});
const {} = toRefs(state);

const activities: any = [
  {
    content: '已完成',
    timestamp: '2018-04-12',
    jutiTime: '2023-02-10 ~ 2023-3-10',
    type: 'primary',
    hollow: true,
    title:
      '打撒发发大水就发货打算开始怀旧服等哈就开始很费劲打了是客户防静电拉克丝很费劲大会就发了大会发链接侃大山发来的卡死回复的啦就开始恢复了大卡司恢复了打算开发FDA撒',
    reason: '因硬件供应商备货期延迟导致无法进行现场安装',
  },
  {
    content: '进行中',
    timestamp: '2018-04-12',
    jutiTime: '2023-02-10 ~ 2023-3-10',
    type: 'primary',
    hollow: true,
    title:
      '打撒发发大水就发货打算开始怀旧服等哈就开始很费劲打了是客户防静电拉克丝很费劲大会就发了大会发链接侃大山发来的卡死回复的啦就开始恢复了大卡司恢复了打算开发FDA撒',
    reason: '因硬件供应商备货期延迟导致无法进行现场安装',
  },
  {
    content: '未开始',
    timestamp: '2018-04-12',
    jutiTime: '2023-02-10 ~ 2023-3-10',
    type: 'primary',
    hollow: true,
    title:
      '打撒发发大水就发货打算开始怀旧服等哈就开始很费劲打了是客户防静电拉克丝很费劲大会就发了大会发链接侃大山发来的卡死回复的啦就开始恢复了大卡司恢复了打算开发FDA撒',
    reason: '因硬件供应商备货期延迟导致无法进行现场安装',
  },
  {
    content: '已完成',
    timestamp: '2018-04-12',
    jutiTime: '2023-02-10 ~ 2023-3-10',
    type: 'primary',
    hollow: true,
    title:
      '打撒发发大水就发货打算开始怀旧服等哈就开始很费劲打了是客户防静电拉克丝很费劲大会就发了大会发链接侃大山发来的卡死回复的啦就开始恢复了大卡司恢复了打算开发FDA撒',
    reason: '因硬件供应商备货期延迟导致无法进行现场安装',
  },
  {
    content: '已完成',
    timestamp: '2018-04-12',
    jutiTime: '2023-02-10 ~ 2023-3-10',
    type: 'primary',
    hollow: true,
    title:
      '打撒发发大水就发货打算开始怀旧服等哈就开始很费劲打了是客户防静电拉克丝很费劲大会就发了大会发链接侃大山发来的卡死回复的啦就开始恢复了大卡司恢复了打算开发FDA撒',
    reason: '因硬件供应商备货期延迟导致无法进行现场安装',
  },
  {
    content: '进行中',
    timestamp: '2018-04-12',
    jutiTime: '2023-02-10 ~ 2023-3-10',
    type: 'primary',
    hollow: true,
    title:
      '打撒发发大水就发货打算开始怀旧服等哈就开始很费劲打了是客户防静电拉克丝很费劲大会就发了大会发链接侃大山发来的卡死回复的啦就开始恢复了大卡司恢复了打算开发FDA撒',
    reason: '因硬件供应商备货期延迟导致无法进行现场安装',
  },
  {
    content: '未开始',
    timestamp: '2023-04-13',
    jutiTime: '2023-02-10 ~ 2023-3-10',
    type: 'primary',
    hollow: true,
    title:
      '打撒发发大水就发货打算开始怀旧服等哈就开始很费劲打了是客户防静电拉克丝很费劲大会就发了大会发链接侃大山发来的卡死回复的啦就开始恢复了大卡司恢复了打算开发FDA撒',
    reason: '因硬件供应商备货期延迟导致无法进行现场安装',
  },
  {
    content: '进行中',
    timestamp: '2018-04-12',
    jutiTime: '2023-02-10 ~ 2023-3-10',
    type: 'primary',
    hollow: true,
    title:
      '打撒发发大水就发货打算开始怀旧服等哈就开始很费劲打了是客户防静电拉克丝很费劲大会就发了大会发链接侃大山发来的卡死回复的啦就开始恢复了大卡司恢复了打算开发FDA撒',
    reason: '因硬件供应商备货期延迟导致无法进行现场安装',
  },
  {
    content: '未开始',
    timestamp: '2023-04-13',
    jutiTime: '2023-02-10 ~ 2023-3-10',
    type: 'primary',
    hollow: true,
    title:
      '打撒发发大水就发货打算开始怀旧服等哈就开始很费劲打了是客户防静电拉克丝很费劲大会就发了大会发链接侃大山发来的卡死回复的啦就开始恢复了大卡司恢复了打算开发FDA撒',
    reason: '因硬件供应商备货期延迟导致无法进行现场安装',
  },
  {
    content: '未开始',
    timestamp: '2023-04-13',
    jutiTime: '2023-02-10 ~ 2023-3-10',
    type: 'primary',
    hollow: true,
    title:
      '打撒发发大水就发货打算开始怀旧服等哈就开始很费劲打了是客户防静电拉克丝很费劲大会就发了大会发链接侃大山发来的卡死回复的啦就开始恢复了大卡司恢复了打算开发FDA撒',
    reason: '因硬件供应商备货期延迟导致无法进行现场安装',
  },
  {
    content: '未开始',
    timestamp: '2023-04-13',
    jutiTime: '2023-02-10 ~ 2023-3-10',
    type: 'primary',
    hollow: true,
    title:
      '打撒发发大水就发货打算开始怀旧服等哈就开始很费劲打了是客户防静电拉克丝很费劲大会就发了大会发链接侃大山发来的卡死回复的啦就开始恢复了大卡司恢复了打算开发FDA撒',
    reason: '因硬件供应商备货期延迟导致无法进行现场安装',
  },
  {
    content: '未开始',
    timestamp: '2023-04-13',
    jutiTime: '2023-02-10 ~ 2023-3-10',
    type: 'primary',
    hollow: true,
    title:
      '打撒发发大水就发货打算开始怀旧服等哈就开始很费劲打了是客户防静电拉克丝很费劲大会就发了大会发链接侃大山发来的卡死回复的啦就开始恢复了大卡司恢复了打算开发FDA撒',
    reason: '因硬件供应商备货期延迟导致无法进行现场安装',
  },
  {
    content: '未开始',
    timestamp: '2023-04-13',
    jutiTime: '2023-02-10 ~ 2023-3-10',
    type: 'primary',
    hollow: true,
    title:
      '打撒发发大水就发货打算开始怀旧服等哈就开始很费劲打了是客户防静电拉克丝很费劲大会就发了大会发链接侃大山发来的卡死回复的啦就开始恢复了大卡司恢复了打算开发FDA撒',
    reason: '因硬件供应商备货期延迟导致无法进行现场安装',
  },
  {
    content: '未开始',
    timestamp: '2023-04-13',
    jutiTime: '2023-02-10 ~ 2023-3-10',
    type: 'primary',
    hollow: true,
    title:
      '打撒发发大水就发货打算开始怀旧服等哈就开始很费劲打了是客户防静电拉克丝很费劲大会就发了大会发链接侃大山发来的卡死回复的啦就开始恢复了大卡司恢复了打算开发FDA撒',
    reason: '因硬件供应商备货期延迟导致无法进行现场安装',
  },
];

const getaddEvent = () => {
  let flag: any; // 鼠标按下
  let downX: any; // 鼠标点击的x下标
  let scrollLeft: any; // 当前元素滚动条的偏移量
  let nav = document.getElementById('nav') as any;
  nav.addEventListener('mousedown', function (event: any) {
    flag = true;
    downX = event.clientX; // 获取到点击的x下标
    scrollLeft = this.scrollLeft; // 获取当前元素滚动条的偏移量
  });
  nav.addEventListener('mousemove', function (event: any) {
    if (flag) {
      // 判断是否是鼠标按下滚动元素区域
      // 获取移动的x轴
      let moveX = event.clientX;
      // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
      let scrollX = moveX - downX;
      // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离
      this.scrollLeft = scrollLeft - scrollX;
      console.log(scrollX);
    }
  });
  // 鼠标抬起停止拖动
  nav.addEventListener('mouseup', function () {
    flag = false;
  });
  // 鼠标离开元素停止拖动
  nav.addEventListener('mouseleave', function (event: any) {
    flag = false;
  });
};

onMounted(() => {
  getaddEvent();
});
</script>

    <style lang="scss">
.overviewTwo_div {
  width: 100%;
  .overviewTwo_timeLine {
    overflow-x: auto;
    white-space: nowrap; // 默认文字一行
    cursor: pointer;
    -webkit-user-select: none; // 不让鼠标选中文字
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .overviewTwo_timeLine::-webkit-scrollbar {
    display: none;
  }

  .el-timeline {
    display: flex;
    margin: 10px 10px;
    margin-top: 60px;
    .el-timeline-item {
      .el-timeline-item__tail {
        position: absolute;
        left: 5px;
        top: 5px;
        width: 100%;
        border-top: 2px solid #e4e7ed;
        border-left: 0;
      }
      .el-timeline-item__wrapper {
        margin: 0;
        padding: 0;
        position: relative;
        top: 15px;
        p {
          white-space: normal !important; // 文字换行
          width: 260px;
        }
        .el-card__body {
          // padding: 10px 0 !important;
        }
        .el-timeline-item__timestamp {
          position: absolute;
          left: 0;
          top: -50px;
          font-size: 20px;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }
  .el-card {
    margin: 2px 2px;
    border: 0px;
  }
  .reason {
    width: 260px;
    word-break: break-all;
    word-wrap: break-word;
    border: 2px dashed #ff0000;
    white-space: normal !important;
    margin: 10px 20px;
    padding: 10px 10px;
  }
}
</style>