当前位置：首页 > news >正文

Vue - 关于v-wave 波浪动画组件

news 2025/8/3 7:34:10

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><divclass="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" /><imgv-wave-triggersrc="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	设置用作波形容器的元素的标记名称。这在默认值可能会干扰或类似的选择器的情况下非常有用