Vue怎么實(shí)現(xiàn)時(shí)間軸功能

這篇文章主要介紹了Vue怎么實(shí)現(xiàn)時(shí)間軸功能的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Vue怎么實(shí)現(xiàn)時(shí)間軸功能文章都會(huì)有所收獲，下面我們一起來看看吧。

<template>
  <div class="container">
    <div class="content">
      <div class="coin" v-for="(item,index1) in Math.ceil((list.length+1)/4)" :key="index1" v-show="isShow==index1">
        <div class="xs_one"></div>
        <div
          class="coinAll"
          v-for="(item, index) in list"
          :key="index"
          :class="{ one: index%4==0 }"
          v-show="index<(index1+1)*4 && index+1>(index1)*4"
        >
          <span
            :class="{
              two: (index + 1) % 2 == 0,
              text_active: index == isIndex,
            }"
          >
            {{ item }}
          </span>
          <div class="xs" :class="{ xs_active: index == isIndex }"></div>
          <img src="../assets/img/coin1.png" alt="" v-show="index == isIndex" />
          <img src="../assets/img/coin2.png" alt="" v-show="index != isIndex" />
        </div>
      </div>
      <div class="paging" :>
        <div class="pagings" v-for="(item,index1) in Math.ceil((list.length+1)/4)" :key="index1" @click="tabList(index1)" :class="{is_activ:isShow==index1}">{{index}}</div>
      </div>
    </div>
  </div>
</template>
 
 
<script>
export default {
  data() {
    return {
      list: ["實(shí)施方案", "任務(wù)書", "中期檢查", "項(xiàng)目驗(yàn)收", "分頁功能1","分頁功能1","分頁功能1","分頁功能1","分頁功能2"], //列表
      isIndex: 0, //高亮顯示
      isShow: 1, //顯示
    };
  },
  methods:{
    tabList(idx){
      this.isShow=idx
    }
  }
};
</script>
 
 
<style scoped>
.content {
  width: 400px;
  height: 120px;
  background: rgb(9, 27, 70);
  position: relative;
}
.paging{
  height: 20px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%);
}
.paging div{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgb(120, 120, 120);
  float: left;
  margin-left: 5px;
}
.coin {
  width: 100%;
  height: 80px;
  background: rgb(9, 27, 70);
  position: relative;
  overflow-x: hidden;
}
.xs_one {
  width: 100%;
  height: 5px;
  background: rgb(61, 183, 270);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}
.coin .coinAll {
  width: 100px;
  height: 100%;
  float: left;
  position: relative;
}
 
.coin .one {
  margin-left: -50px;
}
.coin .coinAll img {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
}
.coin .coinAll .xs {
  width: 100%;
  height: 5px;
  background: rgb(61, 183, 270);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}
 
.coin .coinAll span {
  width: 100%;
  color: #fff;
  font-size: 16px;
  position: absolute;
  top: 5px;
}
.coin .coinAll .two {
  width: 100%;
  color: #fff;
  font-size: 16px;
  position: absolute;
  top: 55px;
}
 
/* 文字高亮 */
.coin .coinAll .text_active {
  color: rgb(245, 189, 39);
}
 
/* 線條高亮 */
.coin .coinAll .xs_active {
  background: rgb(245, 189, 39);
}
.paging .is_activ{
  background: rgb(26, 82, 229);
}
</style>

效果如圖

新增分頁

關(guān)于“Vue怎么實(shí)現(xiàn)時(shí)間軸功能”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“Vue怎么實(shí)現(xiàn)時(shí)間軸功能”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。