<template> <div> <ul> <li v-for="(item,index) in timeLine.idList" :key="index" iselected="0" @mousemove="item.id != undefined ? move_li($event) : ''" @mousedown="item.id != undefined ? down_li() : ''" @mouseup="item.id != undefined ? up_li() : ''" :id="item.id != undefined ? item.id : ''" > <div :id="item.id != undefined ? item.id : ''" iselected="0"></div> </li> </ul> <div> <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 { data() { return { timeLine: { flag: 0, preid: -1, idList: [ {}, { id: 0 }, {}, { id: 1 }, {}, { id: 2 }, {}, { id: 3 }, {}, { id: 4 }, {}, { id: 5 }, {}, { id: 6 }, {}, { id: 7 }, {}, { id: 8 }, {}, { id: 9 }, {}, { id: 10 }, {}, { id: 11 }, {}, { id: 12 }, {}, { id: 13 }, {}, { id: 14 }, {}, { id: 15 }, {}, { id: 16 }, {}, { id: 17 }, {}, { id: 18 }, {}, { id: 19 }, {}, { id: 20 }, {}, { id: 21 }, {}, { id: 22 }, {}, { id: 23 }, {} ] } }; }, methods: { down_li(e) { this.timeLine.flag = 1; }, up_li() { this.timeLine.flag = 0; this.timeLine.preid = -1; }, move_li(e) { if (this.timeLine.flag == 0) { return; } var id = e.target.getAttribute('id'); if (id == undefined) { return; } id = parseInt(id); // 避免重复获取 ID，每个时间段都只获取一次 ID if (this.timeLine.preid == id) { return; } // 避免滑动时闪烁 this.timeLine.preid = id; var iselected = $('#' + id).attr('iselected'); if (iselected == 1) { $("#"+id).children('div').css('background-color',''); $("#"+id).attr('iselected', '0'); } else { $("#"+id).children('div').css('background-color','#3bbe9b'); $("#"+id).attr('iselected', '1'); } }, // 处理提交至后台数据的时间格式为 start : end timeLineSub() { var preid = -1; var start; var count = 0; var timeArr = []; $('li[iselected=1]').each(function(index, value) { var id = value.id; if (preid == -1) { preid = id; start = id; count++; return; } if (preid == id - 1) { count++; } else { if (count > 0) { timeArr.push(start + ':' + count); } start = id; count = 1; } preid = id; }); timeArr.push(start + ':' + count); this.timeRange = timeArr.join(','); } } }; </script> <style lang="less" scoped> html, body { margin: 0; padding: 0; ul { height: 20px; margin-bottom: 0px; padding: 10px 19px; li { cursor: pointer; list-style: none; float: left; height: 20px; padding: 6px 0; } li:nth-child(even) { div { width: 28px; height: 5px; margin-top: 2px; background-color: rgb(232, 234, 236); } } li:nth-child(odd) { div { width: 7px; height: 7px; border-radius: 50%; margin-top: 1px; border: 1px solid rgb(59, 190, 155); } } } .num { height: 100%; padding-left: 20px; margin-top: 2px; span { display: inline-block; width: 9px; height: 7px; font-size: 12px; margin-right: 23px; } span:last-child { margin-right: 0px; } } } </style>
效果图如下：
