Vue-Bibliotheken zur Steigerung der Produktivität

Vue.js ist ein benutzerfreundliches Web-App-Framework, mit dem wir interaktive Front-End-Apps entwickeln können.

In diesem Artikel werden einige kleine Bibliotheken vorgestellt, die die Entwicklung unseres Projekts beschleunigen.

Vue-InputMask

Mit der Bibliothek vue-inputmask können wir einer Eingabe eine Eingabemaske hinzufügen. Eingabemasken werden verwendet, um das Format einer Eingabe auf das gewünschte zu beschränken.

Um es zu installieren, können wir Folgendes ausführen:

Dann können wir es wie folgt verwenden:

main.js :

App.vue :

Im obigen Code haben wir 2 Eingaben mit unterschiedlicher Formatvalidierung, wie in der Direktive v-mask angegeben.

99/99/9999 bedeutet, dass wir zwei Ziffern mit einem Schrägstrich eingeben. Dann noch 2 Ziffern mit einem weiteren Schrägstrich und danach noch 4 Ziffern.

99,99 bedeutet, dass wir 2 Ziffern eingeben, gefolgt von 2 weiteren Ziffern danach. Außerdem haben wir gierig in der zweiten Eingabe auf true gesetzt, was bedeutet, dass die Validierung während der Eingabe überprüft wird.

Wenn wir das haben, können wir eine Methode aufrufen, um zu überprüfen, ob die Eingabe das von der Eingabemaske geforderte Format erfüllt. Dazu rufen wir die Methode maskCheck auf, die das Objekt field mit dem Formularfeld verwendet, und verwenden dann field.target.inputmask.isComplete () zur Überprüfung der Gültigkeit.

Nachdem wir die 2. Eingabe eingegeben und die Eingabetaste gedrückt haben, werden "gültig" und "ungültig" protokolliert, wenn die eingegebene gültige bzw. ungültige Eingabe gültig ist.

Vue-Ripple-Direktive

Mit der vue-ripple-Direktive können wir einen Ripple-Effekt hinzufügen, wenn ein Benutzer auf ein Element auf der Seite klickt.

Um es zu installieren, führen wir Folgendes aus:

Dann können wir es wie folgt verwenden:

main.js :

App.vue :

Im obigen Code haben wir hinzugefügt:

in main.js , um die Direktive zu registrieren. Um beim Klicken einen Welleneffekt hinzuzufügen, müssen wir nur Folgendes hinzufügen:

Da ist nichts dran. Außerdem können wir das Ereignis, das den Ripple-Effekt auslöst, mit einem Modifikator wie folgt ändern:

Jetzt wird der Ripple-Effekt beim Mouseover statt beim Klicken angezeigt.

Wir können die Farbe des Hovers wie folgt ändern:

Wir ändern die Welligkeitsfarbe nur auf dem obigen Div in eine weißliche Farbe. Wir können die Farbe auch global anwenden, indem wir Folgendes schreiben:

main.js :

Im obigen Code haben wir:

, um den Welligkeitseffekt global mit neuer Farbe und neuem Z-Index zu ändern.

Vue-Focus

Mit dem Paket vue-focus können wir eine Eingabe einfach fokussieren. Um es zu installieren, führen wir Folgendes aus:

Um es zu verwenden, schreiben wir den folgenden Code:

App.vue :

Im obigen Code haben wir die Direktive focus von vue-focus nur in der Komponente registriert. Dann können wir das Feld fokussiert ändern, wenn auf die Schaltfläche zum Eingeben des Fokus auf true geklickt wird. Da wir dann v-focus = ”fokussiert” hinzugefügt haben, wird die Eingabe fokussiert, da fokussiert true ist und wir ihn als Wert für festlegen v-focus Direktive.

Schlussfolgerung

Vue-InputMask ist eine nützliche Anweisung, mit der wir eine Eingabemaske erstellen können, ohne eine von Grund auf neu zu schreiben. Mit dem Vue-Ripple-Directive-Paket können wir HTML-Elementen mit wenigen Codezeilen einen Ripple-Effekt hinzufügen.

Schließlich können wir mit Vue-Focus ein Eingabeelement programmgesteuert fokussieren, ohne Refs zu verwenden.