5
votes

Ondulation enfant et parent déclenchée

J'utilise vuetify pour concevoir un composant 'card'.

J'ai un div parent avec un bouton enfant. Maintenant, lorsque je clique sur le bouton, l'effet d'entraînement sur le div est déclenché.

Comment puis-je résoudre ce problème?

<template>

  <div>

    <v-card v-ripple="true">
      <h3>
        <v-card-title>{{ title }}</v-card-title>
      </h3>

      <v-layout row>
        <v-flex grow>
          <v-card-text>
            {{ plaats }}
            <br />
            {{ sub_title }}
          </v-card-text>
        </v-flex>

        <v-flex shrink>
          <v-card-actions>

            <v-btn small color="blue" fab>
              <v-icon medium color="white">mdi-calendar</v-icon>
            </v-btn>

            <v-btn small color="green" fab>
              <v-icon medium color="white">mdi-calendar-check</v-icon>
            </v-btn>

            <v-btn small color="red" fab>
              <v-icon medium color="white">mdi-calendar-remove</v-icon>
            </v-btn>

          </v-card-actions>
        </v-flex>

      </v-layout>
    </v-card>

  </div>

</template>

vue.js vuetify.js

0 commentaires

4 Réponses :

0
votes

Vous recherchez Event.stopPropagation . Ajoutez @ click.stop = "null" à vos boutons. Bien sûr, vous pouvez / devez remplacer null par votre propre méthode.

2 commentaires

Cela ne fonctionne pas pour l'effet d'entraînement cependant. Déjà essayé cela. Merci quand même

Pouvez-vous ajouter un exemple de travail? J'ai essayé de recréer votre problème, mais sans succès.

11
votes

La solution était en effet Event.stopPropagation mais j'ai dû l'ajouter à l'action mousedown. Donc @ mousedown.stop puis ajoutez votre fonction avec @ click.stop = "null" comme @Frank mentionné précédemment.

1 commentaires

Pensez également à ajouter @ touchstart.stop à Event.stopPropagation sur les appareils tactiles également.

1
votes

Remarque l'événement @mousedown ne se déclenchera pas sur le mobile, nous devons donc également ajoutez @touchstart .

Codepen

<v-list>
  <v-list-tile :ripple="true" @click="">

    <v-list-tile-action>
      <v-btn 
          @click.stop="" 
          @mousedown.stop="" 
          @touchstart.stop=""
      >Click</v-btn>
    </v-list-tile-action>

    <v-list-tile-content class="pl-5">
      Click tile
    </v-list-tile-content>

  </v-list-tile>
</v-list>

0 commentaires

-1
votes

si votre css vuetify est séparé, pas dans votre app.js, la solution qui a fonctionné pour moi est de mettre le script app.js en dehors du corps, quand il est à l'intérieur des charges js en premier que le css vuetify.

<!-- ripple error occurs randomly -->
  <script src="{{ URL::asset('js/vLib.js') }}" defer></script> 
</body>


<!-- Should be outside the body -->
</body>
  <script src="{{ URL::asset('js/vLib.js') }}" defer></script>

0 commentaires