web-dev-qa-db-fra.com

Désactiver l'effet d'entraînement sur les composants vuetify dans le monde

J'utilise vuetify sur mon application. L'équipe de conception crée un design plat et je veux changer le thème de vuetify pour qu'il corresponde aux maquettes

J'essaie de trouver une option pour désactiver facilement l'effet d'entraînement dans toute l'application, mais elle n'existe pas.

J'essaie de créer une extension de composant pour éviter de répéter :ripple="false"sur chaque composant que j'utilise.

Je vais prendre un composant bouton comme exemple.

<v-btn :ripple="false">My Button</v-btn>

chaque bouton de ma demande doit avoir ripple=false Mon objectif est de créer un composant comme celui-ci

<my-button>My Button</my-button>

J'essaie d'étendre v-btn dans un autre composant comme celui-ci.

<template>
    <v-btn v-bind="options" :ripple="false"></v-btn>
</template>

<script>
  import { VBtn } from 'vuetify';

  export default {
  name: 'MyButton',
  extend: VBtn,
  computed: {
    options() {
      return this.props;
    },
  },

};

</script>

<style scoped>

J'essaie de cette façon pour éviter de copier/coller tous les accessoires de v-btn.

Toutes les solutions que j'ai essayées ont échoué.

vue.jsvuejs2vuetify.js
8
Mantalo

Vous pouvez modifier les composants Vue.js globalement même après leur enregistrement.
Dans ce cas, vous pouvez simplement faire ceci:

const VBtn = Vue.component('VBtn')
VBtn.options.props.ripple.default = false

Vous pouvez l'ajouter dans votre fichier vuetify.js Avant la export default new Vuetify (...) par exemple.

- Testé avec Vuetify 2.1.14

5
Philoozushi

Selon documentation Vuetify vous pouvez modifier les variables Stylus - vous pouvez donc essayer de les redéfinir à votre goût, par ex. en les définissant sur none:

$ripple-animation-transition-in := transform .25s $transition.fast-out-slow-in, opacity .1s $transition.fast-out-slow-in
$ripple-animation-transition-out := opacity .3s $transition.fast-out-slow-in
$ripple-animation-visible-opacity := .15
3
IVO GELOV

Vous pouvez définir le conteneur complet sur non visible.

.v-ripple__container {
    display:none !important;
}
0
Peter