56 lines
1.5 KiB
Vue
56 lines
1.5 KiB
Vue
<template>
|
|
<div class="columns is-mobile is-multiline mx-0">
|
|
<div class="column is-4 has-text-centered" v-for="(v,i) in years">
|
|
<span class="hyperlink" :class="i===0 || i===11? 'has-text-grey' : ''" @click="$emit('year', v)">{{ `${v}` }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ['year', 'month', 'action'],
|
|
data() {
|
|
return {
|
|
years: []
|
|
}
|
|
},
|
|
created() {
|
|
this.years = [this.year]
|
|
for(let i = 1; i < 7; i++) {
|
|
this.years.push(this.year+i)
|
|
this.years.push(this.year-i)
|
|
}
|
|
this.years.sort(function(a, b) {return a - b;})
|
|
this.years = this.years.slice(0,12)
|
|
this.$emit('caption', `${this.years[1]}-${this.years[10]}`)
|
|
},
|
|
watch: {
|
|
action: function(newVal) {
|
|
if(newVal.name==='next') this.next()
|
|
if(newVal.name==='previous') this.previous()
|
|
}
|
|
},
|
|
methods: {
|
|
next() {
|
|
let year = this.years[this.years.length-1]
|
|
this.years = []
|
|
for(let i = 0; i < 12; i++) {
|
|
this.years.push(year+i)
|
|
}
|
|
this.years.sort(function(a, b) {return a - b;})
|
|
this.years = this.years.slice(0,12)
|
|
this.$emit('caption', `${this.years[1]}-${this.years[10]}`)
|
|
},
|
|
previous() {
|
|
let year = this.years[0]
|
|
this.years = []
|
|
for(let i = 0; i < 12; i++) {
|
|
this.years.push(year-i)
|
|
}
|
|
this.years.sort(function(a, b) {return a - b;})
|
|
this.years = this.years.slice(0,12)
|
|
this.$emit('caption', `${this.years[1]}-${this.years[10]}`)
|
|
}
|
|
}
|
|
}
|
|
</script>
|