web-dev-qa-db-fra.com

Utilisation de la personnalisation dans Vuetify et transmission des variables de couleur aux composants

Dans mon index.js fichier que j’ai écrasé manuellement l’objet Vuetify theme avec la couleur de mon entreprise:

Vue.use(Vuetify, {
  theme: {
    primary: '#377ef9',
    secondary: '#1b3e70',
    accent: '#ff643d',
    error: '#ff643d'
    ...
  }

Maintenant, je peux utiliser ces couleurs de mes modèles comme ceci:

<my-text-field name="input text"
    label="text"
    value="text text text text..."
    type="text"
    color="primary">
</my-text-field>

Ce que je cherche, c’est d’utiliser primary ou toute autre variable de l’objet theme défini ci-dessus, dans le style de mon modèle:

<script>
  import { VTextField } from 'vuetify'
  export default {
    extends: VTextField
  }
</script>

<style scoped lang="stylus">
  label
    color: <seconday color> <-- this is what I'm after
    color: #1b3e70 <-- this works, but not quite good enough for me
</style>

Je peux facilement écrire la valeur hexadécimale de mes couleurs dans la section style, mais je ne veux pas me répéter et je préférerais utiliser mon objet theme afin qu'il soit plus facile pour moi de changer facilement le couleurs partout et évitez les fautes de frappe qui pourraient conduire à des erreurs dans la définition des couleurs.

vuejs2vue-componentvuetify.js
27
Narxx

Il existe un moyen de contourner ce problème en utilisant :style les attributs. Il peut être utilisé pour définir des propriétés CSS personnalisées de manière réactive.

Ajouter une propriété calculée:

computed: {
    cssProps () {
        return {
            '--secondary-color': this.$vuetify.theme.secondary
        }
    }

Lier le style à cssProps:

<div id="app" :style="cssProps">

Ensuite, dans votre style:

<style scoped>
    label
        color: var(--secondary-color);
</style>

Adapté de cette discussion: https://github.com/vuejs/vue/issues/7346

18
Vic