DatePicker日期选择器图标替换

实现目标：实现datepicker中的日历图标替换成类似于select选择器组件的箭头，且箭头旋转和时间面板的展开收起相耦合。

遇到的问题：

点击日历图标不能控制面板的开合动作

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

DatePicker日期选择器图标替换

猜你喜欢