web-dev-qa-db-fra.com

Dans le composant vue.js, comment utiliser les accessoires en css?

Je suis nouveau sur vue.js. Voici mon problème:

Dans un fichier * .vue comme celui-ci:

<template>
  <div id="a">
  </div>
</template>

<script>
  export default {
    name: 'SquareButton',
    props: ['color']
  }
</script>

<style scoped>
    #a {
      background-color: ?
    }
<style>

Comment utiliser les accessoires color dans background-color: (où est un ? maintenant).

Merci.

cssvue.jsvuejs2vue-component
11
MingWen

Vous pas. Vous utilisez une propriété calculée et utilisez ensuite l'accessoire pour renvoyer le style de la div, comme ceci:

<template>
  <div id="a" :style="style" @mouseover="mouseOver()">
  </div>
</template>

<script>
  export default {
    name: 'SquareButton',
    props: ['color'],
    computed: {
      style () {
        return 'background-color: ' + this.hovering ? this.color: 'red';
      }
    },
    data () {
      return {
        hovering: false
      }
    },
    methods: {
      mouseOver () {
       this.hovering = !this.hovering
      }
    }
  }
</script>

<style scoped>
<style>
17
Potray

Vous pouvez réellement! 

Vous devez définir les variables CSS dans une propriété calculée, puis appeler cette propriété comme attribut de style à l'élément nécessitant la variable CSS. Enfin, vous pouvez utiliser la variable dans les balises situées au bas de votre document.

Regardez ici: https://codepen.io/richardtallent/pen/yvpERW/

some code to make the link work.

et ici: https://github.com/vuejs/vue/issues/7346

4
Yuri M

Si vous avez besoin de fichiers CSS qui ne peuvent pas être appliqués par un attribut de style tel que des pseudo-classes ou des requêtes de média, voici ce que je fais:

Créez un composant de style disponible globalement lors de l'initialisation de Vue (vous en avez besoin sinon vous rencontrerez des problèmes de peluches). Il crée une balise de style qui rend simplement le contenu dans la fente:

Je ne l'utiliserais que si vous avez vraiment besoin des deux valeurs dynamiques dans vos fonctionnalités CSS et CSS qui ne peuvent pas être appliquées à un attribut de style. 

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
Vue.component('v-style', {
  render: function(createElement) {
    return createElement('style', this.$slots.default)
  }
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Ensuite, utilisez-le en haut de votre modèle et obtenez ainsi la totalité de la portée JavaScript de votre composant et la syntaxe css complète combinées:

<template>
  <v-style>
    @media screen and (max-width: 820px) {
      .gwi-text-media-{{ this.id }} {
        background-image: url({{ mobileThumb }});
      }
    }
  </v-style>
</template>

Cela me semble un peu hacky, mais c'est un travail et je préférerais, dans certains cas, opter pour cela plutôt que d'avoir à ajouter du JS supplémentaire pour les événements de survol ou de redimensionnement susceptibles de ralentir considérablement les performances de votre application.

0
gwildu