[vuejs] Ajouter qu'un seul Evénement resize

PhiSyX
Javascript

Yop tout le monde.

J'ai crée un composant "Custom Scrollbar", à chaque nouvelle instance de ce composant, je lui ajoute un événement resize pour que les hauteurs/largeurs prennent les bonnes dimensions. Et je supprime l'événement resize avant que le composant ne soit détruit. Jusque là, ok.

Comme j'aime trop mon composant, je me suis dis, tiens, je vais le mettre dans mon chat IRC develloppé aussi avec vue.js.

J'ajoute donc ce composant aux composants pouvant avoir une scrollbar horizontal ou verticale, comme par exemple l'historique des salons/privés etc..

Tiens, c'est cool ça fonctionne bien.
Le problème est que j'avais testé mon application que sur seul un salon. (donc un seul événement resize)
Si j'en rejoins 9, j'aurai donc 9 événements resize, ce qui me dérange niveau performences... :/

Comment pourrais-je limiter celà?

Merci."

1 réponse

PhiSyX
Auteur
Réponse acceptée

Yop. Bon j'ai trouvé une solution! :-)

Pour ceux à qui ça interesse:
J'ai ajouté l'événement resize au démarrage de mon application et j'ajoute les méthodes dans un objet store (avec vuex) quand j'en ai besoin. À chaque redimensionnement je boucle l'objet store et execute les méthodes.

Viteuf comment ça s'passe

<Root>
    <ChatApp> ready () { // 1 seul événement resize.
                window.addEventListener('resize', throttle(this.listensResizeEvent, 50))
              }
        ...
        each room in rooms
            <ScrollView>
              ready () {
                this.$store.dispatch(
                  'ADD_EVENT_LISTENER_RESIZE',
                  set({}, `resizeScrollbarItem${this.room.id}`, this.adjustGripper)
                )
              }, 
              beforeDestroy () {
                this.$store.dispatch(
                  'REMOVE_EVENT_LISTENER_RESIZE',
                  `resizeScrollbarItem${this.room.id}`
                )
              }

            <ScrollView>
              ready () {
                this.$store.dispatch(
                  'ADD_EVENT_LISTENER_RESIZE',
                  set({}, `resizeScrollbarItem${this.room.id}`, this.adjustGripper)
                )
              },
              beforeDestroy () {
                this.$store.dispatch(
                  'REMOVE_EVENT_LISTENER_RESIZE',
                  `resizeScrollbarItem${this.room.id}`
                )
              }
            ... etc
        endeach

Mon objet store:

Et un seul évenement resize:

Si vous avez mieux, ou autre chose, je suis preneur. Mais pour l'instant je vais me contenter de çà... :-P

Merci ^^