javascript - 如何以编程方式触发 Vuetify.js 组件的链式 react ？

Question

我有一个启用了纹波的 v-btn。有没有办法以编程方式触发链式 react ？如果我在我自己的另一个包装按钮的组件上使用 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)