66 lines
1.6 KiB
Vue
66 lines
1.6 KiB
Vue
<template>
|
|
<div class="columns is-mobile is-multiline mx-0">
|
|
<span
|
|
v-for="(v, i) in years"
|
|
class="column is-4 has-text-centered is-clickable fs-14"
|
|
:class="i === 0 || i === 11 ? 'has-text-grey-light' : ''"
|
|
@click="$emit('year', v)"
|
|
>{{ v }}</span
|
|
>
|
|
</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>
|