javascript - How can I programmatically trigger ripple effect on a Vuetify.js component? - Stack Overflow

admin管理员组

文章数量:1022743

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 ponent of my own that wraps the button?

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

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 ponent of my own that wraps the button?

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

• javascript
• vuetify.js

Share Improve this question Follow asked Jun 30, 2019 at 12:37 David TinkerDavid Tinker 9,6541010 gold badges7171 silver badges102102 bronze badges 2

• 2 stackoverflow./questions/31917889/… – weegee Commented Jun 30, 2019 at 12:41
• 1 I found that question before. I can get the button to click by calling click() or dispatching a click event to it, but that doesn't trigger the ripple effect. – David Tinker Commented Jul 1, 2019 at 15:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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)

You can do it like that

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

You can check vuetify documentation.

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

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 ponent of my own that wraps the button?

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

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 ponent of my own that wraps the button?

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

• javascript
• vuetify.js

Share Improve this question Follow asked Jun 30, 2019 at 12:37 David TinkerDavid Tinker 9,6541010 gold badges7171 silver badges102102 bronze badges 2

• 2 stackoverflow./questions/31917889/… – weegee Commented Jun 30, 2019 at 12:41
• 1 I found that question before. I can get the button to click by calling click() or dispatching a click event to it, but that doesn't trigger the ripple effect. – David Tinker Commented Jul 1, 2019 at 15:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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)

You can do it like that

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

You can check vuetify documentation.

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

本文标签： javascriptHow can I programmatically trigger ripple effect on a Vuetifyjs componentStack Overflow