100 lines
2.0 KiB
Vue
100 lines
2.0 KiB
Vue
<template>
|
|
<div class="flex-center box">
|
|
<div class="btn" @click="prevYear">
|
|
<img :src="prevIcon" alt="Previous Year" />
|
|
</div>
|
|
<div class="text">{{ 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';
|
|
|
|
// 从 sessionStorage 获取缓存数据的辅助函数
|
|
function getCachedMonth() {
|
|
try {
|
|
const cachedData = sessionStorage.getItem('launches_search_cache');
|
|
if (cachedData) {
|
|
const parsedData = JSON.parse(cachedData);
|
|
return parsedData.currentMonth || (new Date().getMonth() + 1);
|
|
}
|
|
} catch (e) {
|
|
console.error('获取缓存的月份失败', e);
|
|
}
|
|
return new Date().getMonth() + 1;
|
|
}
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
props: {
|
|
value: {
|
|
type: Number,
|
|
default: getCachedMonth
|
|
}
|
|
},
|
|
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 {
|
|
color: #3A4A65;
|
|
font-size: 24px;
|
|
font-family: 'Poppins-SemiBold';
|
|
.btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
|
|
&:active {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.text {
|
|
width: 60px;text-align: center; font-family: 'Poppins-Regular';
|
|
}
|
|
}
|
|
</style>
|