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

发表于 | 更新于

kuan-vue-scatter

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

源码地址

DEMO预览

安装

1
2
3
npm install kuan-vue-scatter -S 
# or
yarn add kuan-vue-scatter

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <div>
    <button :disabled="!visible" @click="visible = false">{{visible ? '消散' : '显示'}}</button>

    <vue-scatter :visible="visible" @end="visible = true" class="test-container">
      <img src="./images/1.jpg" alt="">
    </vue-scatter>
  </div>
</template>

<script>
import VueScatter from 'kuan-vue-scatter'

export default {
  components: {
    VueScatter
  },
  data() {
    return {
      visible: true
    }
  }
}
</script>