如果使用官网日历el-calendar,要使用右上角自带的切换事件,我们可以需要他别处理:
在create里面处理逻辑就可以了:
created: function() {
this.$nextTick(() => {
// 点击前一个月显示前一个月考勤打卡展示
const prevBtn = document.querySelector(
'.el-calendar__button-group .el-button-group>button:nth-child(1)'
)
prevBtn.addEventListener('click', e => {
const daTime = this.parseTime(this.value)
this.monthDay = daTime.substr(0, 7)
this.getToday()
})
// 点击下一个月
const nextBtn = document.querySelector(
'.el-calendar__button-group .el-button-group>button:nth-child(3)'
)
nextBtn.addEventListener('click', (e) => {
const daTime = this.parseTime(this.value)
this.monthDay = daTime.substr(0, 7)
this.getToday()
})
// 点击今天
const prevBtn2 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)')
prevBtn2.addEventListener('click', () => {
this.monthDay = ''
this.getToday()
})
})
},