Aunque esto me ha pasado con bastante frecuencia, todavía tengo una pequeña lista de bibliotecas favoritas que he utilizado en muchos proyectos y que han demostrado ser de gran utilidad a lo largo del tiempo. He probado muchos enfoques para resolver los problemas que resuelven estas bibliotecas. Mi elección estuvo influenciada por la conveniencia de trabajar con la biblioteca, la variedad de sus capacidades, la buena apariencia de lo que se obtiene al usarla. Como resultado, tengo la lista que quiero compartir con ustedes.
1. Ocultar elementos haciendo clic fuera de ellos
A veces sucede que necesita activar un evento cuando el usuario hace clic fuera de un elemento. La mayoría de las veces, debe hacer esto cuando lo desee para poder cerrar una lista desplegable o un cuadro de diálogo. Hay un paquete para implementar este comportamiento que utilizo en casi todas las aplicaciones que desarrollo.
Esta es la biblioteca vue-clickaway .
Ocultar un elemento al hacer clic fuera de él
▍Usando vue-clickaway
Por lo general, incluyo este paquete
main.js, lo que permite su uso en toda la aplicación. Si solo se aplica a una o dos páginas, lo más probable es que decida importarlo solo donde lo necesite.
Al importarlo individualmente, recuerde que está importando una directiva, no un componente. Es decir, lo correcto es:
directives: { onClickaway }
Pero no así:
components: { onClickaway }
A continuación, se explica cómo hacer que la directiva esté disponible globalmente (en
main.js):
import { directive as onClickaway } from 'vue-clickaway'
Vue.directive('on-clickaway', onClickaway)
A continuación, se explica cómo usar esta directiva en una plantilla (aquí hay, por simplicidad, una versión abreviada del código):
<button
v-on-clickaway="closeYearSelect"
class="select_option gray"
@click="toggleYearSelect"
>
<span class="txt">{{ selectedYear }}</span>
<span class="arrow blind">Open</span>
</button>
Imagine que tengo un campo completo para seleccionar elementos, incluida una lista de elementos
<li>(no se muestra en el código). El botón de arriba se usa para mostrar la lista en la pantalla, y cuando hago clic fuera de este elemento, llamo al método que cierra la lista. Esto permite una experiencia de usuario mucho mejor que tener que hacer clic siempre en el botón de cierre ubicado en la esquina del elemento. Obtenemos esta funcionalidad agregando la siguiente construcción a la descripción del botón:
v-on-clickaway="closeMethodName"
Tenga en cuenta que
vue-clickawaysiempre debe usar un método que cierre algo, no un método que muestre y oculte un elemento. Lo que quiero decir es que el método conectado v-on-clickawaydebería verse así:
closeMethod() {
this.showSomething = false
}
Pero este método no debería ser así:
toggleMethod() {
this.showSomething = !this.showSomething
}
Si usa algo como un método
toggleMethod, cuando haga clic fuera del elemento, lo abrirá y cerrará, independientemente de dónde haga clic. Probablemente no lo necesite. Así que utilícelo con v-on-clickawaymétodos que oculten elementos.
2. Notificaciones emergentes
Puede crear notificaciones de tostadas utilizando una variedad de herramientas, pero soy un gran fanático de la biblioteca vue-toastification .
Notificación implementada con vue-toastification
Proporciona al desarrollador una gran cantidad de personalizaciones que pueden usarse para implementar notificaciones que satisfagan una amplia variedad de necesidades. Las capacidades de estilo y animación de la biblioteca para notificaciones le permiten crear soluciones atractivas y fáciles de usar que son mejores que las que puede crear con otros paquetes.
▍Uso de vue-toastification
La biblioteca
vue-toastificationse puede utilizar de diversas formas. Consulte su documentación para obtener más detalles. Por lo tanto, se puede aplicar a nivel de componente, a nivel global, o incluso en conjunto con Vuex , en el caso de que sea necesario mostrar notificaciones basadas en cambios en el estado de la aplicación, o en acciones relacionadas con el servidor.
A continuación, se muestra un ejemplo del uso global de esta biblioteca (en
main.js):
import Toast from "vue-toastification"
//
import "vue-toastification/dist/index.css"
Vue.use(Toast, {
transition: "Vue-Toastification__bounce",
maxToasts: 3,
newestOnTop: true,
position: "top-right",
timeout: 2000,
closeOnClick: true,
pauseOnFocusLoss: true,
pauseOnHover: false,
draggable: true,
draggablePercent: 0.7,
showCloseButtonOnHover: false,
hideProgressBar: true,
closeButton: "button",
icon: true,
rtl: false,
})
Los estilos de notificación se pueden controlar por separado configurándolos en cada componente, pero en el caso anterior, hice que los estilos de notificación estuvieran disponibles en toda la aplicación importándolos a
main.js. Después de eso, configuré los ajustes de notificación. Esto me salvó de tener que escribir el mismo código cada vez que necesito usar la notificación. La biblioteca de vue-toastification tiene un gran patio de juegos para la experimentación. En él, puede ver los efectos de los parámetros en las notificaciones e inmediatamente copiar lo que necesita en su código. Esto es exactamente lo que hice en el ejemplo anterior.
Consideremos un par de casos de uso para esta biblioteca.
▍Opción 1: usar notificaciones en un componente (en una plantilla)
<button @click="showToast">Show toast</button>
Aquí está el método llamado cuando se hace clic en el botón:
methods: {
showToast() {
this.$toast.success("I'm a toast!")
}
}
▍Opción 2: muestra una notificación cuando ocurre un error (o cuando la operación tiene éxito) en Vuex
Aquí hay un código de muestra para demostrar cómo usarlo
this._vm.$toast.erroren Vuex cuando ocurre un error:
async fetchSomeData({ commit }) {
const resource_uri = `/endpoint/url`
try {
await axios.get(resource_uri).then((response) => {
commit(SET_DATA, response.data)
})
} catch (err) {
this._vm.$toast.error('Error message: ' + err.message)
}
}
Puede cambiar el tipo de notificación simplemente cambiando el nombre del método
.errora .success, .infoo .warning. Y si es necesario, puede eliminarlo por completo y recibir una notificación con la configuración predeterminada.
Las notificaciones del brindis permiten al desarrollador mostrar cierta información en función de los cambios en el estado de la aplicación o cuando se produce un error inesperado. Esto mejora la experiencia del usuario de la aplicación. Las notificaciones de brindis brindan al usuario una mejor indicación visual de los eventos que los modales o las ventanas de alerta feas. De hecho, cuando se trabaja con una ventana, el usuario debe volver a hacer clic con el mouse para cerrarla. Los usuarios apreciarán que les dé señales visuales de que algo va mal, eliminando la necesidad de mirar la pantalla con impotencia, esperando un evento que nunca sucederá. Además, las notificaciones son útiles para confirmar el éxito de determinadas operaciones.
3. Trabajar con tablas
Las tablas son una parte muy importante de muchas aplicaciones web. La elección de una biblioteca de hojas de cálculo de baja calidad puede causar muchos problemas. Probé muchas bibliotecas similares y me decidí por vue-good-table .
Ejemplo de uso de vue-good-table
Estoy seguro de que esta biblioteca es capaz de resolver la mayoría de las tareas de trabajo de tablas que enfrenta un desarrollador. Y su nombre, "buena mesa", no son solo palabras. Esta es una biblioteca realmente buena y nos brinda muchas más funciones de las que podríamos esperar.
▍Uso de vue-good-table
En el siguiente ejemplo, vinculo datos
:rowsa un captador de Vuex llamado getOrderHistory:
<vue-good-table
class="mx-4"
:columns="columns"
:rows="getOrderHistory"
:search-options="{ enabled: true }"
:pagination-options="{
enabled: true,
mode: 'records',
perPage: 25,
position: 'top',
perPageDropdown: [25, 50, 100],
dropdownAllowAll: false,
setCurrentPage: 2,
nextLabel: 'next',
prevLabel: 'prev',
rowsPerPageLabel: 'Rows per page',
ofLabel: 'of',
pageLabel: 'page', // 'pages'
allLabel: 'All'
}"
>
Aquí están las descripciones de las columnas de la tabla en datos locales (
data()):
columns: [
{
label: 'Order Date',
field: 'orderDtime',
type: 'date',
dateInputFormat: 'yyyy-MM-dd HH:mm:ss',
dateOutputFormat: 'yyyy-MM-dd HH:mm:ss',
tdClass: 'force-text-center resizeFont'
},
{
label: 'Order Number',
field: 'orderGoodsCd',
type: 'text',
tdClass: 'resizeFont'
},
{
label: 'Title',
field: 'orderTitle',
type: 'text',
tdClass: 'resizeFont ellipsis'
},
{
label: 'Price',
field: 'saleAmt',
type: 'number',
formatFn: this.toLocale
},
{
label: 'Edit btn',
field: 'deliveryUpdateYn',
type: 'button',
tdClass: 'force-text-center',
sortable: false
},
]
Aquí
labelestá el encabezado de la columna que se muestra en la pantalla, y fieldestos son los datos que se deben vincular en el getter de Vuex.
En el ejemplo anterior, estoy usando algunas de las características de configuración de la tabla vue-good-table. Esto, por ejemplo, configurando el formato de fecha de entrada y salida (esto me permite tomar una descripción completa de la fecha y hora del servidor y mostrar esta información a los usuarios en un formato más conveniente). También lo uso aquí
formatFnpara formatear el precio usando un método especial que nombré toLocale. Luego personalizo el aspecto de las celdas de la tabla vinculándome tdClassa las clases que configuré en mi etiqueta local<style>... El paquete vue-good-table en realidad tiene un sinfín de opciones de personalización integradas. Estas capacidades le permiten crear tablas que son adecuadas para una amplia variedad de usos.
▍Crea tus propias plantillas
La biblioteca vue-good-table también funciona bien con plantillas creadas por los propios programadores. Esto significa que puede incrustar fácilmente botones, campos para seleccionar valores de una lista o cualquier otra cosa en las celdas de la tabla. Para hacer esto, es suficiente, usando la directiva
v-if, indicar el lugar donde debe ubicarse algo especial. A continuación, se muestra un ejemplo de cómo agregar un botón a una columna de la tabla.
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field === 'cancelYn' && props.row.cancelYn === 'Y' ">
<BaseButton class="button" @click="showModal">
Cancel Order
</BaseButton>
</span>
</template>
En este ejemplo, estoy describiendo un botón que abre una ventana modal. Se muestra en un campo
cancelYn(en una columna) si el valor del campo de datos correspondiente es igual Y.
Para agregar otra columna propia a la tabla, solo necesita agregar
v-else-ifuna construcción después de la etiqueta de cierre que usó la directiva v-if(en nuestro caso, es una etiqueta <span>). Después de eso, debe describir la lógica de la nueva columna. En general, podemos decir que la biblioteca vue-good-table puede ayudar en cualquier situación relacionada con la visualización de tablas en páginas web.
4. Herramienta para elegir fechas
Y ahora te cuento una biblioteca diseñada para organizar la selección de fechas. Algo similar se encuentra en una gran variedad de aplicaciones de la vida real. Hay muchas más bibliotecas que implementan esta funcionalidad que bibliotecas para resolver otros problemas de los que estoy hablando aquí. Regreso regularmente a la biblioteca vue2-datepicker para resolver este problema .
Ejemplo de uso de la biblioteca vue2-datepicker Los
controles del selector de fecha creados con esta biblioteca son fáciles de diseñar . Admite una tonelada de personalización relacionada con la selección de fechas y los rangos de fechas. La biblioteca le permite crear elementos de interfaz de usuario prolijos y convenientes. Incluso admite herramientas de localización.
Tenga en cuenta que aunque el paquete se llama vue2-datepicker, no debería tener problemas para usarlo en aplicaciones basadas en Vue 3 (lo mismo ocurre con las otras bibliotecas discutidas en esta publicación).
▍Uso de vue2-datepicker
La biblioteca puede importarse a un componente o incluirse en una plantilla.
A continuación, se muestra un ejemplo de cómo importarlo a un componente:
import DatePicker from 'vue2-datepicker';
//
import 'vue2-datepicker/index.css';
A continuación, le indicamos cómo usarlo en una plantilla:
<date-picker
v-model="dateRange"
value-type="format"
range
@clear="resetList"
@input="searchDate"
></date-picker>
Aquí estoy usando una opción que
rangepermite al usuario seleccionar rangos de fechas. Aquí yo, usando una directiva v-model, conecto los datos ingresados por los usuarios al valor dateRange. Entonces dateRange, por ejemplo, vue-good-table se puede usar para personalizar la salida de los datos en la tabla. También utilizo opciones de eventos aquí, @cleary las @inputuso para llamar a métodos, uno de los cuales descarga la tabla ( resetList) y el segundo envía una solicitud al servidor ( searchDate). La biblioteca vue2-datepicker nos ofrece muchas más opciones y eventos de los que he descrito aquí. Pero lo que he dicho aquí, lo uso con mayor frecuencia.
5. Calificaciones
Los sistemas de clasificación se pueden encontrar, por ejemplo, en sitios como Amazon y Rotten Tomatoes. Quizás usted no utilice estos sistemas en todos los proyectos, pero yo, en todos los sitios donde se necesita, implemento esta función utilizando la biblioteca vue-star-rating .
Ejemplo de uso de la biblioteca vue-star-rating
Puede parecer que algo como esto es muy fácil de crear usted mismo. Pero si profundiza en los detalles, resulta que diseñar un control de este tipo puede volverse rápidamente mucho más difícil de lo que cabría esperar. Esta biblioteca le permite utilizar sus propias imágenes SVG para personalizar la forma de las formas utilizadas para la puntuación. Te permite ajustar el tamaño de los elementos, la distancia entre ellos, su color.
La calificación que un usuario ha otorgado a algo que usa el control de vue-star-rating se puede usar fácilmente
v-modelpara pasarlo a donde planea usarlo. Las estimaciones se pueden hacer mutables o inmutables usando un solo parámetro.
Y si descubre que necesita más funciones al trabajar con esta biblioteca, eche un vistazo al paquete vue-rate-it del mismo autor.
▍Utilizando vue-star-rating
A continuación, se explica cómo usar esta biblioteca en una plantilla (con opciones):
<star-rating
class="star-rating"
:rating="newReivew.score"
active-color="#FBE116"
:star-size="starSize"
:increment="increment"
:show-rating="showRating"
@rating-selected="setRating"
/>
A continuación, se explica cómo importarlo a un componente:
import StarRating from 'vue-star-rating'
export default {
components: {
StarRating
},
}
Salir
Hemos cubierto 5 bibliotecas para Vue. Esperamos que haya encontrado aquí algo que le sea de utilidad a la hora de desarrollar sus proyectos.
¿Qué bibliotecas de Vue.js usas más?
