Embora isso tenha acontecido comigo com frequência, ainda tenho uma pequena lista de bibliotecas favoritas que usei em muitos projetos e que se provaram extremamente úteis ao longo do tempo. Tentei muitas abordagens para resolver os problemas que essas bibliotecas resolvem. Minha escolha foi influenciada pela conveniência de trabalhar com a biblioteca, pela variedade de suas capacidades, pela boa aparência do que se obtém ao usá-la. Como resultado, tenho a lista que desejo compartilhar com você.
1. Ocultar elementos clicando fora deles
Às vezes, acontece que você precisa acionar um evento quando o usuário clica fora de um elemento. Na maioria das vezes, você precisa fazer isso quando quiser para poder fechar uma lista suspensa ou caixa de diálogo. Existe um pacote para implementar esse comportamento que uso em quase todos os aplicativos que desenvolvo.
Esta é a biblioteca vue-clickaway .
Ocultar um elemento ao clicar fora dele
▍ Usando vue-clickaway
Normalmente incluo este pacote no
main.js, o que permite que seja usado em todo o aplicativo. Se ele se aplicar apenas a uma ou duas páginas, provavelmente você decidirá importá-lo apenas onde precisar.
Ao importá-lo individualmente, lembre-se de que você está importando uma diretiva, não um componente. Ou seja, a coisa certa a fazer é:
directives: { onClickaway }
Mas não assim:
components: { onClickaway }
Veja como tornar a diretiva disponível globalmente (em
main.js):
import { directive as onClickaway } from 'vue-clickaway'
Vue.directive('on-clickaway', onClickaway)
Veja como usar essa diretiva em um modelo (aqui está, para simplificar, uma versão abreviada do 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 eu tenho um campo completo para selecionar itens, incluindo uma lista de itens
<li>(não é mostrada no código). O botão acima é usado para exibir a lista na tela e, quando clico fora desse elemento, chamo o método que fecha a lista. Isso permite uma experiência do usuário muito melhor do que sempre ter que clicar no botão Fechar no canto do elemento. Obtemos essa funcionalidade adicionando a seguinte construção à descrição do botão:
v-on-clickaway="closeMethodName"
Observe que
vue-clickawayvocê deve sempre usar um método que feche algo, não um método que mostra e oculta um elemento. O que quero dizer é que o método conectado v-on-clickawaydeve ser semelhante a este:
closeMethod() {
this.showSomething = false
}
Mas este método não deveria ser assim:
toggleMethod() {
this.showSomething = !this.showSomething
}
Se você usar algo como um método
toggleMethod, quando clicar fora do elemento, você o abrirá e fechará, independentemente de onde clicar. Você provavelmente não precisa disso. Portanto, use apenas com v-on-clickawaymétodos que ocultam elementos.
2. Notificações pop-up
Você pode criar notificações do sistema usando uma variedade de ferramentas, mas sou um grande fã da biblioteca vue-toastification .
Notificação implementada com vue-toastification
Ela fornece ao desenvolvedor uma tonelada de personalizações que podem ser usadas para implementar notificações que atendam a uma ampla variedade de necessidades. Os recursos de estilo e animação da biblioteca permitem que você crie soluções atraentes e fáceis de usar que são melhores do que outros pacotes.
▍ Usando vue-toastification
A biblioteca
vue-toastificationpode ser usada de várias maneiras. Veja a documentação dela para detalhes. Portanto, pode ser aplicado em nível de componente, em nível global, ou mesmo em conjunto com Vuex , caso as notificações precisem ser mostradas com base em mudanças no estado da aplicação, ou em ações relacionadas ao servidor.
Aqui está um exemplo de uso global desta biblioteca (in
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,
})
Os estilos de notificação podem ser controlados separadamente, definindo-os em cada componente, mas, no caso acima, disponibilizei os estilos de notificação em todo o aplicativo, importando-os para
main.js. Depois disso, defini as configurações de notificação. Isso me poupou do trabalho de escrever o mesmo código sempre que precisava usar a notificação. A biblioteca vue-toastification tem um ótimo playground para experimentação. Nele, você pode ver os efeitos dos parâmetros nas notificações e copiar imediatamente o que você precisa em seu código. Isso é exatamente o que fiz no exemplo acima.
Vamos considerar alguns casos de uso para esta biblioteca.
▍ Opção 1: usar notificações em um componente (em um modelo)
<button @click="showToast">Show toast</button>
Este é o método chamado quando o botão é clicado:
methods: {
showToast() {
this.$toast.success("I'm a toast!")
}
}
▍Opção 2: exibir uma notificação quando ocorrer um erro (ou quando a operação for bem-sucedida) no Vuex
Aqui está um exemplo de código para demonstrar como usá-lo
this._vm.$toast.errorno Vuex quando ocorre um erro:
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)
}
}
Você pode alterar o tipo de notificação simplesmente mudando o nome do método
.errorpara .success, .infoou .warning. E, se necessário, você pode removê-lo completamente e receber uma notificação com as configurações padrão.
As notificações do sistema permitem que o desenvolvedor exiba algumas informações com base nas mudanças no estado do aplicativo ou quando ocorre um erro inesperado. Isso melhora a experiência do usuário do aplicativo. As notificações do sistema fornecem ao usuário uma indicação visual melhor dos eventos do que modais ou janelas de alerta feias. De fato, ao trabalhar com uma janela, o usuário precisa clicar novamente com o mouse para fechá-la. Os usuários apreciarão que você lhes dê dicas visuais de que algo está errado, eliminando a necessidade de olhar desamparadamente para a tela, esperando por um evento que nunca acontecerá. Além disso, as notificações são úteis para confirmar o sucesso de certas operações.
3. Trabalhar com tabelas
As tabelas são uma parte muito importante de muitos aplicativos da web. A escolha de uma biblioteca de planilhas de baixa qualidade pode causar muitos problemas. Eu tentei muitas bibliotecas semelhantes e me decidi por vue-good-table .
Exemplo de uso de vue-good-table
Tenho certeza de que esta biblioteca é capaz de resolver a maioria das tarefas de trabalho de mesa que um desenvolvedor enfrenta. E seu nome, "mesa boa", não são apenas palavras. Esta é uma biblioteca realmente boa e nos oferece muito mais recursos do que poderíamos esperar.
▍Usando vue-good-table
No exemplo a seguir,
:rowsvinculo os dados a um getter Vuex chamado 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'
}"
>
Aqui estão as descrições das colunas da tabela em dados locais (
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
},
]
Aqui
labelestá o cabeçalho da coluna exibido na tela e fieldesses são os dados a serem vinculados no getter Vuex.
No exemplo acima, estou usando alguns dos recursos de configuração da tabela vue-good-table. Isso, por exemplo, definir o formato de data de entrada e saída (isso me permite obter uma descrição completa da data e hora do servidor e mostrar essas informações aos usuários em um formato mais conveniente). Eu também o uso aqui
formatFnpara formatar o preço usando um método especial que mencionei toLocale. Então, eu personalizo a aparência das células da tabela vinculando tdClassàs classes que defini na minha tag local<style>... O pacote vue-good-table, na verdade, possui infinitas opções de personalização integradas. Esses recursos permitem que você crie tabelas adequadas para uma ampla variedade de usos.
▍Crie seus próprios modelos
A biblioteca vue-good-table também funciona bem com modelos criados pelos próprios programadores. Isso significa que você pode facilmente incorporar botões, campos para selecionar valores de uma lista ou qualquer outra coisa nas células da tabela. Para isso, basta, por meio da diretiva
v-if, indicar o local onde algo especial deve ser colocado. Aqui está um exemplo de adição de um botão a uma coluna da tabela.
<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>
Neste exemplo, estou descrevendo um botão que abre uma janela modal. É exibido no campo
cancelYn(na coluna) se o valor do campo de dados correspondente for igual Y.
Para adicionar outra coluna sua à tabela, você só precisa adicionar
v-else-ifuma construção após a tag de fechamento que usou a diretiva v-if(no nosso caso, é uma tag <span>). Depois disso, você precisa descrever a lógica da nova coluna. Em geral, podemos dizer que a biblioteca vue-good-table pode ajudar em qualquer situação relacionada à exibição de tabelas em páginas da web.
4. Ferramenta para escolher datas
E agora vou falar sobre uma biblioteca projetada para organizar a seleção de datas. Algo semelhante é encontrado em uma grande variedade de aplicativos da vida real. Existem muito mais bibliotecas que implementam essa funcionalidade do que bibliotecas para resolver outros problemas dos quais estou falando aqui. Eu retorno regularmente à biblioteca vue2-datepicker para resolver esse problema .
Exemplo de uso da biblioteca vue2-datepicker Os
controles do selecionador de data criados com esta biblioteca são fáceis de estilizar. Ele suporta uma tonelada de personalização relacionada à seleção de datas e intervalo de datas. A biblioteca permite criar elementos de interface de usuário simples e convenientes. Ele ainda oferece suporte a ferramentas de localização.
Observe que, embora o pacote seja chamado de vue2-datepicker, você não deve ter problemas em usá-lo em aplicativos baseados no Vue 3 (o mesmo vale para as outras bibliotecas discutidas neste artigo).
▍ Usando vue2-datepicker
A biblioteca pode ser importada para um componente ou incluída em um modelo.
Aqui está um exemplo de importação para um componente:
import DatePicker from 'vue2-datepicker';
//
import 'vue2-datepicker/index.css';
Veja como usá-lo em um modelo:
<date-picker
v-model="dateRange"
value-type="format"
range
@clear="resetList"
@input="searchDate"
></date-picker>
Aqui estou usando uma opção que
rangepermite ao usuário selecionar intervalos de datas. Aqui eu, usando uma diretiva v-model, conecto os dados inseridos pelos usuários ao valor dateRange. Então dateRange, por exemplo, vue-good-table pode ser usado para personalizar a saída dos dados na tabela. Além disso, uso opções de evento aqui - @cleare @input, usando-as para chamar métodos, um dos quais despeja a tabela ( resetList) e o segundo envia uma solicitação ao servidor ( searchDate). A biblioteca vue2-datepicker nos oferece muito mais opções e eventos do que descrevi aqui. Mas o que eu falei aqui, eu uso com mais frequência.
5. Avaliações
Os sistemas de classificação podem ser encontrados, por exemplo, em sites como Amazon e Rotten Tomatoes. Talvez você não use esses sistemas em todos os projetos, mas eu, em todos os sites onde for necessário, implemento esse recurso usando a biblioteca de classificação por estrelas vue .
Exemplo de uso da biblioteca de classificação por estrelas vue
Pode parecer que algo assim é muito fácil de criar você mesmo. Mas se você se aprofundar nos detalhes, descobrirá que projetar tal controle pode rapidamente se tornar muito mais difícil do que você poderia esperar. Esta biblioteca permite que você use suas próprias imagens SVG para personalizar a forma das formas usadas para pontuação. Ele permite que você ajuste o tamanho dos elementos, a distância entre eles, sua cor.
A classificação que um usuário deu a algo usando o controle de vue-star-rating pode ser facilmente usada
v-modelpara transferir para onde você planeja usá-la. As estimativas podem ser mutáveis ou imutáveis usando um único parâmetro.
E se você achar que precisa de mais recursos ao trabalhar com esta biblioteca, dê uma olhada no pacote vue-rate-it do mesmo autor.
▍ Usando a classificação vue-star
Veja como usar esta biblioteca em um modelo (com opções):
<star-rating
class="star-rating"
:rating="newReivew.score"
active-color="#FBE116"
:star-size="starSize"
:increment="increment"
:show-rating="showRating"
@rating-selected="setRating"
/>
Veja como importá-lo para um componente:
import StarRating from 'vue-star-rating'
export default {
components: {
StarRating
},
}
Resultado
Cobrimos 5 bibliotecas para Vue. Esperamos que você tenha encontrado algo aqui que seja útil para você no desenvolvimento de seus projetos.
Quais bibliotecas Vue.js você mais usa?
