Question

我正在使用vuetify设计一个“卡片”组件。

我有一个带有子按钮的父div。现在，当我单击按钮时，将触发div上的波纹效果。

我该如何解决？

<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>

Answer 1

解决方案的确是Event.stopPropagation，但我不得不将其添加到mousedown操作中。因此，@mousedown.stop，然后将您的函数与@click.stop="null"添加为前面提到的@Frank。

Answer 2

您正在寻找Event.stopPropagation。将@click.stop="null"添加到您的按钮。当然，您可以/应该用自己的方法替换null。

Answer 3

注意 @mousedown事件不会在移动设备上触发，因此我们还需要添加@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>

Answer 4

如果您的vuetify CSS是单独的，而不是在app.js中，对我有用的解决方案是，将app.js脚本放在js内部时，将其放置在主体之外，而不是将vuetify css装入。

<!-- 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>

引发孩子和父母的涟漪

4 个答案: