83 lines
2.1 KiB
Vue
83 lines
2.1 KiB
Vue
|
<!--
|
||
|
|
* @Author: 张宁 18339727226@163.com
|
||
|
|
* @Date: 2024-05-28 11:55:39
|
||
|
|
* @LastEditors: 张宁 18339727226@163.com
|
||
|
|
* @LastEditTime: 2024-05-29 15:28:27
|
||
|
|
* @FilePath: \welcome-system-screen\src\components\datePicker\yearPane.vue
|
||
|
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<div class="box">
|
||
|
|
<div class='box-item' v-for="item, index in yearList" @click="selectYear(item)">
|
||
|
|
<div :class="{ selected: isSelectedDate(item) }" class="item-num">{{ item }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
const props = defineProps({
|
||
|
|
curYear: Number,
|
||
|
|
});
|
||
|
|
const currentYear = ref(new Date().getFullYear());
|
||
|
|
const selectYears:Ref<any> = ref(props.curYear)
|
||
|
|
// 获取到近六年的年份
|
||
|
|
const yearList = computed(() => {
|
||
|
|
let years = []
|
||
|
|
for (let i = 0; i < 6; i++) {
|
||
|
|
years.unshift(currentYear.value - i);
|
||
|
|
}
|
||
|
|
return years;
|
||
|
|
})
|
||
|
|
// 选择年的处理 如果点击的是当前的 就赋值为空
|
||
|
|
const selectYear = (year: number) => {
|
||
|
|
if (selectYears.value == year) {
|
||
|
|
selectYears.value = 0
|
||
|
|
} else {
|
||
|
|
selectYears.value = year;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const emits = defineEmits(["update:curYear"]);
|
||
|
|
watch(selectYears, (newVal) => {
|
||
|
|
emits("update:curYear", newVal);
|
||
|
|
});
|
||
|
|
const isSelectedDate = (year: any) => {
|
||
|
|
if (year == selectYears.value) {
|
||
|
|
return true
|
||
|
|
} else {
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang='scss'>
|
||
|
|
.box {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
|
||
|
|
.box-item {
|
||
|
|
margin-right: 10px;
|
||
|
|
margin-top: 20px;
|
||
|
|
width: 120px;
|
||
|
|
height: 70px;
|
||
|
|
line-height: 70px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
.item-num {
|
||
|
|
width: 70px;
|
||
|
|
height: 70px;
|
||
|
|
border-radius: 50%;
|
||
|
|
color: #fff;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.selected {
|
||
|
|
background-color: #007bff;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|