Vue realiza una vinculación de tres niveles en un terminal móvil_@Hao Chenguang

¿No es esto lo suficientemente simple para nuestro resultado final?

Por supuesto, si escribo tres contenedores h aquí, naturalmente nos convertiremos en un enlace de tres niveles.

El componente selector más externo se utiliza para exponer y controlar el texto mostrado externamente. la visualización y ocultación del selector en cascada. Al iniciar una nueva función, primero debemos completar la función principal. Una vez completada la función principal, podemos modificar algunos estilos, incluidos los efectos interactivos

Para esta plantilla, hay muy poco que explicar, tengo. Escribe todo en los comentarios

Lo primero a lo que debemos prestar atención es que en el método montado usamos el método this.$on, que se suscribe a un método que no existe en el componente actual. El evento se define en el componente h-wrapper, como verás más adelante

El resto no es complicado, así que no lo explicaré uno por uno

En la plantilla , necesitas centrarte en dos estilos. En la plantilla, debes centrarte en dos estilos, cuatro eventos y, por supuesto, la posición de las ranuras. Utilicé un truco donde escribí las cuatro opciones directamente en sus posiciones originales, una de las cuales también mostraba Seleccione, esto aseguró que la posición de las opciones siempre estaría en el centro.

En la lógica que usé activeIndex como puntos de referencia para determinar la ubicación de las opciones. Manipulo activeIndex para cambiar dinámicamente la posición de ul en los datos, por lo que la posición actual es siempre la posición calculada según el índice y la altura de la opción

Los eventos Touchstart, touchmove y touchend se utilizan para manipular el posición y deslizamiento del elemento

Sincroniza selectores en cascada internos y externos observando y activando eventos en tiempo real para escuchar las propiedades correspondientes

Sincronice selectores en cascada internos y externos observando y activando eventos en tiempo real para escuchar las propiedades correspondientes

En primer lugar, No hice demasiados ajustes en el estilo del selector, ¡pero se ve bastante bien!

Finalmente, creamos con éxito un selector en cascada adecuado para dispositivos móviles, que se puede utilizar para lograr vinculaciones de primer, segundo y tercer nivel. Por supuesto, no hay ningún problema con la vinculación por encima de un nivel. , pero en dispositivos móviles, recomiendo lograr como máximo tres niveles de vinculación, de lo contrario afectará la experiencia del usuario.