封装了关于时间轴的组件，有时候统计页面会用到。
效果图：
时间轴分为2种，一种是time-axis：范围选择模式，一种是date-axis：步长选择模式。
代码中涉及到的工具类和图片资源，请移步页面底部的gitee地址下载源码。
time-axis：
1 <template> 2 <div class="timeline" :style="{ 'background-color': themeObject.backgroudColor }"> 3 <div class="start"><input v-model="st" @keyup="excute" :style="{ color: themeObject.color }" :disabled="interactive.inputDisabled" /></div> 4 <div ref="line" class="line"> 5 <div ref="pgs" class="progress" :style="{ 'background-color': themeObject.progressColor }"> 6 <div ref="slide" class="slidebar" :style="{ width: slideWidth + 'px', left: lbarLeft + 'px', background: themeObject.slideBackground }"></div> 7 <div ref="lbar" class="leftbar" :style="{ left: lbarLeft + 'px', 'z-index': lzindex, 'background-color': themeObject.barColor }"></div> 8 <div ref="rbar" class="rightbar" :style="{ left: rbarLeft + 'px', 'z-index': rzindex, 'background-color': themeObject.barColor }"></div> 9 </div> 10 </div> 11 <div class="end"><input v-model="et" @keyup="excute" :style="{ color: themeObject.color }" :disabled="interactive.inputDisabled" /></div> 12 </div> 13 </template> 14 15 <script> 16 import { debounce } from '../../../src/utils'; 17 18 const reg = new RegExp( 19 /(([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29)$/ 20 ); 21 22 const TYPE_LEFT = 0; 23 const TYPE_RIGHT = 1; 24 const TYPE_CENTER = 2; 25 // const MAX_DAYS = 90 26 27 const BAR_TYPE_LEFT = 0x01; 28 const BAR_TYPE_RIGHT = 0x02; 29 30 const THEME_DARK = 'dark'; 31 const THEME_LIGHT = 'light'; 32 33 export default { 34 name: 'LiloTimeAxis', 35 model: { 36 prop: 'data', 37 event: 'changed' 38 }, 39 props: { 40 data: { 41 type: Object, 42 required: false, 43 default() { 44 return { 45 startTime: null, 46 endTime: null 47 }; 48 } 49 }, 50 min: { 51 type: String, 52 required: true, 53 default: null 54 }, 55 max: { 56 type: String, 57 required: false, 58 default: null 59 }, 60 theme: { 61 type: String, 62 default: THEME_LIGHT 63 }, 64 customTheme: { 65 type: Object, 66 default: null 67 }, 68 interactive: { 69 type: Object, 70 required: false, 71 default() { 72 return { 73 inputDisabled: false, 74 leftButtonDisabled: false, 75 rightButtonDisabled: false, 76 slideButtonDisabled: false 77 }; 78 } 79 }, 80 range: { 81 type: Number, 82 required: false, 83 default: 0 84 } 85 }, 86 data() { 87 return { 88 st: '', 89 et: '', 90 lbarLeft: 0, 91 rbarLeft: 0, 92 lzindex: 1, 93 rzindex: 2, 94 barType: BAR_TYPE_LEFT 95 }; 96 }, 97 created() {}, 98 mounted() { 99 this.type = -1; 100 this.move = false; 101 this.defaultLeft = 0; 102 this.defaultSlideWidth = 0; 103 this.maxWidth = 0; 104 this.allDays = 0; 105 // this.maxDays = MAX_DAYS 106 this.pst = ''; 107 this.pet = ''; 108 109 this._addEvents(); 110 this._initDatePrototype(); 111 112 if (this._validateData()) { 113 this._checkRange(false); 114 this._redraw(); 115 } 116 window.requestAnimationFrame(this._updateDisplayList); 117 }, 118 beforeDestroy() { 119 this._removeEvents(); 120 }, 121 computed: { 122 slideWidth() { 123 return this.rbarLeft - this.lbarLeft; 124 }, 125 themeObject() { 126 if (this.customTheme) { 127 return this.customTheme; 128 } else { 129 switch (this.theme) { 130 case THEME_DARK: 131 return { 132 color: '#ffffff', 133 backgroudColor: '#000000', 134 progressColor: '#3e3e3e', 135 barColor: '#ffffff', 136 slideBackground: `url(${require('./assets/slider_pattern2.png')})` 137 }; 138 case THEME_LIGHT: 139 return { 140 color: '#000000', 141 backgroudColor: '#ffffff', 142 progressColor: '#ababab', 143 barColor: '#ffffff', 144 slideBackground: '#072C4C' 145 // slideBackground: `url(${require('./assets/slider_pattern2.png')})` 146 }; 147 default: 148 return { 149 color: '#ffffff', 150 backgroudColor: '#000000', 151 progressColor: '#3e3e3e', 152 barColor: '#ffffff', 153 slideBackground: '#072C4C' 154 // slideBackground: `url(${require('./assets/slider_pattern2.png')})` 155 }; 156 } 157 } 158 } 159 }, 160 watch: { 161 // ================================== watch ================================== // 162 data: { 163 handler: function(newVal, oldVal) { 164 if (newVal.startTime && newVal.endTime) { 165 if (newVal.startTime !== oldVal.startTime || newVal.endTime !== oldVal.endTime) { 166 // if(this._validateData()) { 167 this._redraw(); 168 // } 169 } 170 } 171 }, 172 deep: false 173 }, 174 min(newVal, oldVal) { 175 if (newVal) { 176 if (this._validateData()) { 177 this._redraw(); 178 } 179 } 180 }, 181 max(newVal, oldVal) { 182 if (newVal) { 183 if (this._validateData()) { 184 this._redraw(); 185 } 186 } 187 } 188 }, 189 methods: { 190 onLbarDown(e) { 191 this.move = true; 192 this.type = TYPE_LEFT; 193 this.defaultLeft = e.target.offsetLeft; 194 this.defaultPageX = e.pageX; 195 this.maxWidth = this.$refs.pgs.clientWidth; 196 this.lzindex = 2; 197 this.rzindex = 1; 198 this.barType = BAR_TYPE_LEFT; 199 }, 200 onRbarDown(e) { 201 this.move = true; 202 this.type = TYPE_RIGHT; 203 this.defaultLeft = e.target.offsetLeft; 204 this.defaultPageX = e.pageX; 205 this.maxWidth = this.$refs.pgs.clientWidth; 206 this.lzindex = 1; 207 this.rzindex = 2; 208 this.barType = BAR_TYPE_RIGHT; 209 }, 210 onSlideDown(e) { 211 this.move = true; 212 this.type = TYPE_CENTER; 213 this.defaultLeft = e.target.offsetLeft; 214 this.defaultPageX = e.pageX; 215 this.maxWidth = this.$refs.pgs.clientWidth; 216 this.defaultSlideWidth = this.slideWidth; 217 }, 218 onDocMove(e) { 219 if (this.move) { 220 const dx = e.pageX - this.defaultPageX; 221 let left = this.defaultLeft + dx; 222 if (this.type === TYPE_LEFT) { 223 if (left <= 0) { 224 left = 0; 225 } 226 if (left >= this.rbarLeft) { 227 left = this.rbarLeft; 228 } 229 this.lbarLeft = left; 230 const ldays = (left / this.maxWidth) * this.allDays; 231 this.st = this._getDate_(this._min, ldays); 232 } else if (this.type === TYPE_RIGHT) { 233 if (left <= this.lbarLeft) { 234 left = this.lbarLeft; 235 } 236 if (left >= this.maxWidth) { 237 left = this.maxWidth; 238 } 239 this.rbarLeft = left; 240 const rdays = (left / this.maxWidth) * this.allDays; 241 this.et = this._getDate_(this._min, rdays); 242 } else { 243 if (left <= 0) { 244 left = 0; 245 } 246 if (left >= this.maxWidth - this.defaultSlideWidth) { 247 left = this.maxWidth - this.defaultSlideWidth; 248 } 249 this.lbarLeft = left; 250 this.rbarLeft = this.lbarLeft + this.defaultSlideWidth; 251 const ldays = (left / this.maxWidth) * this.allDays; 252 this.st = this._getDate_(this._min, ldays); 253 const rdays = ((left + this.defaultSlideWidth) / this.maxWidth) * this.allDays; 254 this.et = this._getDate_(this._min, rdays); 255 } 256 this._checkRange(); 257 } 258 }, 259 onDocUp(e) { 260 if (this.move) { 261 this.move = false; 262 this._redraw(); 263 } 264 }, 265 excute: debounce(function() { 266 const startTime = this.st; 267 const endTime = this.et; 268 const f1 = reg.test(startTime.replace(/\//g, '-')); 269 const f2 = reg.test(endTime.replace(/\//g, '-')); 270 if (f1 && f2) { 271 this._redraw(); 272 } else { 273 alert('日期格式错误，请按照2021/01/01格式输入'); 274 } 275 }, 2000), 276 onResize() { 277 this._redraw(); 278 }, 279 280 // ================================== private ================================== // 281 282 _addEvents() { 283 if (!this.interactive.leftButtonDisabled) { 284 this.$refs.lbar.addEventListener('mousedown', this.onLbarDown); 285 } 286 if (!this.interactive.rightButtonDisabled) { 287 this.$refs.rbar.addEventListener('mousedown', this.onRbarDown); 288 } 289 if (!this.interactive.slideButtonDisabled) { 290 this.$refs.slide.addEventListener('mousedown', this.onSlideDown); 291 } 292 window.addEventListener('resize', this.onResize); 293 document.addEventListener('mousemove', this.onDocMove); 294 document.addEventListener('mouseup', this.onDocUp); 295 }, 296 _removeEvents() { 297 if (!this.interactive.leftButtonDisabled) { 298 this.$refs.lbar.removeEventListener('mousedown', this.onLbarDown); 299 this.$refs.lbar.addEventListener('mousedown', this.onLbarDown); 300 } 301 if (!this.interactive.rightButtonDisabled) { 302 this.$refs.rbar.removeEventListener('mousedown', this.onRbarDown); 303 this.$refs.rbar.addEventListener('mousedown', this.onRbarDown); 304 } 305 if (!this.interactive.slideButtonDisabled) { 306 this.$refs.slide.removeEventListener('mousedown', this.onSlideDown); 307 this.$refs.slide.addEventListener('mousedown', this.onSlideDown); 308 } 309 window.removeEventListener('resize', this.onResize); 310 document.removeEventListener('mousemove', this.onDocMove); 311 document.removeEventListener('mouseup', this.onDocUp); 312 }, 313 _redraw() { 314 this.dirty = true; 315 }, 316 _updateDisplayList() { 317 if (this.dirty) { 318 this._validateDisplayList(); 319 320 const startTime = this.st; 321 const endTime = this.et; 322 if (this.pst != startTime || this.pet != endTime) { 323 this.$emit('changed', { startTime, endTime }); 324 } 325 this.pst = this.st; 326 this.pet = this.et; 327 328 this.dirty = false; 329 } 330 331 window.requestAnimationFrame(this._updateDisplayList); 332 }, 333 _validateData() { 334 this._min = this.min || this.data.startTime; 335 this._max = this.max || this.data.endTime; 336 this.st = this.data.startTime; 337 this.et = this.data.endTime; 338 339 return this._min && this._max && this.st && this.et; 340 }, 341 _validateDisplayList() { 342 const cw = this.$refs.line.clientWidth; 343 this.$refs.pgs.style.width = cw + 'px'; 344 345 this.maxWidth = this.$refs.pgs.clientWidth; 346 this.allDays = this._getDaycount_(this._min, this._max); 347 348 const ldays = this._getDaycount_(this._min, this.st); 349 const rdays = this._getDaycount_(this._min, this.et); 350 351 this.lbarLeft = this.maxWidth * (ldays / this.allDays); 352 this.rbarLeft = this.maxWidth * (rdays / this.allDays); 353 }, 354 _checkRange(draw = true) { 355 if (this.range > 0) { 356 const delta = this._getDaycount_(this.st, this.et); 357 if (delta > this.range) { 358 if (this.barType === BAR_TYPE_LEFT) { 359 this.st = this._getDate_(this.et, -this.range + 1); 360 } else if (this.barType === BAR_TYPE_RIGHT) { 361 this.et = this._getDate_(this.st, this.range - 1); 362 } else { 363 } 364 if(draw) { 365 this._validateDisplayList(); 366 } 367 } 368 } 369 }, 370 _initDatePrototype() { 371 Date.prototype.toLocaleString = function() { 372 return this.getFullYear() + '/' + (this.getMonth() + 1) + '/' + this.getDate() + ' ' + this.getHours() + ':' + this.getMinutes() + ':' + this.getSeconds(); 373 }; 374 }, 375 _getDaycount_(time1, time2) { 376 const aa = new Date(time1).getTime(); 377 const bb = new Date(time2).getTime(); 378 const mm = 24 * 60 * 60 * 1000; 379 const count = (bb - aa) / mm; 380 return count; 381 }, 382 _getDate_(time1, count) { 383 const aa = new Date(time1).getTime(); 384 const mm = 24 * 60 * 60 * 1000; 385 const bb = count * mm + aa; 386 const tm = new Date(bb).toLocaleString().split(' ')[0]; 387 const tm2 = tm.split('/'); 388 const year = tm2[0]; 389 const month = parseInt(tm2[1]) < 10 ? '0' + parseInt(tm2[1]) : tm2[1]; 390 const day = parseInt(tm2[2]) < 10 ? '0' + parseInt(tm2[2]) : tm2[2]; 391 return year + '/' + month + '/' + day; 392 } 393 } 394 }; 395 </script> 396 397 <style lang="scss" scoped> 398 .timeline { 399 display: flex; 400 -webkit-transition: all 0.3s ease 0s; 401 transition: all 0.3s ease 0s; 402 border: 1px solid rgba(62, 62, 62, 1); 403 background-color: rgba(0, 0, 0, 0.9); 404 background-image: url('./assets/texture_small.png'); 405 backdrop-filter: blur(10px); 406 -webkit-backdrop-filter: blur(10px); 407 // border-radius: 5px; 408 height: 40px; 409 line-height: 40px; 410 -moz-user-select: none; 411 -webkit-user-select: none; 412 user-select: none; 413 &:hover { 414 background-color: rgba(0, 0, 0, 1); 415 } 416 .start { 417 flex: 0 0 120px; 418 input { 419 background: transparent; 420 border: none; 421 width: 80px; 422 color: white; 423 // text-align: center; 424 letter-spacing: 1px; 425 font-weight: bold; 426 outline: none; 427 margin-left: 20px; 428 } 429 } 430 .end { 431 flex: 0 0 120px; 432 // text-align: center; 433 letter-spacing: 1px; 434 font-weight: bold; 435 input { 436 background: transparent; 437 border: none; 438 width: 80px; 439 color: white; 440 // text-align: center; 441 letter-spacing: 1px; 442 font-weight: bold; 443 outline: none; 444 margin-left: 20px; 445 } 446 } 447 .line { 448 height: 100%; 449 flex: 1; 450 .progress { 451 position: absolute; 452 // width: calc(100% - 280px); 453 height: 10px; 454 margin-top: 15px; 455 // border-radius: 5px; 456 background-color: rgba(62, 62, 62, 1); 457 // background-image: url('../assets/texture_small.png'); 458 font-size: 0; 459 .leftbar { 460 // -webkit-transition: all 0.15s ease 0s; 461 // transition: all 0.15s ease 0s; 462 position: absolute; 463 top: -6px; 464 width: 6px; 465 height: 20px; 466 background-color: white; 467 border: 1px solid rgba(62, 62, 62, 1); 468 cursor: url('./assets/move.png') 15 15, default; 469 } 470 .slidebar { 471 // -webkit-transition: all 0.15s ease 0s; 472 // transition: all 0.15s ease 0s; 473 position: absolute; 474 height: 10px; 475 cursor: pointer; 476 background: url('./assets/slider_pattern2.png'); 477 } 478 .rightbar { 479 // -webkit-transition: all 0.15s ease 0s; 480 // transition: all 0.15s ease 0s; 481 position: absolute; 482 top: -6px; 483 width: 6px; 484 height: 20px; 485 background-color: white; 486 border: 1px solid rgba(62, 62, 62, 1); 487 cursor: url('./assets/move.png') 15 15, default; 488 } 489 } 490 } 491 } 492 </style>
date-axis：
1 <template> 2 <div class="timeline" :style="{ 'background-color': themeObject.backgroudColor }"> 3 <div class="start"><input :value="st" @keyup="excute" :style="{ color: themeObject.color }" disabled /></div> 4 <div ref="line" class="line"> 5 <div ref="pgs" class="progress" :style="{ 'background-color': themeObject.progressColor }"> 6 <div ref="sbar" class="scalebar"> 7 <div v-for="(item, index) in segment" class="scale" 8 :style="{ 'border': themeObject.scaleBorder }" 9 @mouseover="onScaleMouseover(index)" 10 @mouseout="onScaleMouseout(index)" 11 @click="onScaleClick(index)"> 12 </div> 13 </div> 14 <div ref="slide" class="slidebar" :style="{ width: slideWidth + 'px', left: slideLeft + 'px', background: themeObject.slideBackground }"></div> 15 </div> 16 </div> 17 <div class="end"><input :value="et" @keyup="excute" :style="{ color: themeObject.color }" disabled /></div> 18 </div> 19 </template> 20 21 <script> 22 import { debounce } from '../../../src/utils'; 23 24 const THEME_DARK = 'dark'; 25 const THEME_LIGHT = 'light'; 26 27 export default { 28 name: 'LiloDateAxis', 29 model: { 30 prop: 'data', 31 event: 'changed' 32 }, 33 props: { 34 data: { 35 type: Object, 36 required: false, 37 default() { 38 return { 39 startTime: null, 40 endTime: null 41 }; 42 } 43 }, 44 min: { 45 type: String, 46 required: true, 47 default: null 48 }, 49 max: { 50 type: String, 51 required: false, 52 default: null 53 }, 54 theme: { 55 type: String, 56 default: THEME_LIGHT 57 }, 58 customTheme: { 59 type: Object, 60 default: null 61 }, 62 interactive: { 63 type: Object, 64 required: false, 65 default() { 66 return { 67 slideButtonDisabled: false 68 }; 69 } 70 } 71 }, 72 data() { 73 return { 74 st: '', 75 et: '', 76 range: 0, 77 allDays: 0, 78 segment: 0, 79 scales: [], 80 slideWidth: 0, 81 slideLeft: 0 82 }; 83 }, 84 created() {}, 85 mounted() { 86 this._addEvents(); 87 this._initDatePrototype(); 88 89 if (this._validateData()) { 90 this._redraw(); 91 } 92 93 window.requestAnimationFrame(this._updateDisplayList); 94 }, 95 beforeDestroy() { 96 this._removeEvents(); 97 }, 98 computed: { 99 themeObject() { 100 if (this.customTheme) { 101 return this.customTheme; 102 } else { 103 switch (this.theme) { 104 case THEME_DARK: 105 return { 106 color: '#ffffff', 107 backgroudColor: '#000000', 108 progressColor: '#3e3e3e', 109 barColor: '#ffffff', 110 slideBackground: `url(${require('./assets/slider_pattern2.png')})`, 111 scaleBorder: '1px solid #000000' 112 }; 113 case THEME_LIGHT: 114 return { 115 color: '#000000', 116 backgroudColor: '#ffffff', 117 progressColor: '#ababab', 118 barColor: '#ffffff', 119 slideBackground: '#072C4C', 120 // slideBackground: `url(${require('./assets/slider_pattern2.png')})` 121 scaleBorder: '1px solid #072C4C' 122 }; 123 default: 124 return { 125 color: '#ffffff', 126 backgroudColor: '#000000', 127 progressColor: '#3e3e3e', 128 barColor: '#ffffff', 129 slideBackground: '#072C4C', 130 // slideBackground: `url(${require('./assets/slider_pattern2.png')})` 131 scaleBorder: '1px solid #072C4C' 132 }; 133 } 134 } 135 } 136 }, 137 watch: { 138 // ================================== watch ================================== // 139 data: { 140 handler: function(newVal, oldVal) { 141 if (newVal.startTime && newVal.endTime) { 142 if (newVal.startTime !== oldVal.startTime || newVal.endTime !== oldVal.endTime) { 143 if (this._validateData()) { 144 this._redraw(); 145 } 146 } 147 } 148 }, 149 deep: false 150 }, 151 min(newVal, oldVal) { 152 if (newVal) { 153 if (this._validateData()) { 154 this._redraw(); 155 } 156 } 157 }, 158 max(newVal, oldVal) { 159 if (newVal) { 160 if (this._validateData()) { 161 this._redraw(); 162 } 163 } 164 } 165 }, 166 methods: { 167 onScaleClick(index) { 168 if (this.interactive.slideButtonDisabled) { 169 return; 170 } 171 172 const o = this.scales[index]; 173 this.st = o.startTime; 174 this.et = o.endTime; 175 176 this._redraw(); 177 }, 178 onScaleMouseover(index) { 179 const o = this.scales[index]; 180 this.st = o.startTime; 181 this.et = o.endTime; 182 }, 183 onScaleMouseout(index) { 184 this.st = this.pst; 185 this.et = this.pet; 186 }, 187 excute: debounce(function() {}, 2000), 188 onResize() { 189 this._redraw(); 190 }, 191 192 // ================================== private ================================== // 193 194 _addEvents() { 195 window.addEventListener('resize', this.onResize); 196 }, 197 _removeEvents() { 198 window.removeEventListener('resize', this.onResize); 199 }, 200 _redraw() { 201 this.dirty = true; 202 }, 203 _updateDisplayList() { 204 if (this.dirty) { 205 this._validateDisplayList(); 206 207 const startTime = this.st; 208 const endTime = this.et; 209 if (this.pst != startTime || this.pet != endTime) { 210 this.$emit('changed', { startTime, endTime }); 211 } 212 this.pst = this.st; 213 this.pet = this.et; 214 this.dirty = false; 215 } 216 217 window.requestAnimationFrame(this._updateDisplayList); 218 }, 219 _validateData() { 220 this._min = this.min || this.data.startTime; 221 this._max = this.max || this.data.endTime; 222 this.st = this.data.startTime; 223 this.et = this.data.endTime; 224 225 return this._min && this._max && this.st && this.et; 226 }, 227 _validateDisplayList() { 228 this.range = this._getDaycount_(this.st, this.et) + 1; 229 this.allDays = this._getDaycount_(this._min, this._max) + 1; 230 this.segment = this.allDays / this.range; 231 if ((this.segment | 0) !== this.segment) { 232 throw new Error('总天数必须被时间段天数整除，例如一共20天，每个时间段2天，则合理。'); 233 } 234 this.scales = []; 235 for (let i = 0; i < this.allDays; i += this.range) { 236 const startTime = this._getDate_(this._min, i); 237 const endTime = this._getDate_(this._min, i + this.range - 1); 238 this.scales.push({ startTime, endTime }); 239 } 240 241 const startIndex = this._findIndex(this.st, 'startTime'); 242 const endIndex = this._findIndex(this.et, 'endTime'); 243 if (startIndex === -1 || endIndex === -1) { 244 throw new Error('[min-max]区间段内找不到[startTime,endTime]起始日期。'); 245 } 246 247 this.slideWidth = this.$refs.line.clientWidth / this.segment; 248 this.slideLeft = startIndex * this.slideWidth; 249 }, 250 _findIndex(time, key) { 251 for (let i = 0; i < this.scales.length; i++) { 252 const o = this.scales[i]; 253 if (o[key] === time) { 254 return i; 255 } 256 } 257 return -1; 258 }, 259 _initDatePrototype() { 260 Date.prototype.toLocaleString = function() { 261 return this.getFullYear() + '/' + (this.getMonth() + 1) + '/' + this.getDate() + ' ' + this.getHours() + ':' + this.getMinutes() + ':' + this.getSeconds(); 262 }; 263 }, 264 _getDaycount_(time1, time2) { 265 const aa = new Date(time1).getTime(); 266 const bb = new Date(time2).getTime(); 267 const mm = 24 * 60 * 60 * 1000; 268 const count = (bb - aa) / mm; 269 return count; 270 }, 271 _getDate_(time1, count) { 272 const aa = new Date(time1).getTime(); 273 const mm = 24 * 60 * 60 * 1000; 274 const bb = count * mm + aa; 275 const tm = new Date(bb).toLocaleString().split(' ')[0]; 276 const tm2 = tm.split('/'); 277 const year = tm2[0]; 278 const month = parseInt(tm2[1]) < 10 ? '0' + parseInt(tm2[1]) : tm2[1]; 279 const day = parseInt(tm2[2]) < 10 ? '0' + parseInt(tm2[2]) : tm2[2]; 280 return year + '/' + month + '/' + day; 281 } 282 } 283 }; 284 </script> 285 286 <style lang="scss" scoped> 287 .timeline { 288 display: flex; 289 -webkit-transition: all 0.3s ease 0s; 290 transition: all 0.3s ease 0s; 291 border: 1px solid rgba(62, 62, 62, 1); 292 background-color: rgba(0, 0, 0, 0.9); 293 background-image: url('./assets/texture_small.png'); 294 backdrop-filter: blur(10px); 295 -webkit-backdrop-filter: blur(10px); 296 // border-radius: 5px; 297 height: 40px; 298 line-height: 40px; 299 -moz-user-select: none; 300 -webkit-user-select: none; 301 user-select: none; 302 &:hover { 303 background-color: rgba(0, 0, 0, 1); 304 } 305 .start { 306 flex: 0 0 120px; 307 input { 308 background: transparent; 309 border: none; 310 width: 80px; 311 color: white; 312 // text-align: center; 313 letter-spacing: 1px; 314 font-weight: bold; 315 outline: none; 316 margin-left: 20px; 317 } 318 } 319 .end { 320 flex: 0 0 120px; 321 // text-align: center; 322 letter-spacing: 1px; 323 font-weight: bold; 324 input { 325 background: transparent; 326 border: none; 327 width: 80px; 328 color: white; 329 // text-align: center; 330 letter-spacing: 1px; 331 font-weight: bold; 332 outline: none; 333 margin-left: 20px; 334 } 335 } 336 .line { 337 height: 100%; 338 flex: 1; 339 .progress { 340 position: absolute; 341 // width: calc(100% - 280px); 342 left: 120px; 343 right: 120px; 344 height: 30%; 345 top: 35%; 346 // border-radius: 5px; 347 // background-color: rgba(62, 62, 62, 1); 348 // background-image: url('../assets/texture_small.png'); 349 font-size: 0; 350 .slidebar { 351 -webkit-transition: all 0.25s ease-out 0s; 352 transition: all 0.15s ease-out 0s; 353 position: absolute; 354 height: 100%; 355 cursor: pointer; 356 background: url('./assets/slider_pattern2.png'); 357 // border-radius: 10px; 358 box-sizing: border-box; 359 border: 1px solid #000000; 360 } 361 .scalebar { 362 position: absolute; 363 width: 100%; 364 height: 100%; 365 cursor: pointer; 366 display: flex; 367 justify-content: flex-end; 368 align-items: center; 369 .scale { 370 -webkit-transition: all 0.15s ease-out 0s; 371 transition: all 0.15s ease-out 0s; 372 flex: 1; 373 height: 100%; 374 box-sizing: border-box; 375 // border-radius: 10px; 376 &:hover { 377 background-color: rgba($color: #ffffff, $alpha: 0.4) !important; 378 } 379 } 380 } 381 } 382 } 383 } 384 </style>
调用示例和参数说明：
1 <template> 2 <div class="root"> 3 <div> 4 <div class="time-title">1.【lilo-time-axis】基础用法</div> 5 <el-button @click="setTime('001')">绑定方式修改时间</el-button> 6 <lilo-time-axis 7 v-model="example001.data" 8 :min="example001.min" 9 class="timeline" 10 :customTheme="example001.customTheme" 11 @changed="timeChanged"> 12 </lilo-time-axis> 13 <div class="time-text">开始时间：{{ example001.data.startTime }}</div> 14 <div class="time-text">结束时间：{{ example001.data.endTime }}</div> 15 </div> 16 17 <div> 18 <div class="time-title">2.【lilo-time-axis】锁定时间轴，禁用起始按钮和时间条</div> 19 <el-button @click="setTime('002')">绑定方式修改时间</el-button> 20 <lilo-time-axis 21 v-model="example002.data" 22 :interactive="example002.interactive" 23 :min="example002.min" 24 :max="example002.max" 25 class="timeline" 26 :theme="example002.theme" 27 @changed="timeChanged" 28 > 29 <!-- :customTheme="customTheme"--> 30 <!-- :theme="theme"--> 31 </lilo-time-axis> 32 <div class="time-text">开始时间：{{ example002.data.startTime }}</div> 33 <div class="time-text">结束时间：{{ example002.data.endTime }}</div> 34 </div> 35 36 <div> 37 <div class="time-title">3.【lilo-date-axis】初始化的起始时间间隔为步长，请保证[时间间隔]能被max-min[时间段]整除，且[时间间隔]不要跨区间，例如下面例子：总时间段60天，时间间隔为2天，30个小时间段</div> 38 <!-- <el-button @click="setTheme('003')">绑定方式修改时间</el-button> --> 39 <lilo-date-axis 40 v-model="example003.data" 41 :interactive="example003.interactive" 42 :min="example003.min" 43 :max="example003.max" 44 class="timeline" 45 :theme="example003.theme" 46 @changed="timeChanged" 47 > 48 <!-- :customTheme="customTheme"--> 49 <!-- :theme="theme"--> 50 </lilo-date-axis> 51 <div class="time-text">开始时间：{{ example003.data.startTime }}</div> 52 <div class="time-text">结束时间：{{ example003.data.endTime }}</div> 53 </div> 54 55 <div> 56 <div class="time-title">4.【lilo-time-axis】设置最大时间范围 (range = 5)</div> 57 <lilo-time-axis 58 v-model="example004.data" 59 :range="example004.range" 60 :min="example004.min" 61 class="timeline" 62 @changed="timeChanged"> 63 </lilo-time-axis> 64 <div class="time-text">开始时间：{{ example004.data.startTime }}</div> 65 <div class="time-text">结束时间：{{ example004.data.endTime }}</div> 66 </div> 67 68 </div> 69 </template> 70 71 <script> 72 export default { 73 name: 'example-time-date-axis', 74 data() { 75 return { 76 example001: { 77 data: { 78 startTime: '2021/06/01', 79 endTime: '2022/06/01' 80 }, 81 min: '2021/01/01', 82 // max: '2022/08/01', //max如果在组件上未声明，则不参与绑定，默认取endTime 83 // theme: 'light', //dark,light(default light) 84 customTheme: { 85 //if not null, be first 86 color: '#000000', 87 backgroudColor: '#BBDAFA', 88 progressColor: '#8d8d8d', 89 barColor: '#ffffff', 90 // slideBackground: `url(${require('../../../assets/slider_pattern2.png')})` 91 slideBackground: '#00417a' 92 } 93 }, 94 example002: { 95 data: { 96 startTime: '2021/06/01', 97 endTime: '2022/06/01' 98 }, 99 interactive: { 100 inputDisabled: true, 101 leftButtonDisabled: true, 102 rightButtonDisabled: true, 103 slideButtonDisabled: true 104 }, 105 min: '2021/01/01', 106 max: '2022/08/01', 107 theme: 'dark' //dark,light(default light) 108 }, 109 example003: { 110 data: { 111 startTime: '2022/08/21', 112 endTime: '2022/08/22' 113 }, 114 interactive: { 115 slideButtonDisabled: false 116 }, 117 min: '2022/08/01', 118 max: '2022/08/30', 119 theme: 'dark' //dark,light(default light) 120 }, 121 example004: { 122 data: { 123 startTime: '2022/09/17', 124 endTime: '2022/09/27' 125 }, 126 range: 5, 127 min: '2022/09/13', 128 theme: 'dark' //dark,light(default light) 129 } 130 }; 131 }, 132 mounted() {}, 133 methods: { 134 setTime(type) { 135 const date = { 136 startTime: '2022/04/01', 137 endTime: '2022/08/01' 138 }; 139 const min = '2022/02/01'; 140 const max = '2022/08/26'; 141 this[`example${type}`].data = date; 142 this[`example${type}`].min = min; 143 this[`example${type}`].max = max; 144 }, 145 timeChanged(val) { 146 console.log(val); 147 } 148 } 149 }; 150 </script> 151 152 <style> 153 .root { 154 padding: 10px; 155 } 156 .time-title { 157 margin-top: 10px; 158 margin-bottom: 5px; 159 /* color: #034631; */ 160 font-weight: bold; 161 } 162 .time-text { 163 margin-top: 10px; 164 } 165 </style>