surmon-china/vue-touch-ripple

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

Component Events

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.