使用vue实现灭霸打响指消散效果

发布: 2019-10-07 20:03:13标签: vue

kuan-vue-scatter

使用vue实现灭霸打响指消散效果（工作太忙，一直想写，等到了国庆）

源码地址

DEMO预览

安装

01npm install kuan-vue-scatter -S 
02# or
03yarn add kuan-vue-scatter
复制代码

使用

01<template>
02  <div>
03    <button :disabled="!visible" @click="visible = false">{{visible ? '消散' : '显示'}}</button>
04
05    <vue-scatter :visible="visible" @end="visible = true" class="test-container">
06      <img src="./images/1.jpg" alt="">
07    </vue-scatter>
08  </div>
09</template>
10
11<script>
12import VueScatter from 'kuan-vue-scatter'
13
14export default {
15  components: {
16    VueScatter
17  },
18  data() {
19    return {
20      visible: true
21    }
22  }
23}
24</script>
复制代码