85 lines
1.7 KiB
Vue
85 lines
1.7 KiB
Vue
<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">{{ monthName }}</div>
|
|
<div class="btn" @click="nextYear">
|
|
<img :src="nextIcon" :alt="isNextDisabled ? 'Next Year Disabled' : 'Next Year'" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<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';
|
|
import IconPrevDisabled from '@/static/launches/icon_prev_disabled.png';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
props: {
|
|
value: {
|
|
type: Number,
|
|
default: () => new Date().getMonth() + 1
|
|
}
|
|
},
|
|
methods: {
|
|
prevYear() {
|
|
if (this.value > 1) {
|
|
this.$emit('input', this.value - 1);
|
|
}
|
|
},
|
|
nextYear() {
|
|
if (this.value < 12) {
|
|
this.$emit('input', this.value + 1);
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
monthName() {
|
|
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
|
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
return months[this.value - 1];
|
|
},
|
|
prevIcon() {
|
|
return this.value > 1 ? IconPrev : IconPrevDisabled;
|
|
},
|
|
nextIcon() {
|
|
return this.value < 12 ? IconNext : IconNextDisabled;
|
|
},
|
|
isNextDisabled() {
|
|
return this.value >= 12;
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<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>
|