Vuetify –等待<v-btn>​​单击/路由上的波纹动画完成

Question

我对<v-btn>（或其他使用它的元素）上的涟漪效应感到困惑。

我在子页面上有一个按钮，它会重定向到索引。

<v-btn to="/index">Back to index</v-btn>` 

之后 单击路由器返回到/index，但由于立即跳到索引页面，所以使波纹动画中断的功能被中断了。看起来糟透了。是否有任何选项可以延迟单击事件以使涟漪效应完成？

工作示例：https://jsfiddle.net/4a0o5zp6/

如果您只是单击“关于”页面上的“返回索引”按钮，则会快速跳转。如果您尝试按住按钮一段时间，然后松开它，那应该看起来就应该如此。

Answer 1

您可以禁用按钮上的波纹效果：

<v-btn :ripple="false" >

要延迟移动路线，可以使用click事件来代替使用函数来更改路线，然后使用setTimeout函数来创建延迟。

Answer 2

这不是实现的理想解决方案-考虑一下;-)-但是可以。

您可以在按钮上监听click事件，并使用setTimeout延迟更改路线。

解决方案：

<v-btn @click="delayAnimationGo('index')">Back to index</v-btn> // use any method name

name: 'AboutView',
methods: {
  delayAnimationGo(destination) {
    setTimeout(() => {
      this.$router.push(`/${destination}`)
    }, 150); // should be just right
  }
},

注意：如果您想在组件中大量使用此功能，请考虑创建 mixin 或 RenderlessComponent ，这样您就赢了不要重复您的代码。