实现目标:实现datepicker中的日历图标替换成类似于select选择器组件的箭头,且箭头旋转和时间面板的展开收起相耦合。
![](https://i-blog.csdnimg.cn/blog_migrate/fc40f2a5c2fb7e87602c73318a0d778b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9b1b5042d41c5218cb86fd840943940d.png)
遇到的问题:
点击日历图标不能控制面板的开合动作
datepicker组件实例上通过代码手动聚焦,不支持手动失焦
无可用的直接控制时间面板开合的事件
解决方案:
方法1:将原有的日历图标通过display:none进行隐藏,将其替换成箭头。
i {display: none;} // 日历图标隐藏
i {width: 11px; height: 7px;background: url(../../../assets/img/arrow.png) no-repeat center/100%;} // 日历图标替换成箭头
onMounted函数中获取箭头的dom元素,并给dom元素加入click监听事件。
期望实现:箭头旋转和时间面板开合同步变化。一是箭头选择:可以通过transform = 'rotate(0deg)'设置不同旋转角度来实现。二是时间面板开合,原有组件支持输入框聚焦面板打开,输入框失焦面板关闭。也就是说若可以代码实现手动聚焦和失焦,便可以控制时间面板的开合。
onMounted(() => {
// arrowPicture为箭头的dom元素 datePickerDom为时间组件dom元素
arrowPicture.value.addEventListener('click', () => {
if (失焦时) {
datePickerDom.value.focus();
arrowPicture.value.style.transform = 'rotate(180deg)'
} else if(聚焦时){
xxxx //此处需要手动触发时间组件的失焦事件;
arrowPicture.value.style.transform = 'rotate(0deg)'
}
});
});
由于datepicker组件实例上不支持手动失焦,因为方法1不可行,方法2给出了间接手动失焦的方案。
方法2:方法1的弊端在于箭头仍然作为时间组件的一部分,点击箭头后仍然是聚焦状态,同时组件实例不支持手动失焦。而点击浏览器其他区域时间组件便可失焦,方法2借用了这个点给出间接手动失焦的方案。
原有日历图标通过display:none进行隐藏,箭头开启绝对定位,时间组件开启相对定位。
i {display: none;} // 日历图标隐藏
.date-picker {position: relative} // 时间组件开启相对定位
.arrow-picture{position: absulute;z-index:999} // 箭头开启绝对定位
如此便将箭头与时间组件分离,箭头作为其他区域的一部分,点击箭头便相当于点击浏览器其他区域,间接实现时间组件失焦效果。通过间接手动失焦和聚焦,实现时间面板的开合和箭头旋转。
onMounted(() => {
// arrowPicture为箭头的dom元素 datePickerDom为时间组件dom元素
arrowPicture.value.addEventListener('click', () => {
if (失焦时) {
datePickerDom.value.focus();
arrowPicture.value.style.transform = 'rotate(180deg)'
} else if(聚焦时){
xxxxxx //此处无需再手动调用失焦函数,click时已经触发手动失焦事件
arrowPicture.value.style.transform = 'rotate(0deg)'
}
});
});