uView日历控件(u-calendar)优化

1 问题 

u-calendar日历控件存在的问题：

1. 不能设置默认选中值，
2. 打开弹窗选择起始日期，然后点击取消按钮或蒙版关闭弹窗时，日历弹窗中的选中值发生改变（再次打开日历弹窗时，就可以看到选中值的错误）。

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) {
    this.setInitData(); //这个方法的内容是，init() 方法中this.changeData();之前所有内容的封装
	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 (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: [] //存储原有选中值

 其次，在watch中，监听弹窗开启，存储确定按钮点击状态和原有选中值：

value(val) {
	if (val) {
		//保存原有值，点击取消或者蒙版关闭弹窗时，用于复原选中项
		this.hasFix = false
		if (this.startDate && this.endDate) {
			this.beforeChangeVal = [this.startDate, this.endDate]
		} else {
			this.beforeChangeVal = this.startDate ? [this.activeDate] : []
		}
	}
	this.closeFromInner = false;
},

 然后，在btnFix()方法顶部，设置确定按钮点击状态为true:

this.hasFix = true

 最后，在close() 方法中，修复问题。

if (!this.hasFix) {
  // 修复点击取消按钮或蒙版关闭弹窗时，日历弹窗的选中值发生改变的问题
  this.setDefaultDate(this.beforeChangeVal);
}