时间轴组件封装
Main.js
<template>
<div class="timeline-main">
<div class="timeline-axis">
<div class="axis-item"
v-for="(time, index) in dateTimes"
:key="index">
<div class="axis-item-tick"
:class="{ 'axis-item-tick-active': index === highlightIndex }"
@mouseenter="hoverIndex = index"
@mouseleave="hoverIndex = -1"
@click="tickClick(time, index)">
</div>
<div class="axis-item-label"
v-if="dateTimeIndexes.indexOf(index) >= 0">
{{ time }}</div>
<div class="axis-item-tip"
v-if="index === highlightIndex || index === hoverIndex">
{{ time }}</div>
</div>
</div>
<div class="timeline-control">
<i class="menu-icon icon-left"
:class="{'menu-icon-disabled': playing}"
@click="backward"></i>
<i class="menu-icon"
:class="{'icon-play': !playing, 'icon-pause': playing}"
@click="togglePlay"
@mouseleave="hoverIndex = -1"></i>
<i class="menu-icon icon-right"
:class="{'menu-icon-disabled': playing}"
@click="forward"></i>
<i class="menu-icon icon-up"
:class="{'menu-icon-disabled': playing}"
@click="speedSlow"></i>
<i
class="menu-icon speed">{{ options.speed }}</i>
<i class="menu-icon icon-down"
:class="{'menu-icon-disabled': playing}"
@click="speedQuick"></i>
</div>
</div>
</template>
<script>
import { dateFormat } from '../util/formatdate.js' // 日期格式化
export default {
data() {
return {
intervalTimer: null, // 定时器
dateTimeIndexes: [], // 日期列表
playing: false, // 播放
activeIndex: 0, // 当前的时间位置
hoverIndex: 0 // 鼠标移入的时间位置
}
},
props: {
options: {
type: Object,
default() {
return {}
}
},
dateTimes: {
type: Array,
default() {
return []
}
},
interval: {
type: Number,
default() {
return 100
}
}
},
computed: {
highlightIndex() {
return (
(this.activeIndex === -1 && this.dateTimes.length - 1) ||
this.activeIndex
)
}
},
watch: {
options: {
handler() {
this.renderTimeline()
},
deep: true
},
playing() {
if (this.playing) {
this.intervalTimer = setInterval(() => {
this.activeIndex = (this.activeIndex + 1) % this.dateTimes.length
}, this.options.speed * 1000)
} else {
if (this.intervalTimer) {
clearInterval(this.intervalTimer)
this.intervalTimer = null
}
}
},
activeIndex() {
const time = this.dateTimes[this.activeIndex].split(' ')[0]
this.$emit('getDateFun', time)
}
},
mounted() {
this.renderTimeline()
let that = this
window.onresize = function () {
that.renderTimeline()
}
},
filters: {
formatDatetime(dateTime) {
dateTime = dateFormat(dateTime, 'MM.dd')
return dateTime
}
},
methods: {
/**
* @name: 初始化时间轴
*/
renderTimeline() {
// 时间轴的宽度
const timelineWidth = this.$el.offsetWidth - 40
// 日期个数
const dateTimesSize = this.dateTimes.length
// 如果时间全部显示，时间轴的理想宽度
const dateTimesWidth = dateTimesSize * this.interval
// 如果时间轴的宽度小于理想宽度
if (timelineWidth >= dateTimesWidth) {
this.dateTimeIndexes = this.dateTimes.map((dateTime, index) => {
return index
})
return
}
// 当前时间轴的宽度最大能容纳多少日期刻度
const maxTicks = Math.floor(timelineWidth / this.interval)
// 间隔刻度数
const gapTicks = Math.floor(dateTimesSize / maxTicks)
// 记录需要显示的日期索引
this.dateTimeIndexes = []
for (let t = 0; t <= maxTicks; t++) {
this.dateTimeIndexes.push(t * gapTicks)
}
const len = this.dateTimeIndexes.length
// 最后一项需要特殊处理
if (len > 0) {
const lastIndex = this.dateTimeIndexes[len - 1]
if (lastIndex + gapTicks > dateTimesSize - 1) {
this.dateTimeIndexes[len - 1] = dateTimesSize - 1
} else {
this.dateTimeIndexes.push(dateTimesSize - 1)
}
}
},
/**
* @name: 点击刻度
* @param {time}
* @param {index}
*/
tickClick(time, index) {
if (this.playing) {
return
}
this.activeIndex = index
},
/**
* @name: 播放和暂停
*/
togglePlay() {
this.playing = !this.playing
},
/**
* @name: 时间退后一日
*/
backward() {
if (this.playing) {
return
}
this.activeIndex = this.activeIndex - 1
if (this.activeIndex === -1) {
this.activeIndex = this.dateTimes.length - 1
}
},
/**
* @name: 时间前进一日
*/
forward() {
if (this.playing) {
return
}
this.activeIndex = (this.activeIndex + 1) % this.dateTimes.length
},
/**
* @name: 减慢速度
*/
speedSlow() {
if (this.playing || this.options.speed >= this.options.speedMax) {
return
}
this.options.speed = this.options.speed + 1
},
/**
* @name: 加快速度
*/
speedQuick() {
if (this.playing || this.options.speed <= 1) {
return
}
this.options.speed = this.options.speed - 1
}
}
}
</script>
<style scoped lang="scss">
.timeline-main {
padding: 10px;
box-sizing: border-box;
.timeline-axis {
position: relative;
display: flex;
justify-content: space-around;
padding: 8px 0;
&::before {
content: '';
width: 100%;
height: 10px;
position: absolute;
left: 0;
bottom: 8px;
display: inline-block;
background: rgba(0, 0, 0, 0.5);
}
.axis-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
.axis-item-tick {
display: inline-block;
width: 4px;
height: 20px;
background: rgba(0, 0, 0, 0.5);
transition: background 0.3s;
cursor: pointer;
&:hover {
background: #000;
}
}
.axis-item-tick-active {
background: #000;
}
.axis-item-label {
position: absolute;
bottom: -30px;
white-space: nowrap;
}
.axis-item-tip {
position: absolute;
top: -25px;
padding: 2px 6px;
border-radius: 2px;
background: rgba(0, 0, 0, 0.5);
white-space: nowrap;
color: #fff;
}
}
}
.timeline-control {
margin-top: 40px;
text-align: center;
i {
cursor: pointer;
display: inline-block;
font-style: normal;
}
.menu-icon {
font-size: 20px;
width: 20px;
height: 20px;
background-size: cover;
background-repeat: no-repeat;
&.icon-left {
background-image: url('../assets/icon-left.png');
}
&.icon-right {
background-image: url('../assets/icon-right.png');
}
&.icon-play {
background-image: url('../assets/icon-play.png');
}
&.icon-pause {
background-image: url('../assets/icon-pause.png');
}
&.icon-up {
background-image: url('../assets/icon-up.png');
}
&.icon-down {
background-image: url('../assets/icon-down.png');
}
&.menu-icon-disabled {
cursor: no-drop;
opacity: 0.5;
}
}
}
}
</style>
使用组件
App.vue
<template>
<div>
<h2
style="margin:0;text-align:center;">
{{this.date}}
</h2>
<Main :options="options"
:dateTimes="dateTimes"
@getDateFun="getDateFun"
:interval="interval"></Main>
</div>
</template>
<script>
import { dateFormat } from './util/formatdate.js'
import Main from './components/Main'
export default {
name: 'app',
data() {
return {
date: '',
options: {
speed: 1, // 速度
speedMax: 10 // 速度最大值
},
interval: 20, // 日期间的间隔
dateTimes: [
'03-04',
'03-05',
'03-06',
'03-07',
'03-08',
'03-09',
'03-10',
'03-11',
'03-12',
'03-13'
]
}
},
components: {
Main
},
mounted() {
// 获取最近 10 天的日期
let list = []
for (let i = 0; i < 10; i++) {
list.unshift(
dateFormat(
new Date(
new Date().setDate(new Date().getDate() - i)
).toLocaleDateString(),
'MM-dd'
)
)
}
this.date = list[0]
this.dateTimes = list
},
methods: {
// 接收父组件传值
getDateFun(time) {
console.log(time)
this.date = time
},
}
}
</script>