vue实现波纹效果_简单的Vue.js插件可实现自定义波纹效果-CSDN博客

vue实现波纹效果

Vue-Rippler (vue-rippler)

Simple Vue.js plugin for custom ripple effect.

简单的Vue.js插件可实现自定义波纹效果。

安装 (Installation)

npm i vue-rippler --save

yarn add vue-rippler

CDN (CDNs)

jsDelivr, UNPKG, bundle.run

jsDelivr ， UNPKG ， bundle.run

用法 (Usage)

main.js (main.js)

// main.js
import Vue from 'vue'
import VueRippler from 'vue-rippler'

Vue.use(VueRippler)

在组件中使用 (Use in component)

// .vue template
<template>
  <my-component ripple="ripple"></my-component>
</template>

设置波纹样式，并根据需要进行自定义(可选) (Set ripple style, and customize as you want(Optional))

<style>
/*
play with some lines below
*/
[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://vuejsexamples.com/simple-vue-js-plugin-for-custom-ripple-effect/

vue实现波纹效果