<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>
标签:flex,vue,false,回显,height,isSelected,vw,封装,id From: https://www.cnblogs.com/kaijiangyugty/p/18354982