Reemplazo del icono del selector de fecha DatePicker

Darse cuenta del objetivo: darse cuenta de que el ícono de calendario en el selector de fechas se reemplaza por una flecha similar al componente del selector, y la rotación de la flecha se combina con la expansión y contracción del panel de tiempo .

Problemas encontrados:

1. Al hacer clic en el icono del calendario no se puede controlar la apertura y el cierre del panel

2. La instancia del componente selector de fecha se enfoca manualmente a través del código y no se admite el desenfoque manual.

3. No hay eventos disponibles para controlar directamente la apertura y el cierre del panel de tiempo

solución:

Método 1: Oculte el ícono del calendario original con display:none y reemplácelo con una flecha.

i {display: none;} // 日历图标隐藏
i {width: 11px; height: 7px;background: url(../../../assets/img/arrow.png) no-repeat center/100%;} // 日历图标替换成箭头

Obtenga el elemento dom de la flecha en la función onMounted y agregue un evento de escucha de clic al elemento dom.

Realización esperada : La rotación de la flecha y el tiempo de apertura y cierre del panel cambian sincrónicamente. Una es la selección de flecha : se puede lograr configurando diferentes ángulos de rotación a través de transform = 'rotate (0deg)'. El segundo es la apertura y el cierre del panel de tiempo . El componente original admite la apertura del panel de enfoque del cuadro de entrada y el cierre del panel fuera de foco del cuadro de entrada. Es decir, si el código puede realizar enfoque y desenfoque manual, puede controlar la apertura y cierre del panel de tiempo.

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

Dado que la instancia del componente datepicker no admite el desenfoque manual, el método 1 no es factible y el método 2 proporciona una solución de desenfoque manual indirecto.

Método 2: la desventaja del método 1 es que la flecha aún es parte del componente de tiempo y aún está en el estado enfocado después de hacer clic en la flecha, y la instancia del componente no admite el desenfoque manual. Haga clic en el componente de tiempo en otras áreas del navegador para perder el enfoque. El método 2 usa este punto para proporcionar una solución de enfoque manual indirecto.

El ícono del calendario original está oculto por display:none, la flecha está habilitada para el posicionamiento absoluto y el componente de tiempo está habilitado para el posicionamiento relativo.

i {display: none;} // 日历图标隐藏
.date-picker {position: relative} // 时间组件开启相对定位
.arrow-picture{position: absulute；z-index:999} // 箭头开启绝对定位

De esta forma, la flecha se separa del componente de tiempo y la flecha forma parte de otras áreas. Hacer clic en la flecha equivale a hacer clic en otras áreas del navegador, lo que indirectamente produce el efecto de desenfoque del componente de tiempo. A través de desenfoque y enfoque manual indirecto, se realizan la apertura y el cierre del panel de tiempo y la rotación de la flecha.

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