Obwohl mir das ziemlich oft passiert ist, habe ich immer noch eine kleine Liste von Lieblingsbibliotheken, die ich in vielen Projekten verwendet habe und die sich im Laufe der Jahre als äußerst nützlich erwiesen haben. Ich habe viele Ansätze zur Lösung der Probleme ausprobiert, die diese Bibliotheken lösen. Meine Wahl wurde durch die Bequemlichkeit der Arbeit mit der Bibliothek, die Vielfalt ihrer Funktionen und das gute Erscheinungsbild dessen beeinflusst, was bei der Verwendung erzielt wird. Als Ergebnis habe ich die Liste, die ich mit Ihnen teilen möchte.
1. Ausblenden von Elementen durch Klicken außerhalb
Manchmal müssen Sie ein Ereignis auslösen, wenn der Benutzer außerhalb eines Elements klickt. Meistens müssen Sie dies tun, wenn Sie möchten, damit Sie eine Dropdown-Liste oder ein Dialogfeld schließen können. Es gibt ein Paket zur Implementierung dieses Verhaltens, das ich in fast jeder von mir entwickelten Anwendung verwende.
Dies ist die vue-clickaway-Bibliothek .
Ausblenden eines Elements, wenn Sie außerhalb des Elements klicken
▍Verwenden Sie vue-clickaway
Normalerweise füge ich dieses Paket hinzu
main.js, wodurch es in der gesamten Anwendung verwendet werden kann. Wenn es nur für eine oder zwei Seiten gilt, entscheiden Sie sich höchstwahrscheinlich, es nur dort zu importieren, wo Sie es benötigen.
Denken Sie beim Einzelimport daran, dass Sie eine Direktive und keine Komponente importieren. Das heißt, das Richtige ist:
directives: { onClickaway }
Aber nicht so:
components: { onClickaway }
So stellen Sie die Richtlinie global (in
main.js) zur Verfügung:
import { directive as onClickaway } from 'vue-clickaway'
Vue.directive('on-clickaway', onClickaway)
So verwenden Sie diese Anweisung in einer Vorlage (der Einfachheit halber hier eine abgekürzte Version des Codes):
<button
v-on-clickaway="closeYearSelect"
class="select_option gray"
@click="toggleYearSelect"
>
<span class="txt">{{ selectedYear }}</span>
<span class="arrow blind">Open</span>
</button>
Stellen Sie sich vor, ich habe ein vollwertiges Feld zum Auswählen von Elementen, einschließlich einer Liste von Elementen
<li>(es wird im Code nicht angezeigt). Die obige Schaltfläche wird verwendet, um die Liste auf dem Bildschirm anzuzeigen. Wenn ich außerhalb dieses Elements klicke, rufe ich dabei die Methode auf, mit der die Liste geschlossen wird. Dies ermöglicht eine viel bessere Benutzererfahrung, als immer auf die Schaltfläche zum Schließen in der Ecke des Elements klicken zu müssen. Wir erhalten diese Funktionalität, indem wir der Schaltflächenbeschreibung die folgende Konstruktion hinzufügen:
v-on-clickaway="closeMethodName"
Beachten
vue-clickawaySie, dass Sie immer eine Methode verwenden sollten, die etwas schließt, und keine Methode, die ein Element ein- und ausblendet. Was ich meine ist, dass die Methode, mit der verbunden ist, v-on-clickawayungefähr so aussehen sollte:
closeMethod() {
this.showSomething = false
}
Aber diese Methode sollte nicht so sein:
toggleMethod() {
this.showSomething = !this.showSomething
}
Wenn Sie so etwas wie eine Methode verwenden
toggleMethod, wird sie beim Klicken außerhalb eines Elements geöffnet und geschlossen, unabhängig davon, wo Sie klicken. Du brauchst es wahrscheinlich nicht. Verwenden Sie es also einfach mit v-on-clickawayMethoden, die Elemente ausblenden.
2. Popup-Benachrichtigungen
Sie können Toastbenachrichtigungen mit einer Vielzahl von Tools erstellen, aber ich bin ein großer Fan der vue-toastification-Bibliothek .
Mit vue-toastification implementierte Benachrichtigung
Es bietet einem Entwickler eine Vielzahl von Anpassungen, mit denen Benachrichtigungen implementiert werden können, die eine Vielzahl von Anforderungen erfüllen. Mit den Styling- und Animationsfunktionen der Bibliothek für Benachrichtigungen können Sie attraktive und benutzerfreundliche Lösungen erstellen, die besser sind als mit anderen Paketen.
▍Verwenden Sie eine Vue-Toastifizierung
Die Bibliothek
vue-toastificationkann auf verschiedene Arten verwendet werden. Einzelheiten finden Sie in ihrer Dokumentation. Es kann also auf Komponentenebene, auf globaler Ebene oder sogar in Verbindung mit Vuex angewendet werden , falls Benachrichtigungen aufgrund von Änderungen im Anwendungsstatus oder aufgrund von Aktionen im Zusammenhang mit dem Server angezeigt werden müssen.
Hier ist ein Beispiel für die globale Verwendung dieser Bibliothek (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,
})
Benachrichtigungsstile können separat gesteuert werden, indem sie in jeder Komponente festgelegt werden. Im obigen Fall habe ich Benachrichtigungsstile in der gesamten Anwendung verfügbar gemacht, indem ich sie in importiert habe
main.js. Danach habe ich die Benachrichtigungseinstellungen konfiguriert. Dies ersparte mir die Mühe, jedes Mal, wenn ich die Benachrichtigung verwenden musste, denselben Code zu schreiben. Die Vue-Toastification-Bibliothek bietet einen großartigen Spielplatz zum Experimentieren. Darauf können Sie die Auswirkungen der Parameter auf Benachrichtigungen sehen und sofort das, was Sie benötigen, in Ihren Code kopieren. Genau das habe ich im obigen Beispiel getan.
Betrachten wir einige Anwendungsfälle für diese Bibliothek.
▍Option 1: Verwenden von Benachrichtigungen in einer Komponente (in einer Vorlage)
<button @click="showToast">Show toast</button>
Hier ist die Methode, die aufgerufen wird, wenn auf die Schaltfläche geklickt wird:
methods: {
showToast() {
this.$toast.success("I'm a toast!")
}
}
▍Option 2: Zeigt eine Benachrichtigung an, wenn in Vuex ein Fehler auftritt (oder wenn der Vorgang erfolgreich ist)
Hier ist ein Beispielcode, der zeigt, wie er
this._vm.$toast.errorin Vuex verwendet wird, wenn ein Fehler auftritt:
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)
}
}
Sie können die Art der Benachrichtigung ändern , indem Sie einfach den Namen der Methode zu ändern ,
.errorum .success, .infooder .warning. Bei Bedarf können Sie es vollständig entfernen und eine Benachrichtigung mit den Standardeinstellungen erhalten.
Mit Toast-Benachrichtigungen kann der Entwickler einige Informationen anzeigen, die auf Änderungen im Anwendungsstatus oder auf dem Auftreten eines unerwarteten Fehlers basieren. Dies verbessert die Benutzererfahrung der Anwendung. Toast-Benachrichtigungen geben dem Benutzer eine bessere visuelle Anzeige von Ereignissen als Modal- oder hässliche Warnfenster. Wenn Sie mit einem Fenster arbeiten, muss der Benutzer erneut mit der Maus klicken, um es zu schließen. Benutzer werden es zu schätzen wissen, dass Sie ihnen visuelle Hinweise geben, dass etwas schief geht, sodass Sie nicht mehr hilflos auf den Bildschirm starren und auf ein Ereignis warten müssen, das niemals eintreten wird. Darüber hinaus sind Benachrichtigungen hilfreich, um den Erfolg bestimmter Vorgänge zu bestätigen.
3. Arbeiten mit Tabellen
Tabellen sind ein sehr wichtiger Bestandteil vieler Webanwendungen. Die Auswahl einer Tabellenkalkulationsbibliothek mit geringer Qualität kann viele Probleme verursachen. Ich habe viele ähnliche Bibliotheken ausprobiert und mich für vue-good-table entschieden .
Beispiel für die Verwendung von vue-good-table
Ich bin überzeugt, dass diese Bibliothek in der Lage ist, die meisten Tabellenarbeitsaufgaben eines Entwicklers zu lösen. Und sein Name "guter Tisch" besteht nicht nur aus Worten. Dies ist eine wirklich gute Bibliothek und bietet uns viel mehr Funktionen als wir vielleicht erwarten.
▍Verwenden Sie die Vue-Good-Tabelle
Im folgenden Beispiel binde ich Daten
:rowsan einen Vuex-Getter namens 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'
}"
>
Hier sind die Beschreibungen der Tabellenspalten in lokalen Daten (
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
},
]
Hier
labelwird die Spaltenüberschrift auf dem Bildschirm angezeigt. fieldDies sind die Daten, an die im Vuex-Getter gebunden werden soll.
Im obigen Beispiel verwende ich einige der Konfigurationsfunktionen für vue-good-table-Tabellen. Dies zum Beispiel das Einstellen des Eingabe- und Ausgabedatumformats (dies ermöglicht es mir, eine vollständige Beschreibung des Datums und der Uhrzeit vom Server zu übernehmen und diese Informationen den Benutzern in einem bequemeren Format anzuzeigen). Ich benutze es auch hier,
formatFnum den Preis mit einer speziellen Methode zu formatieren, die ich benannt habe toLocale. Dann passe ich das Aussehen der Tabellenzellen an, indem tdClassich an die Klassen binde , die ich in meinem lokalen Tag festgelegt habe<style>... Das vue-good-table-Paket verfügt über endlose Anpassungsoptionen. Mit diesen Funktionen können Sie Tabellen erstellen, die für eine Vielzahl von Anwendungen geeignet sind.
▍Erstellen Sie Ihre eigenen Vorlagen
Die vue-good-table-Bibliothek funktioniert auch gut mit Vorlagen, die von Programmierern selbst erstellt wurden. Dies bedeutet, dass Sie Schaltflächen, Felder zum Auswählen von Werten aus einer Liste oder andere Elemente einfach in Tabellenzellen einbetten können. Zu diesem Zweck reicht es aus, unter Verwendung der Richtlinie
v-ifden Ort anzugeben, an dem sich etwas Besonderes befinden sollte. Hier ist ein Beispiel für das Hinzufügen einer Schaltfläche zu einer Tabellenspalte.
<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>
In diesem Beispiel beschreibe ich eine Schaltfläche, die ein modales Fenster öffnet. Es wird im Feld
cancelYn(in der Spalte) angezeigt, wenn der Wert des entsprechenden Datenfelds gleich ist Y.
Um der Tabelle eine weitere eigene Spalte hinzuzufügen, müssen Sie nur
v-else-ifnach dem schließenden Tag, das die Direktive verwendet hat , ein Konstrukt hinzufügen v-if(in unserem Fall handelt es sich um ein Tag <span>). Danach müssen Sie die Logik der neuen Spalte beschreiben. Im Allgemeinen können wir sagen, dass die vue-good-table-Bibliothek in jeder Situation hilfreich sein kann, die mit der Anzeige von Tabellen auf Webseiten zusammenhängt.
4. Tool zum Auswählen von Daten
Und jetzt erzähle ich Ihnen von einer Bibliothek, die die Auswahl der Daten organisieren soll. Ähnliches findet sich in einer Vielzahl von realen Anwendungen. Es gibt viel mehr Bibliotheken, die diese Funktionalität implementieren, als Bibliotheken zur Lösung anderer Probleme, über die ich hier spreche. Ich kehre regelmäßig zur vue2-datepicker- Bibliothek zurück, um dieses Problem zu lösen .
Beispiel für die Verwendung der vue2-datepicker-Bibliothek Die
mit dieser Bibliothek erstellten Datumsauswahl-Steuerelemente sind einfach zu gestalten. Es unterstützt eine Vielzahl von Anpassungen in Bezug auf Datumsauswahl und Datumsbereich. Mit der Bibliothek können Sie übersichtliche und praktische Elemente der Benutzeroberfläche erstellen. Es werden sogar Lokalisierungstools unterstützt.
Beachten Sie, dass das Paket zwar vue2-datepicker heißt, Sie es jedoch problemlos in Vue 3-basierten Anwendungen verwenden sollten (dies gilt auch für die anderen in diesem Beitrag beschriebenen Bibliotheken).
▍Verwenden von vue2-datepicker
Die Bibliothek kann in eine Komponente importiert oder in eine Vorlage aufgenommen werden.
Hier ist ein Beispiel für den Import in eine Komponente:
import DatePicker from 'vue2-datepicker';
//
import 'vue2-datepicker/index.css';
So verwenden Sie es in einer Vorlage:
<date-picker
v-model="dateRange"
value-type="format"
range
@clear="resetList"
@input="searchDate"
></date-picker>
Hier verwende ich eine Option
range, mit der der Benutzer Datumsbereiche auswählen kann. Hier verbinde ich mithilfe einer Direktive v-modeldie von Benutzern eingegebenen Daten mit dem Wert dateRange. Dann dateRangekann beispielsweise vue-good-table verwendet werden, um die Ausgabe der Daten in der Tabelle anzupassen. Ich verwende hier auch Ereignisoptionen - @clearund @inputverwende sie zum Aufrufen von Methoden, von denen eine die Tabelle ( resetList) ausgibt und die zweite eine Anforderung an den Server ( searchDate) sendet . Die vue2-datepicker-Bibliothek bietet uns viel mehr Optionen und Ereignisse als ich hier beschrieben habe. Aber was ich hier erzählt habe, benutze ich am häufigsten.
5. Bewertungen
Bewertungssysteme finden Sie beispielsweise auf Websites wie Amazon und Rotten Tomatoes. Vielleicht verwenden Sie solche Systeme nicht in jedem Projekt, aber ich implementiere diese Funktion an jedem Ort, an dem sie benötigt wird, mithilfe der Vue-Star-Rating- Bibliothek .
Beispiel für die Verwendung der Vue-Star-Rating-Bibliothek
Es scheint, als wäre es sehr einfach, sich selbst etwas zu erstellen. Wenn Sie sich jedoch mit den Details befassen, stellt sich heraus, dass das Entwerfen eines solchen Steuerelements sehr schnell viel schwieriger werden kann, als Sie vielleicht erwarten. In dieser Bibliothek können Sie Ihre eigenen SVG-Bilder verwenden, um die Form der für die Bewertung verwendeten Formen anzupassen. Hier können Sie die Größe von Elementen, den Abstand zwischen ihnen und ihre Farbe anpassen.
Die Bewertung, die ein Benutzer mit dem Steuerelement aus der Vue-Star-Bewertung für etwas vergeben hat, kann leicht verwendet werden
v-model, um es an den Ort zu übergeben, an dem Sie es verwenden möchten. Schätzungen können mit einem einzigen Parameter veränderlich oder unveränderlich gemacht werden.
Wenn Sie feststellen, dass Sie bei der Arbeit mit dieser Bibliothek mehr Funktionen benötigen, schauen Sie sich das vue-rate-it- Paket desselben Autors an.
▍Verwenden Sie die Vue-Star-Bewertung
So verwenden Sie diese Bibliothek in einer Vorlage (mit Optionen):
<star-rating
class="star-rating"
:rating="newReivew.score"
active-color="#FBE116"
:star-size="starSize"
:increment="increment"
:show-rating="showRating"
@rating-selected="setRating"
/>
So importieren Sie es in eine Komponente:
import StarRating from 'vue-star-rating'
export default {
components: {
StarRating
},
}
Ergebnis
Wir haben 5 Bibliotheken für Vue behandelt. Wir hoffen, dass Sie hier etwas gefunden haben, das Ihnen bei der Entwicklung Ihrer Projekte nützlich sein wird.
Welche Vue.js-Bibliotheken verwenden Sie am häufigsten?
