


[Hematemesis-Zusammenfassung] Über 20 nützliche Vue-Komponentenbibliotheken, kommen Sie und holen Sie sie ab!
Dieser Artikel fasst mehr als 20 nützliche Vue-Komponentenbibliotheken zusammen, die Entwicklern helfen können, die Entwicklungseffizienz und -ästhetik zu verbessern. Ich hoffe, dass er für alle hilfreich ist!
In diesem Artikel werden wir einige der häufigsten Vue-JS-Komponenten untersuchen. Sie können es abholen.
Table-Klasse
Vue Tables-2
Adresse: https://github.com/matfish2/vue-tables-2
Vue Tables 2 zielt darauf ab, Entwicklern eine voll funktionsfähige A Toolset zum Erstellen schöner und praktischer Datentabellen mit Vue. Hunderte von Unternehmenssoftwareanwendungen nutzen es. Darüber hinaus wird Vue Tables 2 ständig erweitert, verbessert und erhält neue Funktionen.
Funktionen
- Optionale Zeilen und Sticky-Header
- Virtuelles Paging
- CSV-Download von Kundenkomponentendaten
- Mehrstufige Gruppierung mit Datenschichtunterstützung
- Tailwind-Theme
Handsontable
Adresse: https://github.com/handsontable/handsontable/tree/master/wrappers/vue
handsontable ist ein interaktives Plug-In für seitenseitige Tabellen, das Tabelleninhalte laden und anzeigen kann und zusammengeführte Elemente und Statistiken unterstützen kann , Zeilen- und Spaltenziehen usw.
Gleichzeitig unterstützt es die Verarbeitung geladener Tabellenseiten: Hinzufügen/Löschen von Zeilen/Spalten, Zusammenführen von Zellen usw.
Außerdem funktioniert es mit React, Angular und Vue. Handsontable ist eine JavaScript-Komponente, die Datenrasterfunktionen mit der Benutzererfahrung einer Tabellenkalkulation kombiniert. Darüber hinaus bietet es Datenbindung, Datenvalidierung, Filterung, Sortierung und CRUD-Operationen.
Funktionen
- Mehrspaltige Sortierung
- Nicht zusammenhängende Auswahl
- Daten filtern und Daten validieren
- Datei exportieren
- Bedingte Formatierung
- Zellen zusammenführen
- Zeilen/Spalten ausblenden ähm
- Kontextmenü und Kommentare
Ag Grid Vue
Adresse: https://github.com/ag-grid/ag-grid
Ag-Grid ist eine Datentabellenkomponente basierend auf Vue.js. Unter ihnen bedeutet „ag“ „Agnostiker“. Die interne ag-Grid-Engine ist in TypeScript ohne Abhängigkeiten implementiert.
ag-Grid unterstützt Vue über eine Wrapper-Komponente. Sie können ag-Grid wie jede andere Vue-Komponente in Ihrer Anwendung verwenden. Es unterstützt die Weitergabe der Konfiguration durch Eigenschaftsbindung und die Verarbeitung von Ereignissen durch Ereignisbindung. Sie können sogar Vue-Komponenten verwenden, um die Raster-Benutzeroberfläche und den Inhalt/das Verhalten von Zellen anzupassen.
Vue Easytable
Adresse: https://github.com/huangshuwei/vue-easytable
vue-easytable ist eine der leistungsstärksten Vue-Tabellenkomponenten, die mir je begegnet sind.
Die Tabellenkomponente verfügt über viele integrierte Funktionen, wie z. B. Zellenauslassungspunkte, feste/flexible Spaltengröße, benutzerdefinierte Filterung und mehr. Es verfügt über mehrere Funktionen:
- Internationalisierung
- Theme-Anpassung
- Eingebautes Theme
- Virtuelles Scrollen
- Spalte korrigiert
- Header korrigiert
- Header-Gruppierung
Vue Good Table
Adresse: https://github.com/xaksis/vue-good-table
Vue-Good-Table ist eine Datentabellenkomponente, die auf Vue.js basiert. Sie ist einfach und sauber und verfügt über grundlegendere Funktionen wie Sortieren und Spaltenfiltern , Paging usw. Funktion. Es hat mehrere Eigenschaften: 索 Tabellensuche und -sortierung
- Filtern und Paginieren
- Kontrollkästchentabelle
- Linienstil
- Mehrfachauswahl
- Vue Toastification
Adresse: https://github.com /Maronato/vue-toastification
Es bietet leichte, einfache und schöne Toasttipps. Es verfügt über eine integrierte Nuxt-Unterstützung. Darüber hinaus unterstützt es die neue Composition API und Vue 3. Wir können SX auch verwenden, um benutzerdefinierte Komponenten zu entwickeln, um flexiblere Funktionen bereitzustellen. Darüber hinaus ermöglicht die universelle Registrierung die Verwendung in jeder Anwendung, sogar in React. Es verfügt über mehrere Funktionen:
Komplett in Typescript geschrieben, unterstützt alle Typen
Unterstützt RTL
- Alles anpassen
- Zum Schließen schieben
- Benutzerdefinierte Erlebnisse mit onClose, onClick und onMounted Hooks erstellen
- Toast programmgesteuert löschen und aktualisieren
- Vue Toasted
Vue Toasted ist eines der besten Toast-Plugins für Vue. Viele Organisationen wie Vue, Laravel, NuxtJS usw. vertrauen darauf. Es reagiert sehr gut, ist gut kompatibel, einfach zu verwenden, attraktiv und verfügt über umfangreiche Funktionen, Symbole, Aktionen usw.
Vue Notifications
Adresse: https://github.com/se-panfilov/vue-notifications
Vue Notifications ist eine bibliotheksunabhängige, nicht blockierende Benachrichtigungskomponente.
VueNotiments verbindet Ihre App mit der Benachrichtigungs-UI-Bibliothek. Unterstützt miniToastr, VueToasted, VueEasyToast, toastr, iziToast, Noty, swal.
Vue Awesome Notifications
Adresse: https://f3oall.github.io/awesome-notifications/
Awesome Notifications ist ein leichtes, vollständig anpassbares JavaScript von Vue Awesome Notifications, es ist die Vue.js-Version der Awesome Notifications-Bibliothek.
Vue Wait
Adresse: https://github.com/f/vue-wait
Vue Wait Dies ist eine komplexe Lade- und Fortschrittsverwaltungskomponente für VUE-, Vuex- und Nuxt-Anwendungen.
Vue Wait hilft dabei, mehrere Ladezustände auf der Seite zu verwalten, ohne dass es zu Konflikten zwischen den Zuständen kommt. Basierend auf einer sehr einfachen Idee: Indem Sie ein Array (oder einen Vuex-Speicher) mit mehreren Ladezuständen verwalten, lassen Sie die integrierte Laderkomponente auf registrierte Lader warten und geben Sie den Ladezustand sofort ein.
Vue Content Loader
Adresse: https://github.com/egoist/vue-content-loader
Vue Content Loader ist ein Vue.js-basierter SVG-Platzhalter zum Laden, der als SVG-Komponente angepasst werden kann zum Erstellen von Platzhalter-Ladevorgängen, z. B. Facebook-Ladekarten. Vue Content Loader ist die Vue-Implementierung von React-Content-Loader.
Vollständig anpassbar: Sie können Farbe, Geschwindigkeit und Größe ändern.
Erstellen Sie Ihr eigenes Loadout: Erstellen Sie ganz einfach Ihr individuelles Loadout mit Online-Tools.
Sie können es jetzt verwenden: Es gibt bereits viele vorgefertigte Sets nach oben
Leistung
Epic Spinners
Adresse: https://epic-spinners.epicmax.co/
EpicSpinners ist eine Reihe benutzerfreundlicher Web-Loading-Effekte, die von erstellt wurden reines CSS, und es integriert auch Vue-Komponenten, die problemlos in Vue-Projekten verwendet werden können. Da es mit reinem CSS erstellt wurde, können Sie es in jedes Webprojekt integrieren und verwenden!
Vue Radial Progress
Adresse: https://github.com/wyzant-dev/vue-radial-progress
Vue Radial Progress Dies ist eine Ladekomponente für den radialen Fortschrittsbalkeneffekt unter Verwendung von SVG und JavaScript zeichnen einen Loader mit einem radialen Fortschrittsbalkeneffekt mit Farbverlauf, der als Lade- und Fortschrittsaufforderung verwendet werden kann.
ICONS
Vue Feather Icons
Adresse: https://github.com/egoist/vue-feather-icons
Feather ist eine Reihe von Open-Source-Icon-Bibliotheken für Designer und Entwickler und schöne Open-Source-Icon-Bibliothek. Jedes Symbol ist in einem 24×24-Raster gestaltet und legt Wert auf Einfachheit, Konsistenz und Lesbarkeit. Viele von großen Herstellern hergestellte Frontend-Frameworks verfügen über integrierte Symbole, die für die kommerzielle Nutzung kostenlos sind.
Funktionen
- Jedes Symbol ist nach einheitlichen Standards gestaltet und verfügt über eine perfekte Pixelausrichtung.
- Der Designstil ist konsistent, was diese Patchwork-Symbolbibliotheken übertrifft.
- Unterstützung für eine Vielzahl von Entwicklungsszenarien. Sehr freundlich.
Vue Awesome
Adresse: https://github.com/Justineo/vue-awesome
Font Awesome ist eine Reihe beliebter Symbolschriftbibliotheken, auf die wir während des eigentlichen Entwicklungsprozesses häufig stoßen. Wenn es um Szenarien geht, in denen Symbole benötigt werden, können wir einige häufig verwendete Symbole direkt in Font Awesome finden und verwenden, ohne dass ein Designer erforderlich ist. Persönlich finde ich, dass die Symbole von Font Awesome ziemlich vollständig sind. Es enthält die meisten Symbole und unterstützt verschiedene Frameworks.
Vue Material Design Icons
Adresse: https://github.com/robcresswell/vue-material-design-icons
Eine Sammlung von SVG Material Design Icons als Einzeldateikomponenten. Darüber hinaus handelt es sich bei dieser Bibliothek um eine Sammlung von Vue-Einzeldateikomponenten zum Rendern von Material Design-Symbolen. Darüber hinaus enthält es etwas CSS, um die Skalierung des Symbols etwas zu vereinfachen.
Charts
Vue Apexccharts
Adresse: https://github.com/apexcharts/vue-apexcharts
Apexcharts ist eine moderne JavaScript-Diagrammbibliothek/erstellt interaktiv mit einer einfachen API Diagramme und Visualisierungen . Vue Apexcharts ist eine Vue.js-Komponente von ApexCharts.
Vue Echarts
Adresse: https://github.com/Justineo/vue-echarts
vue-echarts ist eine Komponentenbibliothek, die auf der Echarts-Kapselung basiert. Sie kann wie gewohnt direkt installiert werden Komponenten-Referenzmethode. Für spezifische Installations- und Zitierhinweise können Leser direkt die technische Dokumentation von vue-echarts lesen.
Vue Chartjs
Adresse: https://github.com/apertureless/vue-chartjs
vue-chartjs ist ein Vue-Paket für Chart.js, das Benutzern die einfache Verwendung von Chart in Vue .js ermöglicht , wodurch es einfach ist, wiederverwendbare Diagrammkomponenten zu erstellen, ideal für Leute, die einfache Diagramme benötigen, die so schnell wie möglich ausgeführt werden. vue-chartjs abstrahiert die grundlegende Logik und macht auch Chart.js-Objekte verfügbar, sodass Benutzer maximale Flexibilität erhalten.
V-Charts
Adresse: https://github.com/ElemeFE/v-charts
V-Charts ist eine Symbolkomponente, die auf Vue2.0 und Echarts basiert und nur einen Typ benötigt einheitlich bereitzustellen Gemeinsame Diagramme können generiert werden, indem einfache Konfigurationselemente in einem Datenformat festgelegt werden, das sowohl für das Front-End als auch für das Back-End geeignet ist.
Zeit
Vue Timer Hook
Adresse: https://github.com/riderx/vue-timer-hook
Das Vue3-Timermodul ist vom React-Timer-Hook inspiriert. Darüber hinaus handelt es sich um einen benutzerdefinierten Hook zur Handhabung von Timern, Stoppuhren und Zeitlogik/-status in Vue 3-Komponenten.
Vue Horizontal Timeline:
Adresse: https://github.com/guastallaigor/vue-horizontal-timeline
Vue Horizontal Timeline ist eine einfache horizontale Timeline-Komponente, die mit Vue.js erstellt wurde.
Ursprüngliche Adresse: https://medium.com/js-dojo/20-usefulue-js-components-2022-3bf9fbe5b556
Autor: lindelof
(Teilen von Lernvideos: vuejs-Tutorial, Webseite -Ende )
Das obige ist der detaillierte Inhalt von[Hematemesis-Zusammenfassung] Über 20 nützliche Vue-Komponentenbibliotheken, kommen Sie und holen Sie sie ab!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



Es gibt drei Möglichkeiten, sich auf JS -Dateien in Vue.js zu beziehen: Geben Sie den Pfad direkt mit dem & lt; Skript & gt an. Etikett;; Dynamischer Import mit dem montierten () Lebenszyklushaken; und importieren über die Vuex State Management Library.

Mit der Watch -Option in Vue.js können Entwickler auf Änderungen in bestimmten Daten anhören. Wenn sich die Daten ändert, löst sich eine Rückruffunktion aus, um Aktualisierungsansichten oder andere Aufgaben auszuführen. Zu den Konfigurationsoptionen gehören unmittelbar, die festlegen, ob ein Rückruf sofort ausgeführt werden soll, und Deep, das feststellt, ob Änderungen an Objekten oder Arrays rekursiv anhören sollen.

Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.

In Vue.js können Komponenten oder Ressourcen bei Bedarf dynamisch geladen werden, wodurch die Ladezeit der Anfangsseite dynamisch geladen und die Leistung verbessert wird. Die spezifische Implementierungsmethode umfasst die Verwendung & lt; Keep-Alive & GT; und & lt; Komponente ist & gt; Komponenten. Es ist zu beachten, dass fauler Laden FOUC -Probleme (Splace Screen) verursachen kann und nur für Komponenten verwendet werden sollte, die eine faule Belastung erfordern, um unnötige Leistungsaufwand zu vermeiden.

Sie können der VUE -Taste eine Funktion hinzufügen, indem Sie die Taste in der HTML -Vorlage an eine Methode binden. Definieren Sie die Methode und schreiben Sie die Funktionslogik in der VUE -Instanz.

Implementieren Sie Marquee/Text-Scrolling-Effekte in VUE unter Verwendung von CSS-Animationen oder Bibliotheken von Drittanbietern. In diesem Artikel wird die Verwendung von CSS -Animation vorgestellt: Bildlauftext erstellen und Text mit & lt; div & gt;. Definieren Sie CSS -Animationen und setzen Sie Überlauf: Versteckt, Breite und Animation. Definieren Sie Keyframes, setzen Sie Transformation: Translatex () am Anfang und am Ende der Animation. Passen Sie die Animationseigenschaften wie Dauer, Bildlaufgeschwindigkeit und Richtung an.

Sie können die Vue -Version mit Vue Devtools abfragen, um die Registerkarte VUE in der Konsole des Browsers anzuzeigen. Verwenden Sie NPM, um den Befehl "npm list -g vue" auszuführen. Suchen Sie das Vue -Element im Objekt "Abhängigkeiten" der Datei package.json. Führen Sie für Vue -CLI -Projekte den Befehl "Vue --version" aus. Überprüfen Sie die Versionsinformationen im & lt; Skript & gt; Tag in der HTML -Datei, die sich auf die VUE -Datei bezieht.

VUE.JS hat vier Methoden, um zur vorherigen Seite zurückzukehren: $ router.go (-1) $ router.back () verwendet & lt; Router-Link to = & quot;/& quot; Komponentenfenster.history.back () und die Methodenauswahl hängt von der Szene ab.
