Question

我有一个启用了波动的v-btn。有没有办法以编程方式触发涟漪效应？如果我在包装按钮的我自己的另一个组件上使用v-ripple指令，这是否可能？

我需要以一种不引人注目的方式吸引用户对按钮的关注。

Answer 1

我知道了。您必须分派填充了clientX和clientY的“ mousedown”事件以触发波动，然后通过“ mouseup”来消除波动。

我在CompUtil.js中有一个实用程序方法：

export default {

  ripple: function($el) {
    let ev = new Event("mousedown")
    let offset = $el.getBoundingClientRect()
    ev.clientX = offset.left + offset.width/2
    ev.clientY = offset.top + offset.height/2
    $el.dispatchEvent(ev)

    setTimeout(function() {
      $el.dispatchEvent(new Event("mouseup"))
    }, 300)
  }
}

然后我可以做：

<v-btn ref="help" ...>

CompUtil.ripple(this.$refs.help.$el)

Answer 2

您可以那样做

<v-btn :ripple=“your_expression”></v-btn>

您可以查看vuetify文档。

https://vuetifyjs.com/en/directives/ripples

如何以编程方式触发Vuetify.js组件上的涟漪效应？

2 个答案: