1 问题
u-calendar日历控件存在的问题:
- 不能设置默认选中值,
- 打开弹窗选择起始日期,然后点击取消按钮或蒙版关闭弹窗时,日历弹窗中的选中值发生改变(再次打开日历弹窗时,就可以看到选中值的错误)。
2 修改思路
针对以上两点,对于mode="range"的u-calendar做了如下修改来解决上述问题。
因为是npm引入的uView组件,不能在node_modules目录下修改组件内容。
所以只能将u-calendar组件复制到components目录下,改名为ln-calendar.vue,并修改组件内容。
2.1 设置默认选中值
首先在props中添加defaultDate属性:
defaultDate: {
type: Array,
default: () => []
},
其次,写一个设置默认值的方法:
//设置默认值,格式['2022-12-1','2023-8-2'],不带0
setDefaultDate(defaultDate) {
if (defaultDate.length == 0) {
return;
}
const startDateArr = defaultDate[0].split('-')
this.startYear = Number(startDateArr[0])
this.startMonth = Number(startDateArr[1])
this.startDay = Number(startDateArr[2])
this.startDate = this.activeDate = `${this.startYear}-${this.startMonth}-${this.startDay}`
if (this.defaultDate.length > 1) {
const endDateArr = defaultDate[1].split('-')
this.endYear = Number(endDateArr[0])
this.endMonth = Number(endDateArr[1])
this.endDay = Number(endDateArr[2])
this.endDate = `${this.endYear}-${this.endMonth}-${this.endDay}`
}
},
最后在init()方法中调用setDefaultDate()方法即可。注意,调用时要放在changeData()方法之前。
2.2 修复取消选中时,弹窗内选中值不还原的问题
首先,在data中定义两个变量:
hasFix: false, //识别是否点击了确定按钮
beforeChangeVal: [] //存储原有选中值
其次,在dateClick()方法顶部,存储确定按钮点击状态和原有选中值:
//保存原有值,点击取消或者蒙版关闭弹窗时,用于复原选中项
this.hasFix = false
if (this.endDate) {
this.beforeChangeVal = [this.startDate, this.endDate]
}
然后,在btnFix()方法顶部,设置确定按钮点击状态为true:
this.hasFix = true
最后,在close() 方法中,修复问题。
if (!this.hasFix) {
// 修复点击取消按钮或蒙版关闭弹窗时,日历弹窗的选中值发生改变的问题
this.setDefaultDate(this.beforeChangeVal);
}