A Vue.js version of waves based on https://github.com/fians/Waves.
npm i -S vue-waves
then in the js file
import Vue from 'vue';
import VueWaves from 'vue-waves';
Vue.use(VueWaves);
Vue.use(VueWaves, {
name: 'waves' // Vue指令名称
duration: 500, // 涟漪效果持续时间
delay: 200 // 延时显示涟漪效果
})
<button v-waves.button>Vue-Waves</button>
<i class="fa fa-times" v-waves.circle></i>
Vue directive:
v-waves.button 按钮
v-waves.circle 圆形
v-waves.block 块
v-waves.float 阴影效果
v-waves.light 亮色涟漪
v-waves.classic ??
Demo:
git clone https://github.com/Teddy-Zhu/vue-waves.git
open vue-waves/demo/index.html
$ npm i
$ npm run build