Étiquette : VueJs

Scroll infini

scroll infini

Le scroll infini comme dans facebook et bien d’autre sites est possible de manière très simple dans VueJs.

Pour se faire, il existe une librairie VueJs : vue-infinite-scroll.

Comment installer

Si vous avez suivi mon tuto sur l’installation d’un environnement de développement complet pour VueJs, vous avez déjà utilisé les packages NPM. Pour installer cette libraire, c’est justement une commande NPM qu’il faut taper :

npm install vue-infinite-scroll --save

Configurer et utiliser

Comme tout package NPM, il faut l’importer dans le fichier principal App.js:

import ....
import infiniteScroll from 'vue-infinite-scroll'

Vue.use(infiniteScroll);
...
  1. On importe la librairie
  2. On l’utilise dans VueJs avec Vue.use…

Il ne reste plus qu’à utiliser la directive v-infinite-scroll-…

Voici comment on l’utilise : imaginons qu’on ait un élément DIV dans lequel on pourrait scroller à l’infini. A chaque scroll, on charge 10 lignes de données supplémentaires via une méthode qu’on appelle à chaque fois pour charger la suite :

Dans App.Vue:

<template>
  <div id="app" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <div v-for="d in data" :key="d.name">
      {{ d.name }}
    </div>
  </div>
</template>

On peut voir ici qu’on a:

  • Un attribut v-infinite-scroll qui indique que lorsqu’on scroll au-delà de la limite des données affichées, on charge la suite via une méthode “loadMore()” -> voir plus bas pour le détail de cette méthode.
  • Un autre attribut infinite-scroll-disabled basé sur la variable “busy” qui se trouve dans la partie DATA de notre App.Vue. Ainsi, quand on active la variable busy à true, l’infinite scroll est temporairement arrêté le temps du chargement du reste des données.
  • Et encore un autre : infinite-scroll-distance qui indique la distance minimum entre le bas du dernier élément visible et le scroll utilisé par l’utilisateur avant de demander le chargement du reste des données.
  • On a ensuite une boucle v-for pour afficher toutes nos données qui sont dans la partie DATA de notre App.Vue (variable nommée aussi “data” sous forme d’un tableau de données).

Voici à quoi ressemble le code de la partie SCRIPT dans App.Vue :

<script>
export default {
  name: 'App',
  data() {
    return {
      busy: false,
      data: []
    }
  },
  methods: {
    loadMore() {
      this.busy = true;
      setTimeout(() => {
        for (var i = 0; i < 10; i++) {
          this.data.push({ name: "Test" + i });
        }
        this.busy = false;
      }, 1000);
    }
  }
}
</script>

On peut donc voir ici:

  • La partie DATA qui contient bien notre variable BUSY et une données DATA qui n’est rien d’autre qu’un tableau de données pour afficher des données à l’infini remplie par notre fameuse méthode “loadMore”.
  • La partie METHODS qui contient notre fameuse méthode “loadMore” pour charger le reste des données : on charge en fait 10 lignes supplémentaires dans notre tableau de données “data” qui est affiché dans la partie HTML via notre boucle v-for. Cette méthode positionne également la variable “busy” à true avant de charger les données pour empêcher l’infinite scroll de demander à nouveau un chargement de données. Ensuite, on charge les données dans un tableau et on repositionne notre variable busy à false. Pour simuler une petite attente d’une seconde, on utilise setTimeout.

Simple et efficace

Comme vous pouvez le voir, vous pouvez donc faire un scroll infini en peu de temps et en peu de lignes de codes. N’hésitez pas à fouiller les librairies existantes et à en tester plusieurs lorsque vous recherchez quelque chose de particulier.

J’espère que cet article vous aura plu. N’hésitez pas à vous abonner à ce blog pour ne rien manquer, à commenter et aussi à partager cet article.

Je vous dis à très bientôt sur le blog “développement-web-facile.com“.

Menu contextuel personnalisé VueJs

menu contextuel vuejs

Vous avez souvent du voir des menus contextuels personnalisés qui apparaissent lorsque vous faites un clic droit par exemple dans vos messageries web.

Le clic droit étant exécuté côté client, il faut du code client pour modifier le comportement de ce clic, donc du javascript donc VueJs peut lui aussi gérer l’affichage d’un menu contextuel personnalisé.

Après quelques recherches et tests, le plus simple pour gérer cela, c’est d’utiliser une librairie VueJs : vue-simple-context-menu me semble la librairie la plus simple à utiliser et elle fait très bien le job. Voici comment cela fonctionne

Lire la suite

Les événements dans VueJs : s’y abonner et en déclencher

événements VueJs

Un événement est une chose qui se produit et dont on peut être mis au courant en s’y abonnant.

Exemple : l’événement “click” sur un contrôle de type “button” par exemple: en s’y abonnant, on sera prévenu que l’utilisateur a cliqué sur le bouton en question. Pour se faire, on va lier une fonction à cet événement et c’est cette fonction qui sera exécutée lors du clique sur le bouton. Ainsi, on peut effectuer une action sur base d’un événement.

Mais on peut également créer un événement sur un composant et le déclencher quand bon nous semble selon une action ou condition particulière. Ainsi, celui qui utilise notre composant pourra lui-aussi s’abonner à cet événement.

Lire la suite

La validation de formulaires dans VueJs

Validation formulaire vuejs

La validation de formulaires dans VueJs peut se faire manuellement sans rien ajouter à vue ou via des librairies existantes.

Dans cet article, nous verrons comment faire la validation manuelle (sans librairie). Un prochain article parlera de la validation via la librairie vuelidate (libre à vous de choisir d’autres librairies pour faire cette opération mais vous aurez déjà les bases).

Lire la suite