react-particle-effect-button 的Vue实现，零依赖（除Vue外）。
可以在Vue中实现粒子特效。
演示地址VueParticleEffectButtons
安装教程将 particle-effect.vue 复制到你的项目目录中，自行修改适配。
下载项目所有文件后，如果想在本地调试代码，请执行以下命令：
yarn installyarn dev使用说明<script>import ParticleEffect from './particle-effect'export default { data() { return { effectHidden: false, } }, methods: { onBegin() { console.log('begin event') }, onComplete() { console.log('complete event') }, },}</script><template> <ParticleEffect :hidden="effectHidden" direction="left" particle-type="circle" particle-style="fill" particle-color="#000" :duration="1000" easing="easeInOutCubic" :canvas-padding="150" :size="4" :speed="2" :particles-amount-coefficient="3" :oscillation-coefficient="20" @begin="onBegin" @complete="onComplete" > BUTTON CONTENT GOES HERE </ParticleEffect></template>ParticleEffect组件中，由于使用了slot，子节点除了可以是一个简单的button外，还可以是更复杂的VNode。
通过修改hidden属性的值，来启动粒子动画。比如用户点击了按钮，程序把hidden绑定的变量设为true，按钮便会在粒子动画中慢慢消失。
属性参考hidden
类型：Boolean
默认值：false
说明：ParticleEffect组件会监控该属性的变化，从而启动相应的特效动画。
direction
类型：String
默认值： 'left'
说明：可选值包括'left','right','top','bottom'。
particleType
类型：String
默认值：'circle'
说明：可选值包括'circle','rectangle','triangle'。
particleStyle
类型：String
默认值：'fill'
说明：可选值包括'fill','stroke'。
particleColor
类型：String
默认值：'#000'
duration
类型：Number
默认值：1000
说明：单位是毫秒。
easing
类型：String或Array
默认值：'easeInOutCubic'
说明：当绑定的值类型为String时，使用预设动画值，以ease开头。具体参考源码。
canvasPadding
类型：Number
默认值：150
说明：单位是像素。在画布上预留额外的空间来显示动画。
size
类型：Number或Function
默认值：()=>Math.floor(Math.random()*3+1)
说明：单位是像素。
speed
类型：Number或Function
默认值：()=>rand(4)
说明：rand函数的定义参见源码。
particlesAmountCoefficient
类型：Number
默认值：3
oscillationCoefficient
类型：Number
默认值：20
事件参考begin
说明：动画开始时触发。
complete
说明：动画结束时触发。
评论