vue實現(xiàn)橫向時間軸組件方式

更新時間：2022年12月05日 08:40:56 作者：HELLO_小仙女~

這篇文章主要介紹了vue實現(xiàn)橫向時間軸組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

前言

項目中有需要用到橫向時間軸，網(wǎng)上大部分組件不滿足功能需要，于是自己寫了一個。先上簡單的demo。

功能

默認獲取初始數(shù)據(jù)顯示對應(yīng)的時間軸和時間點。
當(dāng)超出屏幕后，滑動滾動條加載更多頁，類似分頁加載。
某個大的時間軸節(jié)點鼠標(biāo)放入需要顯示相關(guān)信息。
某兩個大節(jié)點之間會有子節(jié)點出現(xiàn)。
每個子節(jié)點會有對應(yīng)的子節(jié)點詳情內(nèi)容展示，無詳情內(nèi)容介紹的只展示子節(jié)點。

效果圖

vue時間軸視頻效果

在這里插入圖片描述

代碼

Timeline組件封裝

<template>
  <ul class="timeline-wrapper" @scroll="scrollEvent">
    <li class="timeline-item" v-for="item in timelineList" :key="item.id">
      <div class="timeline-box">
        <div class="out-circle">
          <div class="in-circle"></div>
          <div class="timeline-date">
            <el-popover
              placement="bottom"
              title="標(biāo)題"
              width="200"
              trigger="hover"
              :content="item.content"
            >
              <el-button type="text" slot="reference" class="father-text">{{
                item.date
              }}</el-button>
            </el-popover>
          </div>
        </div>
        <div
          class="long-line"
          v-show="item.isShow"
          :style="`width:${
            item.children ? (item.children.length + 1) * 100 : 1 * 100
          }px`"
        >
          <div
            v-for="(subItem, index) in item.children"
            :key="subItem.id"
            class="sub-item-box"
          >
            <span>{{ subItem.name + ":" + subItem.num }}人</span>
            <!-- 根據(jù)奇數(shù)偶數(shù)來判斷向上還是向下 -->
            <div
              :class="`sub-line-box ${
                index % 2 == 0 ? 'top-line-box' : 'bottom-line-box'
              }`"
              v-show="subItem.content"
            >
              <div
                :class="`children-line-box ${
                  index % 2 == 0 ? 'top-line' : 'bottom-line'
                }`"
              ></div>
              <div
                :class="`children-box ${
                  index % 2 == 0 ? 'top-children-box' : 'bottom-children-box'
                }`"
              >
                {{ subItem.content }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</template>

<script type="text/babel">
import Vue from "vue";
export default Vue.component("Timeline", {
  name: "Timeline",
  props: {
    timelineList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  mounted() {},
  methods: {
    scrollEvent(e) {
      this.$emit("scrollEvent", e);
    },
    handleBottomClick() {
      this.$emit("handleBottomClick");
    },
  },
});
</script>

<style scoped lang="scss">
ul.timeline-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
  padding: 200px 20px;
  white-space: nowrap;
  overflow-x: scroll;
}

/* 時間線 */
.timeline-item {
  position: relative;
  display: inline-block;
  .timeline-box {
    text-align: center;

    // position: absolute;
    display: flex;
    align-items: center;
    .out-circle {
      width: 16px;
      height: 16px;
      background: rgba(14, 116, 218, 0.3);
      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.4);
      /*opacity: 0.1;*/
      border-radius: 50%;
      display: flex;
      align-items: center;
      cursor: pointer;
      .in-circle {
        width: 8px;
        height: 8px;
        margin: 0 auto;
        background: rgba(14, 116, 218, 1);
        border-radius: 50%;
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
      }
      .timeline-date {
        color: #333;
        margin-top: 40px;
        .father-text {
          font-weight: 900;
          font-size: 16px;
          margin-left: -15px;
        }
      }
    }

    .long-line {
      // width: 300px;
      height: 2px;
      background: rgba(14, 116, 218, 0.2);
      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: revert;
      justify-content: space-around;
      .sub-item-box {
        margin-top: -20px;
        position: relative;
        .sub-line-box {
          // cursor: pointer;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .children-line-box {
            width: 0px;
            border-left: 1px solid rgba(14, 116, 218, 0.3);
          }
          .children-box {
            flex-wrap: wrap;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid rgba(14, 116, 218, 0.3);
            white-space: break-spaces;
            text-align: center;
            padding: 5px;
          }
        }
        .top-line-box {
          margin-top: -100px;
          height: 60px;
        }
        .bottom-line-box {
          margin-top: 5px;
          height: 150px;
        }
        .top-line {
          height: 65px;
        }
        .bottom-line {
          height: 120px;
        }
        .top-children-box {
          margin-top: -90px;
          // height: 30px;
          width: 100px;
        }
        .bottom-children-box {
          // height: 120px;
          width: 150px;
        }
      }
    }
  }

  .timeline-content {
    box-sizing: border-box;
    margin-left: 20px;
    height: 106px;
    padding: 0 0 0 20px;
    text-align: left;
    margin-bottom: 30px;

    .timeline-title {
      font-size: 14px;
      word-break: break-all;
      margin-bottom: 16px;
      color: #333;
      font-weight: 500;
      /*display: inline;*/
    }
    .timeline-desc {
      font-size: 14px;
      color: #999999;
    }
  }
}

.timeline-item:last-of-type .timeline-content {
  margin-bottom: 0;
}
</style>

父組件引用：

<template>
  <Timeline :timelineList="timeLineArr" @scrollEvent="scrollEvent" />
</template>

<script>
import Timeline from "@/components/Timeline";
export default {
  components: {
    Timeline,
  },
  computed: {},
  data() {
    return {
      nomore: false,
      // 初始話模擬數(shù)據(jù)，數(shù)據(jù)較多時即可，形成滾動條。
      timeLineArr: [
        {
          id: 1,
          date: "2015",
          title: "2015",
          content: "2015年初，團隊在北京注冊公司",
          isShow: true,
          children: [],
        },
        {
          id: 2,
          date: "2016",
          title: "2016",
          content: "2016年，公司成立銷售團隊",
          isShow: true,
          children: [
            {
              name: "創(chuàng)始團隊",
              num: 5,
              content: "前期公司規(guī)劃",
            },
          ],
        },
        {
          id: 3,
          date: "2017",
          title: "2017",
          content: "2017年，公司決定創(chuàng)建自有品牌，進行規(guī)模擴招團隊",
          isShow: true,
          children: [
            {
              name: "銷售部",
              num: 10,
              content: "負責(zé)市場開發(fā)",
            },
            {
              name: "技術(shù)部",
              num: 20,
              content: "前端：5人，后端10人，測試5人",
            },
          ],
        },
        {
          id: 4,
          date: "2018",
          title: "2018",
          content: "2018年，新增兩個部門",
          isShow: true,
          children: [
            {
              name: "人力資源部",
              num: 3,
              content: "負責(zé)人才招聘",
            },
            {
              name: "財務(wù)部",
              num: 2,
              content: "財務(wù)結(jié)算",
            },
            {
              name: "總裁辦",
              num: 2,
              content: "",
            },
          ],
        },
        {
          id: 5,
          date: "2019",
          title: "2019",
          content: "2019年",
          isShow: true,
          children: [
            {
              name: "商務(wù)企劃部",
              num: 2,
              content: "對外合作",
            },
          ],
        },
      ],
    };
  },
  methods: {
  // 滾動監(jiān)聽
    scrollEvent(e) {
      if (
        e.srcElement.scrollLeft + e.srcElement.clientWidth >=
        e.srcElement.scrollWidth
      ) {
        console.log("嘿嘿我在底部觸發(fā)了");
        // 這里正常請求數(shù)據(jù)即可
        let data = [
          {
            id: 12,
            date: "2020",
            title: "2020",
            content: "2020年，受全球疫情影響，公司暫未擴招人員",
            isShow: true,
            children: [],
          },
          {
            id: 22,
            date: "2021",
            title: "2021",
            content: "公司被xxx投資公司注入資本1000萬，公司天使輪融資成功",
            isShow: true,
            children: [
              {
                name: "倉儲部",
                num: 30,
                content: "負責(zé)貨物存儲",
              },
              {
                name: "物流部",
                num: 40,
                content: "負責(zé)自有配送",
              },
            ],
          },
          {
            id: 23,
            date: "2022",
            title: "2022",
            content: "公司進入A輪融資，公司被xx投資公司注入資本8000萬。",
            isShow: false,
            children: [],
          },
        ];
        if (!this.nomore) {
          this.timeLineArr[this.timeLineArr.length - 1].isShow = true;
          this.timeLineArr.push(...data);
          this.nomore = true;
        }
      }
    },
  },
};
</script>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: