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

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)