7 changed files with 6844 additions and 3052 deletions
File diff suppressed because it is too large
@ -0,0 +1,293 @@ |
|||
<template> |
|||
<div class="date-picker"> |
|||
<div class="header"> |
|||
<div class="current-date year-selector" v-if="view === 'month'" > |
|||
<button><</button> |
|||
<span @click="getMonYear">{{ currentYear !== selectedYear ? selectedYear : currentYear }}</span> |
|||
<button>></button> |
|||
</div> |
|||
<div class="selectYear" v-if="view !== 'month'" > |
|||
<span class="year">{{view == 'monthTwo' ? '选择年份':'' }}</span> |
|||
</div> |
|||
<div class="controls"> |
|||
<button @click="toggleView('month')" :class="{ active: view !== 'year' }">月度</button> |
|||
<button @click="toggleView('year')" :class="{ active: view === 'year' }">年度</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="selector" v-if="view === 'month'"> |
|||
|
|||
<div class="month-grid"> |
|||
<button |
|||
v-for="month in months" |
|||
:key="month.value" |
|||
@click="selectMonth(month.value)" |
|||
:class="{ active: month.value === currentMonth && currentYear === selectedYear }" |
|||
> |
|||
{{ month.label }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="selector" v-if="view !== 'month'"> |
|||
<div :class="[view == 'monthTwo' ? 'monthTwo-grid' :'','year-grid']"> |
|||
<button |
|||
v-for="year in visibleYears" |
|||
:key="year" |
|||
@click="selectYear(year)" |
|||
:class="{ |
|||
yearActive: year === currentYear, |
|||
current: year === new Date().getFullYear(), |
|||
}" |
|||
> |
|||
{{ year }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'DatePicker', |
|||
props: { |
|||
modelValue: { |
|||
type: Date, |
|||
default: () => new Date() |
|||
}, |
|||
view:{ |
|||
type:String, |
|||
default:'month' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// view: 'month', // 'month' or 'year monthTwo' |
|||
selectedYear: this.modelValue.getFullYear(), |
|||
currentMonth: this.modelValue.getMonth() + 1, |
|||
currentYear: this.modelValue.getFullYear(), |
|||
decadeStart: Math.floor(this.modelValue.getFullYear() / 10) * 10, |
|||
months: [ |
|||
{ value: 1, label: '1月' }, |
|||
{ value: 2, label: '2月' }, |
|||
{ value: 3, label: '3月' }, |
|||
{ value: 4, label: '4月' }, |
|||
{ value: 5, label: '5月' }, |
|||
{ value: 6, label: '6月' }, |
|||
{ value: 7, label: '7月' }, |
|||
{ value: 8, label: '8月' }, |
|||
{ value: 9, label: '9月' }, |
|||
{ value: 10, label: '10月' }, |
|||
{ value: 11, label: '11月' }, |
|||
{ value: 12, label: '12月' } |
|||
] |
|||
}; |
|||
}, |
|||
computed: { |
|||
decadeEnd() { |
|||
return this.decadeStart + 9; |
|||
}, |
|||
visibleYears() { |
|||
const years = []; |
|||
for (let i = 0; i < 12; i++) { |
|||
years.push(this.decadeStart + i); |
|||
} |
|||
return years; |
|||
} |
|||
}, |
|||
mounted(){ |
|||
let selectedDate = new Date() |
|||
const oldDate = JSON.parse(localStorage.getItem('date')) |
|||
if(oldDate){ |
|||
selectedDate = new Date(oldDate) |
|||
this.currentMonth = selectedDate.getMonth() + 1; |
|||
this.currentYear = selectedDate.getFullYear(); |
|||
this.selectedYear = this.currentYear; |
|||
this.decadeStart = Math.floor(this.currentYear / 10) * 10; |
|||
}else{ |
|||
selectedDate = new Date() |
|||
} |
|||
}, |
|||
beforeUnmount() { |
|||
// 移除监听 |
|||
// this.$emit('update-count', 'month') |
|||
}, |
|||
destroyed(){ |
|||
this.$emit('update-count', 'month') |
|||
console.log('destroyed===='); |
|||
}, |
|||
methods: { |
|||
getMonYear(){ |
|||
this.$emit('update-count', 'monthTwo') |
|||
}, |
|||
toggleView(viewType) { |
|||
this.$emit('update-count', viewType) |
|||
|
|||
}, |
|||
selectMonth(month) { |
|||
this.currentMonth = month; |
|||
this.currentYear = this.selectedYear; |
|||
this.$emit('update-count', 'month') |
|||
this.emitDate(); |
|||
}, |
|||
selectYear(year) { |
|||
this.selectedYear = year; |
|||
this.currentYear = this.selectedYear; |
|||
if(this.view == 'monthTwo'){ |
|||
this.$emit('update-count', 'month') |
|||
} |
|||
this.emitDate(); |
|||
}, |
|||
prevYear() { |
|||
this.selectedYear--; |
|||
this.updateDecade(); |
|||
}, |
|||
nextYear() { |
|||
this.selectedYear++; |
|||
this.updateDecade(); |
|||
}, |
|||
prevDecade() { |
|||
this.decadeStart -= 10; |
|||
}, |
|||
nextDecade() { |
|||
this.decadeStart += 10; |
|||
}, |
|||
updateDecade() { |
|||
this.decadeStart = Math.floor(this.selectedYear / 10) * 10; |
|||
}, |
|||
emitDate() { |
|||
const selectedDate = new Date(this.currentYear, this.currentMonth - 1, 1); |
|||
this.$emit('update:modelValue', selectedDate); |
|||
this.$emit('change', selectedDate); |
|||
} |
|||
}, |
|||
watch: { |
|||
modelValue(newVal) { |
|||
let selectedDate = newVal |
|||
this.currentMonth = selectedDate.getMonth() + 1; |
|||
this.currentYear = selectedDate.getFullYear(); |
|||
this.selectedYear = this.currentYear; |
|||
this.decadeStart = Math.floor(this.currentYear / 10) * 10; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.date-picker { |
|||
font-family: Microsoft YaHei UI; |
|||
width: 300px; |
|||
/* border: 1px solid #ddd; */ |
|||
border-radius: 4px; |
|||
padding: 10px 0 0 0; |
|||
/* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */ |
|||
} |
|||
|
|||
.header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 8px; |
|||
padding-bottom: 8px; |
|||
border-bottom: 1px solid #F1F2F5; |
|||
letter-spacing: 0.08em; |
|||
color: #626573; |
|||
|
|||
} |
|||
|
|||
.current-date { |
|||
font-weight: bold; |
|||
} |
|||
.selectYear{ |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
line-height: normal; |
|||
text-align: center; |
|||
letter-spacing: 0.08em; |
|||
color: #006AFF; |
|||
} |
|||
.controls{ |
|||
border-radius: 4px; |
|||
background: #EAECF0; |
|||
box-sizing: border-box; |
|||
border: 1px solid #EAECF0; |
|||
padding: 3px 6px; |
|||
} |
|||
|
|||
.selector{ |
|||
|
|||
} |
|||
|
|||
.controls button { |
|||
background: none; |
|||
border: none; |
|||
padding: 1px 12px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.controls button.active { |
|||
background-color: #FFFFFF; |
|||
color: #006AFF; |
|||
/* border-color: #1890ff; */ |
|||
} |
|||
|
|||
.year-selector, .decade-selector { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.year-selector button, .decade-selector button { |
|||
background: none; |
|||
border: none; |
|||
cursor: pointer; |
|||
font-size: 16px; |
|||
} |
|||
.year-selector{ |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.month-grid, .year-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(4, 1fr); |
|||
gap: 5px; |
|||
} |
|||
|
|||
.month-grid button, .year-grid button { |
|||
font-family: Microsoft YaHei UI; |
|||
padding: 8px; |
|||
border: none; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 48px; |
|||
background: none; |
|||
cursor: pointer; |
|||
border-radius: 20px; |
|||
color: #1E2226; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.month-grid button:hover, .year-grid button:hover { |
|||
background-color: #F2F7FF; |
|||
} |
|||
|
|||
.month-grid button.active, .year-grid button.active,.year-grid button.yearActive{ |
|||
background-color: #006AFF; |
|||
color: white !important; |
|||
} |
|||
.monthTwo-grid button.current { |
|||
/* background-color: #006AFF !important; |
|||
color: white !important; |
|||
border-color: #1890ff !important; */ |
|||
color: #fff; |
|||
|
|||
} |
|||
.year-grid button.current{ |
|||
/* font-weight: bold; */ |
|||
color: #006AFF; |
|||
/* background-color: #F2F7FF; */ |
|||
/* border-color: #1890ff; */ |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue