vue 多时间段范围选择及回显 组件封装

 

<template>
    <div class="flex-col">
        <ul>
            <li v-for="(item,index) in classActiveList"  :key="index"  >
            <!-- @click="toggleSelection(item.id)" -->
                <div  :style="{ backgroundColor: item.isSelected ? '#3bbe9b' : '' }"></div>
            </li>
        </ul>
        <div class="num">
            <span>0</span>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>10</span>
            <span>11</span>
            <span>12</span>
            <span>13</span>
            <span>14</span>
            <span>15</span>
            <span>16</span>
            <span>17</span>
            <span>18</span>
            <span>19</span>
            <span>20</span>
            <span>21</span>
            <span>22</span>
            <span>23</span>
            <span>24</span>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
                timeIntervals:[Object],
        },
        data() {
            return {
                timeLine: {
                    flag: 0,
                    preid: -1,
                    idList: [{},
                        {
                            id: 0,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 1,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 2,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 3,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 4,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 5,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 6,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 7,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 8,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 9,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 10,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 11,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 12,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 13,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 14,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 15,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 16,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 17,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 18,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 19,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 20,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 21,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 22,
                            isSelected: false,
                        },
                        {},
                        {
                            id: 23,
                            isSelected: false,
                        },
                        {}
                    ]
                }
            };
        },
        computed:{
            classActiveList(){
                let activeTime = this.getTimeRangeArray(this.timeIntervals.beginTime,this.timeIntervals.endTime)
                activeTime.pop()
                let timeArr = this.timeLine.idList.map((res,index)=>{
                    if(activeTime.includes(res.id)){
                        res.isSelected = true
                    }
                    return res
                })
                return timeArr
            },
        },
        methods: {
            toggleSelection(id) {
                this.timeLine.idList.forEach(item => {
                    if (item.id === id) {
                        item.isSelected = !item.isSelected;
                    }
                });
            },
            getTimeRangeArray(startTimeStr, endTimeStr) {  
              const startTime = parseInt(startTimeStr.split(':')[0], 10);  
              const endTime = parseInt(endTimeStr.split(':')[0], 10);  
              let result = [];  
              if (endTime < startTime) {  
                  for (let hour = startTime; hour <= 23; hour++) {  
                      result.push(hour);  
                  }  
                  for (let hour = 0; hour <= endTime; hour++) {  
                      result.push(hour);  
                  }  
              } else {  
                  for (let hour = startTime; hour <= endTime; hour++) {  
                      result.push(hour);  
                  }  
              }  
              return result;  
            }
        }
    };
</script>
<style lang="scss" scoped>
    .flex-col {
        display: flex;
        margin-bottom: 0.69vw;
        flex-flow: column nowrap;
    }

    ul {
        height: 1.39vw;
        margin-bottom: 0vw;
        padding: 0.69vw 1.32vw;
        display: flex;
        flex-flow: row nowrap;

        li {
            cursor: pointer;
            list-style: none;
            float: left;
            height: 1.39vw;
            padding: 0.42vw 0;
        }

        li:nth-child(even) {
            div {
                width: 1.94vw;
                height: 0.56vw;
                margin-top: 0.14vw;
                background-color: rgb(232, 234, 236);
            }
        }

        li:nth-child(odd) {
            div {
                width: 0.49vw;
                height: 0.69vw;
                border-radius: 50%;
                margin-top: 0.07vw;
                border: 0.07vw solid rgb(59, 190, 155);
            }
        }
    }

    .num {
        height: 100%;
        display: flex;
        flex-flow: row nowrap;
        padding-left: 1.25vw;
        margin-top: 0.69vw;
        span {
            display: inline-block;
            width: 2.42vw;
            line-height: 1.5;
            font-size: 0.83vw;
        }

        span:last-child {
            margin-right: 0vw;
        }
    }
</style>