今天完成的事情：
1.日历上的start日期必须小于end日期，如果点击大于end的部分则不会触发日期的改变。end日期必须大于start日期。
2.当日历现实的时候给text绑定了keydown事件，通过上下左右键控制日期，同时给原本的text添加一个keydown.keyUp.keyLeft.keyRight.prevent，阻止原生的上下左右事件
<input type="text" class="round-sm" @focus="earlyDatefocus" @click.stop v-model="startCalendarText" @keydown.right.left.down.up.prevent @keydown.up="keyUp" @keydown.right="keyRight" @keydown.down="keyDown" @keydown.left="keyLeft">
在当月的时候使用上下左右可以正常使用，如果跳到上个月会出现一些错误，因为是监听了日期的更改所以导致数据错误的变化。考虑添加一个新的值，保存变化然后付给日期。
beShowDate(val){
// this.mouthFlag = this.beShowMouth
// this.yearFlag = this.beShowYear
// this.$emit('mouthMessage' , {
// mouthFlag: this.mouthFlag,
// yearFlag: this.yearFlag,
// })
if(this.$store.state.startShow && (this.$store.state.endDate>0?this.beShowYear <= this.$store.state.endYear && this.beShowMouth <= this.$store.state.endMouth && this.beShowDate <= this.$store.state.endDate:true)) {
this.$store.commit('changeStartDate' ,{
year: this.beShowYear,
mouth: this.beShowMouth,
date: this.beShowDate,
})
if(this.$store.state.backAndNext) {
this.mouthFlag = this.beShowMouth
this.yearFlag = this.beShowYear
}
this.$emit('mouthMessage' , {
mouthFlag: this.mouthFlag,
yearFlag: this.yearFlag,
})
this.calendarText = this.beShowYear + '-' + this.$store.getters.turnDate(this.beShowMouth) + '-' + this.$store.getters.turnDate(this.beShowDate + 1)
this.$emit('calendarText' , this.calendarText)
}else if(this.$store.state.endShow && (this.$store.state.endDate>0?this.beShowYear >= this.$store.state.startYear && this.beShowMouth >= this.$store.state.startMouth && this.beShowDate >= this.$store.state.startDate:true)) {
this.$store.commit('changeEndDate' ,{
year: this.beShowYear,
mouth: this.beShowMouth,
date: this.beShowDate,
})
if(this.$store.state.backAndNext) {
this.mouthFlag = this.beShowMouth
this.yearFlag = this.beShowYear
}
this.$emit('mouthMessage' , {
mouthFlag: this.mouthFlag,
yearFlag: this.yearFlag,
})
this.calendarText = this.beShowYear + '-' + this.$store.getters.turnDate(this.beShowMouth) + '-' + this.$store.getters.turnDate(this.beShowDate + 1)
this.$emit('calendarText' , this.calendarText)
}
},
最开始写日历的时候觉得如果使用vuex的会创建很多值，写起来会很麻烦，但是现在发现如果只用组件，通过组件的通信完成这个日历的话，里面的通信也会非常麻烦，在考虑有么有很好的办法解决这些问题...
明天要做的事情：
理清逻辑问题，继续完善代码。
返回列表
评论