Vue.js的自定义波纹效果– vue-rippler

Vue.js的自定义波纹效果– vue-rippler
插件名称 vue-rippler
发布时间 2020年7月30日
插件作者 spemer

一个简单的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>