vue 标签页配合el-progress进度条展示

 

项目要求：tab标签页间隔8秒切换到下一页，并且标签页内有进度条进行倒计时展示

代码

<template>
  <div>
    <!--    便签页表头-->
    <div class='listTab'>
      <div class='liststy' v-for='(item,index) in listTab' :key='index' @click='clickTba(index)'
           :class="{'current':currentIndex == index}">
        <div>
          <el-image class='iconI' :src='item.img' />
          {{ item.name }}
        </div>
      </div>
    </div>
    <!--    标签页对应内容-->
    <div class='banners'>
      <div class='items' v-for='(item,index) in itemTab' :key='index'>
        <el-image class='itemImg' :src='itemTab[currentIndex].img' />
        <div class='superContent'>
          <span class='firms'>{{ itemTab[currentIndex].title1 }}</span>{{ itemTab[currentIndex].title2 }}
          <div class='superLetter'>
            {{ itemTab[currentIndex].conter }}
          </div>
          <!--          进度条-->
          <el-progress class='decorate' :percentage='percentage<0?100:percentage' :text-inside='true'
                       :stroke-width='4' />
          <div>{{ percentage }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data: () => {
    return {
      percentage: 100, // 进度百分比
      time: 8,// 单位秒
      // tab切换
      listTab: [
        {
          name: '独立专区展示',
          img: '/home/vipserve/tab1.png'
        },
        {
          name: '快速精准推广',
          img: '/home/vipserve/tab2.png'
        },
        {
          name: '标准化SaaS服务',
          img: '/home/vipserve/tab3.png'
        },
        {
          name: 'VIP专享培训课堂',
          img: '/home/vipserve/tab4.png'
        },
        {
          name: '专注技术支持',
          img: '/home/vipserve/tab5.png'
        }
      ],
      itemTab: [
        {
          img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          title1: '企业号',
          title2: '独立专区展示',
          conter: '装配互联企业号专区，拥有专属展示页面，收录企业发布文章、TA说和案例，提升企业行业知名度。'
        }, {
          img: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
          title1: '营销中心',
          title2: '快速精准推广',
          conter: '企业销售拓客智能名片，低成本获客，同时可助力企业展示形象及产品展示。'
        }, {
          img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          title1: '工具包',
          title2: '标准化SaaS服务',
          conter: '为装配式装修同行企业提供一体化解决方案，助力企业低成本打造全流程数字化平台，实现降本提效。'
        }, {
          img: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
          title1: '培训包',
          title2: 'VIP专享培训课堂',
          conter: '装配互联VIP企业专享优质的培训服务，线上课程免费学习，并可根据项目需求，定制上门培训服务。'
        }, {
          img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          title1: '服务包',
          title2: '专注技术支持',
          conter: '致力于为企业提供更好的深化设计、BIM技术、方案制作等服务，帮助企业顺利完成项目落地实施。'
        }
      ],
      currentIndex: 0, //默认显示图片
      timer: null, //定时器
      timers: null //定时器
    }
  },
  computed: {
    // 计算当前图片位置
    current() {
      // 如果当前index等等于数组length-1 就return0 否则就当前index加1
      if (this.currentIndex == this.itemTab.length - 1) {
        return 0
      } else {
        return this.currentIndex + 1
      }
    }
  },
  mounted() {
    // 执行定时器
    this.autoPlay()
    this.onTimeChange()
  },
  methods: {
    clickTba(index) {
      this.currentIndex = index
    },
    // 定时器函数
    autoPlay() {
      this.timer = setInterval(() => {
        this.clickTba(this.current)
        this.onTimeChange()
      }, 9000)
    },
    // 进度条倒计时
    onTimeChange() {
      let me = this
      let interval = setInterval(function() {
        let str = Number((me.time / 8) * 100) //取整数
        me.percentage = str
        --me.time //每隔1s时间减1
        if (me.time < 0) {
          me.percentage = 100
          me.time = 8
          clearInterval(interval)
        }
      }, 1000)
    }
  }
}
</script>

<style lang='scss' scoped>
.iconI {
  vertical-align: middle;
}

.liststy {
  list-style: none;
  float: left;
  text-align: center;
  cursor: pointer;
  width: 20%;
  height: 3.375rem;
  line-height: 3.375rem;
  font-family: 'PingFang SC';
  font-weight: 400;
  font-size: 1rem;
  color: #323232;
}

.listTab {
  width: 75rem;
  height: 3.375rem;
  margin: 0 auto;
  color: #323232;
  font-family: 'PingFang SC';
  font-weight: 400;
  font-size: 1rem;
}

.banners {
  width: 75rem;
  height: 24.5rem;
  margin: 0 auto;
  overflow: hidden;
  background: url("/home/vipserve/backSuper.png");
  position: relative;
  font-family: 'PingFang SC';
}

.itemImg {
  width: 32.5rem;
  height: 18.25rem;
}

.items {
  text-align: left;
  position: relative;
  margin: 3.125rem 0rem 0rem 3.125rem;
}

.current {
  background: url("/home/vipserve/backTab2.png");
  background-size: 100% 100%;
  font-family: 'PingFang SC';
  font-weight: 500;
  font-size: 1rem;
  color: #2AA882;
}

.current:first-child {
  background: url("/home/vipserve/backTab1.png");
  background-size: 100% 100%;
}

.current:last-child {
  background: url("/home/vipserve/backTab3.png");
  background-size: 100% 100%;
}

.superContent {
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25rem;
  position: absolute;
  top: 4.125rem;
  right: 3.375rem;
}

.firms {
  color: #2AA882;
}

.superLetter {
  font-family: 'PingFang SC';
  width: 33.5rem;
  font-style: normal;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.5625rem;
  color: #999999;
  padding-top: 1.5rem;
}

.decorate {
  margin-top: 5rem;
  width: 3.875rem;
}
</style>

效果图