79 lines
1.5 KiB
Vue
79 lines
1.5 KiB
Vue
<script>
|
|
import IconPrev from '@/static/launches/icon_prev.png';
|
|
import IconNext from '@/static/launches/icon_next.png';
|
|
import IconNextDisabled from '@/static/launches/icon_next_disabled.png';
|
|
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: Number,
|
|
default: () => new Date().getFullYear()
|
|
}
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
computed: {
|
|
year() {
|
|
return this.value;
|
|
},
|
|
prevIcon() {
|
|
return IconPrev;
|
|
},
|
|
nextIcon() {
|
|
return this.year === new Date().getFullYear() ? IconNextDisabled : IconNext;
|
|
},
|
|
isNextDisabled() {
|
|
return this.year === new Date().getFullYear();
|
|
}
|
|
},
|
|
methods: {
|
|
prevYear() {
|
|
this.$emit('input', this.year - 1);
|
|
},
|
|
nextYear() {
|
|
if (!this.isNextDisabled) {
|
|
this.$emit('input', this.year + 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex-center box">
|
|
<div class="btn" @click="prevYear">
|
|
<img :src="prevIcon" alt="Previous Year" />
|
|
</div>
|
|
<div style="width: 60px;text-align: center; font-family: 'Poppins-Regular', serif">{{ year }}</div>
|
|
<div class="btn" @click="nextYear">
|
|
<img :src="nextIcon" :alt="isNextDisabled ? 'Next Year Disabled' : 'Next Year'" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.box {
|
|
gap: 16px;
|
|
color: #3A4A65;
|
|
font-size: 24px;
|
|
font-family: 'Poppins-SemiBold', serif;
|
|
.btn {
|
|
width: 48px;
|
|
height: 48px;
|
|
cursor: pointer;
|
|
background-color: #FFFFFF;
|
|
border-radius: 4px;
|
|
|
|
&:active {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|