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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
2020-08-12 vue3.0体验版生命周期
2020-08-12 vue+scss混合(mixins)使用(css代码的vuex(公共管理))
2020-08-12 vue+mockjs模拟用户登录接口(高仿书旗)