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>
