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()方法之前。

uView日历控件(u-calendar)优化_第1张图片

 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);
}

你可能感兴趣的:(uniapp,javascript,vue)