Awesome

vue-touch-ripple

Make any element easily have a Material Design-style click "ink ripple" effect.

Examples
Legacy version (Vue2)

Usage

Install

yarn add vue-touch-ripple

npm install vue-touch-ripple --save

Local component

<template>
  <touch-ripple
    color="#fff"
    :opacity="0.4"
    transition="ease-out"
    :duration="400"
    :keep-last-ripple="true"
    @touch="log('touch', $event)"
    @click="log('click', $event)"
    @start="log('ripple-start', $event)"
    @end="log('ripple-end', $event)"
  >
    <!-- your content element -->
    <div class="content">Target content</div>
  </touch-ripple>
</template>

<script>
  import { defineComponent } from 'vue'
  import { TouchRipple } from 'vue-touch-ripple'
  import 'vue-touch-ripple/style.css'

  export default defineComponent({
    components: {
      TouchRipple
    },
    methods: {
      log: console.log
    }
  })
</script>

Global component

import { createApp } from 'vue'
import VueTouchRipple from 'vue-touch-ripple'
import 'vue-touch-ripple/style.css'

const app = createApp()

app.use(VueTouchRipple, {
  // optional default global options
  color: 'red',
  opacity: 0.5,
  duration: 280,
  transition: 'ease',
  keepLastRipple: false
})

Component Props

prop	description	type	default
color	Specify the background color of the ripple layer, supporting any legal color value such as RGBA.	`String`	`#fff`
opacity	Transparency of ripple layers, supporting numbers from `0` ~ `1`.	`Number`	`0.3`
duration	Duration of single ripple motion, time in milliseconds.	`Number`	`380`
transition	Ripple motion animation curve with Bezier curve value support.	`String`	`ease-out`
keepLastRipple	whether to keep the last ripple (if `true`, the last ripple will always be present until the mouse button is released)	`Boolean`	`true`

Component Events

event	description	params
touch	When the component is pressed by the left mouse button.	`(event: MouseEvent)`
click	When the component is lifted by the left mouse button.	`(event: MouseEvent)`
start	When the animated animation of each ripple starts.	`(id: number)`
end	When the animated motion of each ripple ends.	`(id: number)`

BTW: if you expect to bind more flexible events on the component, in Vue3 you can just bind the events directly, instead of using the @xxx.native modifier in Vue2.

Changelog

Detailed changes for each release are documented in the release notes.

License

Licensed under the MIT License.