Utilisation de vuejs avec des composants à fichier unique et vuex. Les données transitent via une connexion Websocket, et j'utilise Vuex pour gérer l'état et lier les données à afficher dans divers composants. Tout cela fonctionne très bien.

J'utilise simplement mapState dans le fichier de composant, puis affiche cette valeur dans le html.

Pour certaines données, j'aimerais appliquer une transition chaque fois qu'une valeur change. c'est-à-dire - flasher / clignoter la valeur - flasher / clignoter la couleur de fond

J'affiche des valeurs numériques, et la pensée pourrait sembler agréable de clignoter brièvement en vert lorsque le nombre augmente et en rouge lorsque le nombre diminue. Débat toujours si je veux flasher le texte réel, ou la div contenant le texte. Débattre également si je veux rétablir la couleur en noir après le bref flash de couleur.

Existe-t-il un moyen de le faire facilement à vuejs? Je comprends comment utiliser les valeurs calculées, mais comment puis-je déclencher une animation de changement de couleur lorsque la valeur est mise à jour à partir de vuex.

0
Bob Dobbs 4 nov. 2019 à 05:21

1 réponse

Vous avez plusieurs options, selon ce que vous décidez finalement de l'effet.

Voici la solution la plus simple. Utilisez un watch er sur le getter computed et une classe conditionnelle pour styliser vos valeurs.

data: {
  myValue: {
    prev: 150,
    latest: 100
  }
},
computed: {
  valueInStore() {
    return this.$store.getters.value
  }
},
watch: {
  valueInStore(newValue, oldValue) {
    this.myValue.prev = oldValue
    this.myValue.latest = newValue
  }
}

Pour afficher la classe css correcte, vous

<div :class="getColorClass(myValye)">{{ myValue.latest }}</div>

...

methods: {
  // method instead of computed since you were talking about multiple values
  getColorClass(foo) {
    return this.myValue.prev < this.myValue.latest ? 'green' : 'red'
  },
}

Selon vos besoins, vous devrez peut-être vous adapter au cas prev == latest.

Vous pouvez désormais utiliser les styles ou animations CSS que vous souhaitez dans les classes .green et .red.

0
TommyF 4 nov. 2019 à 07:00