Vue - 关于v-wave 波浪动画组件
这个动画库可以在标签中添加新的v-wave属性，来让点击标签元素后添加漂亮的波纹效果，并且可以根据父元素自动形成波纹的颜色，也可以自定义波纹颜色，持续时间，透明度，触发的对象等。
一、安装v-wave
npm i v-wave
Vue2引入：
import Vue from 'vue'
import VWave from 'v-wave'
Vue.use(VWave)
Vue3引入：
import {createApp} from 'vue'
import VWave from 'v-wave'
import App from './App.vue'
createApp(App)
.use(VWave)
.mount('#app')
通过CDN
<script src="https://unpkg.com/v-wave"></script>
# With a CDN, `VWave` is made available as a global
Vue.use(VWave)
二、如何使用
要使用该动画组件，只需将v-wave属性添加到需要波纹效果的元素标签中，也可以对象的形式去自定义波纹的效果。
默认演示效果如下：
<template>
<div class="box" v-wave>
Click here
</div>
</template>
<style scoped>
.box {
display: grid;
place-items: center;
width: 200px;
height: 200px;
padding: 16px;
box-shadow: 0px 0px 5px 1px #00000026;
cursor: pointer;
}
</style>
自定义演示效果如下：
<template>
<div
class="box"
v-wave="{
color: 'blue',
initialOpacity: 0.5,
duration: 2,
easing: 'ease-in',
}"
>
Click here
</div>
</template>
<style scoped>
.box {
display: grid;
place-items: center;
width: 200px;
height: 200px;
padding: 16px;
box-shadow: 0px 0px 5px 1px #00000026;
cursor: pointer;
}
</style>
使用触发器示例（父子元素）：
使用v-wave-trigger绑定在需要点击的子元素标签上，可触发父元素v-wave的动画效果。
<template>
<label v-wave class="text-input">
<input type="text" placeholder="Search" />
<img
v-wave-trigger
src="https://justintaddei.github.io/v-wave/imgs/search.svg"
/>
</label>
</template>
<style scoped>
.text-input {
display: grid;
grid-template: 1fr / 1fr auto;
place-items: center;
padding: 0 16px;
height: 48px;
border: 2px solid #aaa;
border-radius: 8px;
font-size: 20px;
}
.text-input> input {
border: none;
outline: none;
background: transparent;
font-size: inherit;
}
</style>
使用触发器示例（根据ID触发，支持多对多）：
设置v-wave-trigger:gridDemo，v-wave=“{trigger: ‘gridDemo’}”，可支持多对多关系，点击其中一个元素，相同trigger的元素也会同步触发。
<template>
<div class="waveGrid">
<div class="box small" v-wave-trigger:gridDemo v-wave="{trigger: 'gridDemo',color:'blue',duration:1}" style=""></div>
......
<div class="box small" v-wave-trigger:gridDemo v-wave="{trigger: 'gridDemo',color:'blue',duration:1}" style=""></div>
</div>
</template>
<style scoped>
.waveGrid {
display: inline-grid;
grid-template: repeat(5, auto) / repeat(5, auto);
place-items: center;
gap: 32px;
}
.waveGrid .box.small {
width: 50px;
height: 50px;
cursor: pointer;
}
.box {
display: grid;
place-items: center;
width: 200px;
height: 200px;
padding: 16px;
box-shadow: 0 4px 24px #00000026;
cursor: pointer;
}
</style>
也可单击其中一个按钮将激活另一个按钮上的波浪：
<button v-wave="{trigger: 'button2'}" v-wave-trigger:button1>Button 1</button>
<button v-wave="{trigger: 'button1'}" v-wave-trigger:button2>Button 2</button>
三、组件参数Props
| 名称 | 默认值 | 类型 | 描述 |
|---|---|---|---|
| color | “currentColor” | string | 颜色 |
| initialOpacity | 0.2 | number | 涟漪首次出现时的不透明度 |
| finalOpacity | 0.1 | number | 当涟漪停止移动时，涟漪应该具有的不透明度 |
| duration | 0.4 | number | 涟漪的总持续时间，以秒为单位 |
| dissolveDuration | 0.15 | number | “溶解动画”的持续时间，以秒为单位 |
| waitForRelease | true | boolean | 鼠标释放点击之前，波纹不会溶解 |
| easing | ease-out | string | 过度定时函数，具体查看 |
| cancellationPeriod | 75 | number | 延迟，以毫秒为单位 |
| trigger | “auto” | string 、boolean 、“auto” | 设置与触发器一起使用时波纹的行为 |
| disabled | false | boolean | 无论 respectDisabledAttribute 如何，都禁用元素上的波形效果 |
| respectDisabledAttribute | true | boolean | 如果元素上存在 html 属性，则波形效果将被禁用 |
| respectPrefersReducedMotion | true | boolean | 如果用户的 prefers-reduced-motion 设置为true ，则波形效果将被禁用 |
| stopPropagation | false | boolean | 防止事件传播到父元素 |
| tagName | “div” | string | 设置用作波形容器的元素的标记名称。这在默认值可能会干扰或类似的选择器的情况下非常有用 |
v-wave动画组件能提供比较漂亮的点击波纹动画效果，且组件自定义比较高，可支持多对多触发关系，有兴趣的可以尝试下！
官网链接: v-wave官网
github地址: v-wave - github
