Hablando a la vanguardia: la vista medida tiene un problema de pérdida de memoria, el proyecto oficial todavía no se utiliza, a menos que el oficial solucione este problema.
Aunque esta biblioteca de componentes tiene grandes problemas, pero como la primera biblioteca de componentes utilizada desde que aprendí vue, sigue siendo muy útil para mí. Por otro lado, también se debe a su diseño. Hay muchos lugares que no pueden cumplir con los negocios de la compañía. Las demandas me han hecho mirar a menudo el código fuente de iview para encontrar formas de cubrir los componentes de iview para satisfacer mis necesidades. Presumiblemente, no usaré esta biblioteca de componentes (pérdida de memoria) en el futuro, pero vale la pena aprender su diseño. Todavía podemos referirnos a su método de diseño al diseñar componentes. A continuación, resumiré (tucao) sobre los problemas y soluciones recientemente encontrados en el proyecto.
1 entrada
El más utilizado es el cuadro de entrada, y la mayoría de ellos se usan junto con el formulario. Su atributo que se puede borrar es relativamente grande.
Una es que no hay un evento claro. Hay un requisito en el negocio de borrar el cuadro de entrada y buscar nuevamente. Aquí, solo podemos escuchar el evento de cambio y juzgar que el valor está vacío.
El segundo problema es que cuando se usa el borrado, el botón de borrar que deshabilita el cuadro de entrada no está deshabilitado. Todavía puede hacer clic en la bifurcación para borrar el cuadro de entrada. Debe controlar manualmente el borrado a falso.
2 、 Número de entrada
Si no hay un evento enter, es más problemático buscar después de presionar Enter. Resulta que es establecer un lapso en la capa externa y agregar un evento keyup en el lapso. Más tarde, descubrí que una mejor manera es usar el evento nativo. El modificador nativo será Agregue el evento al elemento más externo del componente como un evento nativo, por lo que creo que la entrada al ingresar es un poco redundante.
Dos problemas de precisión, el estado ideal es redondear el cuadro de entrada después de perder el foco, pero el cuadro de entrada comienza a redondearse tan pronto como cambia el cuadro de entrada, lo que resulta en una mala experiencia del usuario. En la actualidad, es escribir eventos de desenfoque para controlar manualmente la precisión. El analizador y el formateador tampoco son fáciles El comportamiento no es fácil de controlar.
Los tres botones de aumento / disminución no tienen atributos para controlar si están activados o desactivados, y debe anular manualmente el estilo cuando no necesita visualización: ninguno
4. No se puede borrar y la entrada no está unificada, y ahora no hay solución
5. No hay ranuras delanteras y traseras, y el signo de porcentaje de la unidad, etc., se fijan mediante posicionamiento absoluto (el analizador y el formateador no son fáciles de usar)
3 、 Seleccionar
No hay muchos problemas con la selección. Tenga en cuenta que la selección múltiple y la búsqueda remota se pueden usar al mismo tiempo. El único problema es el estilo de la selección múltiple
Además, cuando ya existe una opción, copie el texto directamente en la posición del texto que está cubierta por la etiqueta, esto aún no se ha resuelto
4. Forma
La verificación de formularios es un punto difícil: en escenarios reales, la lógica de verificación cambia constantemente. Si es un poco más complicado y requiere verificación de fondo, se debe usar un validador personalizado.
La verificación de los elementos del formulario en un bucle, utilizando el siguiente método
La segunda fuerza activa la verificación de un elemento de formulario y utiliza el valor entrante para verificar
Tres mensajes de error personalizados
El mensaje de error en forma de iview solo puede ser texto y la altura es fija. Cuando el mensaje de error es más complicado o incluso requiere un efecto interactivo, el mensaje de error que viene con la vista no se puede lograr. Actualmente hay dos casos
1 El error de verificación solicita más de dos líneas
Cambie la altura fija original a expansión automática, ajuste el espacio según la situación real
2 Hay un botón para hacer clic en el mensaje de error
Establezca show-message en falso e inserte el mensaje de error usted mismo. Aquí, de hecho, el código FormItem de iView se copia y modifica directamente, principalmente para mantener el estilo consistente.
5 Cascader Cascade Selection Box
El problema con el cuadro de selección en cascada es que iview usa v-show para controlar la lista desplegable.Si la cantidad de datos es grande, como en el país, hará que la página se cargue muy lentamente (2-3 segundos).
Ahora copié una copia de la cascada de iview, modifiqué los tres v-shows dentro de v-if, para que el cuadro desplegable no se muestre cuando se carga la página
6 mesa
El mayor problema con las tablas son las pérdidas de memoria. Cada vez que entra una página con una tabla, el uso de memoria del navegador aumentará mucho y no se recolectará basura. Este problema no tiene ningún efecto. Durante el proyecto, encontré los detalles de la ventana emergente lateral que apareció automáticamente después de ingresar a la lista. Después de ver el código fuente, descubrí que en realidad hay un método para hacer clic en una fila de la tabla. ClickCurrentRow, la solución es la siguiente.
7 DropDown
Lo más incómodo acerca del menú desplegable es que su DropdownItem no tiene un evento de clic. Aunque se puede decir que el evento nativo se puede usar en la plantilla, no hay forma de usar el modificador nativo en la función de renderizado (que aún no se conoce), por lo que solo se puede envolver en una capa. div, escribe eventos en el div
