一个简单的Vue.js插件，可在受Google Material Design启发的clickable / tappable元素上创建自定义涟漪效果。

变更日志：

v1.3.1（2020年10月11日）

• Safari中未触发点击事件

安装和下载：

# Yarn
$ yarn add vue-rippler

# NPM
$ npm install vue-rippler --save

使用：

main.js

import Vue from 'vue'
import VueRippler from 'vue-rippler'

Vue.use(VueRippler)

在组件中使用

<template>
  <my-component ripple></my-component>
</template>

设置波纹样式，并根据需要进行自定义（可选）

<style>
/*
玩下面的一些线
*/
[ripple] .ripple--container .ripple--body {
  opacity: 0.5 !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
  -webkit-animation: rippler 1000ms;
          animation: rippler 1000ms;
}
</style>

---

官网：https://spemer.github.io/vue-rippler/

演示：https://www.vue365.cn/code_demo.php?id=1582

GitHub下载：https://github.com/spemer/vue-rippler/archive/master.zip