vue实现 24小时刻度间断显示展示

根据24小时刻度线将工作时段进行表示展示

实现出发点，即利用组件的进度条，将24段div包裹的进度条组装成一个完整刻度线（生成一个组件，通过for循环遍历出来）
实现效果图：

实现代码，封装内部组件timebar.vue

<template>
    <div>   
        <span >{{time}}</span>
        <div class="bar">
        <q-linear-progress  size="10px"  :value="progress" />
        </div>
    </div>    
</template>

<script>
export default {
    props:{
        time:{type:Number},
       
    },
    data() {
        return {
            progress: 0,
        }
    },

    methods: {
        setFull(){
            this.progress = 1;
        },
    },
}
</script>
<style lang="scss" scoped>
    .bar{
        width:30px;
        height: 10px;
        border-right: 1px solid black;
        margin-top:4px;
    }
</style>

在父组件中定义组件名称，并for循环处对应的效果：

<q-card-section class="q-pt-none">
 <div class="container" v-for="(item,index) in validTimeList" :key="index"  >
    <div style="marginTop:18px;marginRight:18px;width:16%">{{item.date_s.substring(0,10)}}<span style="marginLeft:16px;">{{item.day_time}}</span></div>
    <div v-for="(item,tkey) in 24" :key="tkey">
      <Timebar :ref="`bar_${index}_${tkey+1}`" :time="tkey+1"  />
    </div>
  </div>
</q-card-section>

后端返回的vaildTimeList的数据的格式如下图所示：

ref的值进行双重组合命名为保证名称不重复，在v-for循环下的ref类型会被转化为数组形式，因此取值的时候需要通过[0]进行精确取值；

js取值代码实现功能：

this.validTimeList.forEach((item,index)=>{
    if(item.time.length == 0){
      return 
    }else {
      item.time.forEach(items=>{
        this.$nextTick(()=>{
            this.$refs[`bar_${index}_${items.hour}`][0].setFull();
        })
      })
    }
  })

• 使用vue中的nextTick的主要解决获取不到dom的报错；