Botón flexible para Vue 2

Un ejemplo de cómo crear el componente Button para Vue 2, que se puede reutilizar en diferentes lugares de la aplicación.

Primero, imaginemos cómo debería verse este botón y qué debería poder hacer.

Imagina que ya hemos planteado el proyecto a través de vue-cli (o sin esta herramienta). Además, preparé la versión final de los estilos, puedes encontrarlos en el repositorio de Github.

Los íconos que utilicé como ejemplo son Íconos de material, pero se pueden reemplazar con cualquier otro, al menos con SVG.

Bueno, empecemos.

Vamos as crear un nuevo archivo, en el que estará nuestro botón, vamos a nombrarlo como sugiere Code-Style. BaseButton.vue

Ahora usemos nuestro botón en uno de los componentes. Dado que mi componente raíz es App.vue . Lo usaré.

Comenzamos nuestro proyecto y vemos el botón habitual, no podemos cambiar el texto dentro ahora, o de alguna manera afectarlo. Si usó los estilos finales que escribí al principio, entonces este botón en esta etapa parece texto sin formato, pero pronto cambiará.

Ahora agreguemos la capacidad de cambiar el texto dentro del botón. Hay varias formas de hacer esto. Usamos dos a la vez: accesorios y espacios :

Mostramos el botón en varias opciones para asegurarnos de que funciona

Genial, ahora nuestro botón admite la entrada del usuario.

Agreguemos la capacidad de controlar el tamaño y el color del botón. Los accesorios de Vue vuelven a ser adecuados para esta implementación. Pero ahora agregaremos más validación. Sí, nuestro botón solo admitirá algunos colores y tamaños, debemos bloquear los colores para los que no tenemos estilos, así como con los tamaños.

Y, por supuesto, miramos el resultado

También puede comprobar qué sucede si agregamos un tamaño que no supera la validación.

Por supuesto, deberíamos poder bloquear el botón para que después de hacer clic en él, no ejecutemos algún método. Por ejemplo, que envía una solicitud al servidor para obtener una lista de usuarios.

Y para que el usuario entienda que es necesario esperar, agregaremos una animación de carga.

Uno de nuestros puntos es la posibilidad de cambiar el botón por un enlace o utilizar otro componente, como enrutador-enlace . Para hacer esto, ayudaremos al atributo especial es .

Veamos el resultado, ahora tenemos la oportunidad de hacer no solo un botón sino también un vínculo. Podemos insertar cualquier componente en lugar de un botón que acepte sus propios atributos, ¡está bien!

Lo último que necesitamos agregar es una forma conveniente de agregar íconos. Por supuesto, podemos agregar iconos a través de la ranura predeterminada, pero podemos simplificar de esta manera, configurar ciertos estilos. Si hay otros componentes para los iconos, configúrelos.

Volveremos a realizar de forma rápida (utilería) y flexible ( slots ). Para accesorios , prepararemos HTML / clases para que el nombre del icono tenga un resultado final. Para las tragamonedas, no usaremos íconos de material, sino quizás algunos SVG, o simplemente más opciones para administrar estilos.

Como resultado, creamos un componente en el que podemos transferir muchos accesorios, espacios. Combínalos y obtén un botón único.

También puede mejorarlo, por ejemplo, agregando accesorios planos , para los cuales se aplicarán ciertos estilos.

Demostración: http://alexeykhr.github.io/vue-flexible-button