How can I programmatically trigger ripple effect on a Vuetify.js component?

Question

I have a v-btn with ripple enabled. Is there a way to programmatically trigger the ripple effect? Is this possible if I use v-ripple directive on another component of my own that wraps the button?

I need to draw the users attention to the button in an unobtrusive way.

Answer 1

I figured it out. You have to dispatch a "mousedown" event with clientX and clientY filled in to trigger the ripple and then a "mouseup" to get rid of it.

I have a utility method in 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)
  }
}

Then I can do:

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

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