1
votes

Propriété CSS dynamique du style en ligne dans Vue

Je fais une boucle sur les éléments et je positionne div en utilisant les propriétés CSS du haut et de la gauche:

<div
v-for="coord in coords"
:style="{ top: coord.y + 'px', left: coord.x + 'px' }"
></div>

Parfois, au lieu de la propriété top , je dois utiliser bottom (cela dépend de l'une de mes valeurs de magasin Vuex). Comment puis-je définir dynamiquement si je dois utiliser la propriété CSS top ou bottom ?

J'ai essayé d'utiliser le prop calculé isTopOrBottom qui renverrait 'top' ou 'bottom: : style = "{isTopOrBottom: coord.y +' px ', left: coord.x +' px '}" . Mais cela ne fonctionne pas dans Vue.

vue.js vuejs2

1 commentaires

Vous pouvez simplement créer un composant puis définir une propriété computed () pour le style. Dans la propriété calculée, vous pouvez renvoyer un objet en fonction de vos conditions. Ou - si vous ne souhaitez pas créer de composants séparés - vous pouvez définir une méthode et l'appeler à partir du modèle. Ensuite, passez les coordonnées et renvoyez un objet en fonction de vos conditions. Les appels de méthode ne sont pas mis en cache comme les propriétés calculées.

4 Réponses :

0
votes

Vous pouvez faire quelque chose comme ceci:

.is-top {
    ...
}
.is-bottom {
    ...
}

Et dans votre script:

computed() {
    isTop() {
        // return top condition
    },
    isBottom() {
        // return bottom condition
    }
}

Gérer css :

:class="{ is-top: isTop, is-bottom: isBottom }"

1 commentaires

Je ne peux pas définir les classes .is-top et .is-bottom car leurs valeurs sont dynamiques. Il doit donc être intégré.

4
votes

Vous pouvez utiliser l'opérateur ternaire (au cas où les propriétés calculées ne fonctionneraient pas) Par exemple:

<span
class="description"
:class="darkMode ? 'dark-theme' : 'light-theme'"

J'espère cette aide.

1 commentaires

C'est la bonne réponse. L'opérateur ternaire avec la propriété calculée a fait le travail: `: style =" {top: isTop? Coord.y + 'px': '', bottom:! IsTop? Coord.y + 'px': '', left: coord. x + 'px'} "`. Merci!

1
votes

Cela devrait ressembler à une concaténation de chaînes JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
<div class="border-line"
    v-for="coord in coords"
    :style="'margin-top: '+coord.y + 'px;margin-left: '+coord.x + 'px'"
    >Test</div>
 </div>

.border-line{
  border: 1px solid;
}

Vue.config.productionTip = false;
Vue.config.devtools=false;

var app = new Vue({
  el: '#app',
  data:{
    coords:[{y:10,x:10},{y:20,x:20},{y:30,x:30}]
  }
});

<div
v-for="coord in coords"
:style="'top: '+coord.y + 'px;left: '+coord.x + 'px'"
></div>

0 commentaires

0
votes

Vous pouvez également utiliser une directive personnalisée Vuejs pour cela! https://vuejs.org/v2/guide/custom-directive.html

Vérifiez ceci:

Dans votre modèle:

Vue.directive("position", {
  bind: function(el, binding, vnode) {
    console.log(el, binding, vnode);
    el.style.left = `${vnode.context.coord.x}px`;
    if (binding.value) {
      el.style.top = `${vnode.context.coord.y}px`;
      return;
    }
    el.style.bottom = `${vnode.context.coord.y}px`;
  }
});

Si vous souhaitez enregistrer une directive localement, les composants acceptent également une option de directives, vérifiez cela sur la documentation que j'ai liée. Je vais vous montrer comment le faire globalement donc dans votre fichier main.js, avant de construire l'instance Vue bien sûr:

J'ai quitté le console.log qui affiche les objets que vous pouvez utiliser dans votre directive afin que vous puissiez les explorer sur votre console et l'adapter à vos besoins.

 <p v-position="expressionThatMakesItTop" v-if="isSignedIn">Welcome back {{user.email}}</p>

0 commentaires