[Résumé de l'hématémèse] Plus de 20 bibliothèques de composants Vue utiles, venez les récupérer !

Cet article résume et partage avec vous plus de 20 bibliothèques de composants Vue utiles, qui peuvent aider les développeurs à améliorer l'efficacité et l'esthétique du développement. J'espère qu'il sera utile à tout le monde !

Dans cet article, nous explorerons certains des composants vue js les plus courants. Vous pouvez le récupérer.

Classe Table

Vue Tables-2

Adresse : https://github.com/matfish2/vue-tables-2

Vue Tables 2 vise à fournir aux développeurs un A entièrement fonctionnel ensemble d'outils pour créer des tableaux de données magnifiques et pratiques avec Vue. Des centaines de logiciels d'entreprise l'utilisent. De plus, Vue Tables 2 se développe, s'améliore et gagne constamment de nouvelles fonctionnalités. "Fonctionnalités"

Adresse : https://github.com/handsontable/handsontable/tree/master/wrappers/vue
• handsontable est un plug-in interactif de table côté page, qui peut charger et afficher le contenu du tableau et prendre en charge les éléments fusionnés et les statistiques. , Glissement de lignes et de colonnes, etc.
• En même temps, il prend en charge le traitement des pages de tableau chargées : ajout/suppression de lignes/colonnes, fusion de cellules, etc.
• De plus, cela fonctionne avec React, Angular et Vue. Handsontable est un composant JavaScript qui combine la fonctionnalité de grille de données avec l'expérience utilisateur d'une feuille de calcul. De plus, il fournit des opérations de liaison de données, de validation de données, de filtrage, de tri et CRUD.
• Fonctionnalités

Tri de plusieurs colonnes

Sélection non contiguë

Filtrer les données et valider les données

Exporter le fichier

Formatage conditionnel

Fusionner les cellules

Masquer les lignes/colonnes

Menu contextuel et commentaires

Ag Grid Vue
• Adresse : https://github.com/ag-grid/ag-grid
• Ag-Grid est un composant de table de données basé sur Vue.js. Parmi eux, « ag » signifie « agnostique ». Le moteur interne ag-Grid est implémenté en TypeScript sans aucune dépendance.
• ag-Grid prend en charge Vue via un composant wrapper, vous pouvez utiliser ag-Grid dans votre application comme n'importe quel autre composant Vue. Il prend en charge la transmission de la configuration via la liaison de propriétés et la gestion des événements via la liaison d'événements. Vous pouvez même utiliser les composants Vue pour personnaliser l'interface utilisateur de la grille et le contenu/comportement des cellules.
• Vue Easytable

Adresse : https://github.com/huangshuwei/vue-easytable

vue-easytable est l'un des composants de table Vue les plus puissants que j'ai jamais rencontrés.

Le composant tableau possède de nombreuses fonctionnalités intégrées, telles que les points de suspension des cellules, le dimensionnement des colonnes fixe/flexible, le filtrage personnalisé, etc. Il possède plusieurs fonctionnalités :

Internationalisation

Personnalisation du thème

Thème intégré

Défilement virtuel

Colonne corrigée

En-tête corrigé

Regroupement d'en-tête

Vue Good

Adresse : https://github.com/xaksis/vue-good-table
• Vue-Good-Table est un composant de table de données basé sur Vue.js. Il est simple et propre, et possède des fonctions plus basiques telles que le tri, le filtrage des colonnes. , pagination, etc. Fonction. Il a plusieurs caractéristiques : 索 recherche et tri de table
• filtrage et pagination
• table de cases à cocher
• style de ligne
• choix multiples

Vue toastification

Adresse : https://github.com /Maronato/vue-toastification

Il fournit des toasts légers, simples et beaux. Il intègre le support Nuxt. De plus, il prend en charge la nouvelle API Composition et Vue 3. Nous pouvons également utiliser SX pour développer des composants personnalisés afin de fournir des fonctions plus flexibles. De plus, l'enregistrement universel lui permet d'être utilisé dans n'importe quelle application, même React. Il possède plusieurs fonctionnalités :

Entièrement écrit en Typescript, prend en charge tous les types
• Prend en charge RTL
• Tout personnaliser
• Glisser pour fermer
• Créer des expériences personnalisées à l'aide des hooks onClose, onClick et onMounted
• Supprimer et mettre à jour par programmation Toast

Vue Toasted

Adresse : https://github.com/shakee93/vue-toasted

Vue Toasted est l'un des meilleurs plugins toast pour Vue. De nombreuses organisations lui font confiance telles que Vue, Laravel, NuxtJS, etc. Il est très réactif, a une bonne compatibilité, est facile à utiliser, attrayant et possède de riches fonctions, icônes, actions, etc.

Vue Notifications

Adresse : https://github.com/se-panfilov/vue-notifications

Vue Notifications est un composant de notification indépendant de la bibliothèque, non bloquant.

VueNotiments connecte votre application à la bibliothèque d'interface utilisateur de notification. Supporte miniToastr, VueToasted, VueEasyToast, toastr, iziToast, Noty, swal.

Vue Awesome Notifications

Adresse : https://f3oall.github.io/awesome-notifications/

Awesome Notifications est un JavaScript léger et entièrement personnalisable Vue Awesome Notifications, c'est la version Vue.js de la bibliothèque Awesome Notifications.

Vue Wait

Adresse : https://github.com/f/vue-wait

Vue Wait Il s'agit d'un composant complexe de chargement et de gestion de la progression pour les applications VUE, Vuex et Nuxt.

Vue Wait permet de gérer plusieurs états de chargement sur la page sans aucun conflit entre les états. Basé sur une idée très simple : en gérant un tableau (ou un magasin Vuex) avec plusieurs états de chargement, laissez le composant de chargement intégré écouter les chargeurs enregistrés et entrer immédiatement dans l'état de chargement.

Vue Content Loader

Adresse : https://github.com/egoist/vue-content-loader

Vue Content Loader est un chargement d'espace réservé SVG basé sur Vue.js qui peut être un composant SVG personnalisé pour créer un chargement d'espace réservé, tel que des cartes de chargement Facebook. Vue Content Loader est l'implémentation Vue de React-content-loader.

• Entièrement personnalisable : vous pouvez changer la couleur, la vitesse et la taille

• Créez votre propre équipement : créez facilement votre équipement personnalisé à l'aide d'outils en ligne

• Vous pouvez l'utiliser dès maintenant : il existe déjà de nombreux ensembles prédéfinis

• Performance

Epic Spinners

Adresse : https://epic-spinners.epicmax.co/

EpicSpinners est un ensemble d'effets de chargement Web faciles à utiliser créés par du CSS pur, et il intègre également des composants Vue, qui peuvent être facilement utilisés dans les projets Vue. Puisqu'il est construit avec du CSS pur, vous pouvez l'intégrer et l'utiliser dans n'importe quel projet Web !

Vue Radial Progress

Adresse : https://github.com/wyzant-dev/vue-radial-progress

Vue Radial Progress Il s'agit d'un composant de chargement avec un effet de barre de progression radiale, utilisant SVG et JavaScript dessinent un chargeur avec un effet de barre de progression radiale dégradée, qui peut être utilisé comme invite de chargement et de progression.

ICONS

Vue Feather Icons

Adresse : https://github.com/egoist/vue-feather-icons

Feather est un ensemble de bibliothèques d'icônes open source pour les concepteurs et les développeurs. et une belle bibliothèque d'icônes open source. Chaque icône est conçue sur une grille 24×24, mettant l'accent sur la simplicité, la cohérence et la lisibilité. De nombreux frameworks front-end produits par les grands fabricants ont des icônes intégrées gratuites pour un usage commercial.

Caractéristiques

• Chaque icône est conçue selon des normes unifiées et a un alignement parfait des pixels ;
• Le style de conception est cohérent, ce qui surpasse ces bibliothèques d'icônes patchwork
• Support couvrant une variété de scénarios de développement, pour les développeurs Très convivial ;

Vue Awesome

Adresse : https://github.com/Justineo/vue-awesome

Font Awesome est un ensemble de bibliothèques de polices d'icônes populaires que nous rencontrons souvent au cours du processus de développement réel. En ce qui concerne les scénarios où des icônes sont nécessaires, nous pouvons trouver et utiliser certaines icônes couramment utilisées directement dans Font Awesome sans concepteur. Personnellement, je pense que les icônes de Font Awesome sont assez complètes. Elles contiennent la plupart des icônes et prennent en charge divers frameworks.

Vue Material Design Icons

Adresse : https://github.com/robcresswell/vue-material-design-icons

Une collection d'icônes SVG Material Design sous forme de composants à fichier unique. De plus, cette bibliothèque est une collection de composants Vue à fichier unique pour le rendu des icônes Material Design. De plus, il inclut du CSS pour faciliter un peu la mise à l'échelle de l'icône.

Charts

Vue Apexccharts

Adresse : https://github.com/apexcharts/vue-apexcharts

Apexcharts est une bibliothèque de graphiques JavaScript moderne/construite interactive avec une API simple. Graphiques et visualisations . Vue Apexcharts est un composant Vue.js d'ApexCharts.

Vue Echarts

Adresse : https://github.com/Justineo/vue-echarts

vue-echarts est une bibliothèque de composants implémentée basée sur l'encapsulation echarts. Elle peut être installée directement selon la normale. méthode de référence des composants. Il suffit de citer. Pour une installation et une citation spécifiques, les lecteurs peuvent lire directement la documentation technique de vue-echarts.

Vue Chartjs

Adresse : https://github.com/apertureless/vue-chartjs

vue-chartjs est un package Vue pour Chart.js, permettant aux utilisateurs d'utiliser facilement Chart dans Vue .js , ce qui facilite la création de composants de graphiques réutilisables, parfaits pour les personnes qui ont besoin de graphiques simples qui s'exécutent aussi rapidement que possible. vue-chartjs résume la logique de base et expose également les objets Chart.js, permettant aux utilisateurs d'acquérir une flexibilité maximale.

V-Charts

Adresse : https://github.com/ElemeFE/v-charts

V-Charts est un composant d'icône basé sur Vue2.0 et Echarts, et un seul type a besoin à fournir uniformément Des graphiques communs peuvent être générés en définissant des éléments de configuration simples dans un format de données convivial à la fois pour le front-end et le back-end.

Time

Vue Timer Hook

Adresse : https://github.com/riderx/vue-timer-hook

Le module de minuterie Vue3 est inspiré de React-timer-hook. De plus, il s'agit d'un hook personnalisé pour gérer les minuteries, les chronomètres et la logique/état temporel dans les composants vue 3.

Vue Horizontal Timeline :

Adresse : https://github.com/guastallaigor/vue-horizontal-timeline

Vue Horizontal Timeline est un simple composant de chronologie horizontale créé avec Vue.js.

Adresse originale : https://medium.com/js-dojo/20-usefulue-js-components-2022-3bf9fbe5b556

Auteur : lindelof

(Partage de vidéos d'apprentissage : tutoriel vuejs, front web -fin )

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!