demo.gif
vuejs实现的一个类似Medium的按钮点击效果. 同样Github上还有一个react实现的版本, 点击 react-clap-button
点击立即预览: https://jsbin.com/kapomaw/edit?html,output
Github源码地址 : https://github.com/AJLoveChina/vue-clap-button
非常简洁干净的API设计, 并且接口丰富, 能够完成大多数开发场景. 如果有BUG 欢迎提交issue😂
下面是开发文档
Install
The recommended way is using npm
npm install vue-clap-button --save
Also you can insert script tag in your html file after vue script
<script src="dist/vue-clap-button.js"></script>
Usage
In your entry script
import Vue from 'vue'
import vueClapButton from 'vue-clap-button'
Vue.use(vueClapButton);
Then in your .vue file
<vue-clap-button />
It is done! Really simple to use ? Yes ❤
Want a complex example ? see following guide
Attributes
| parameter | description | type | enum value | default value |
|---|---|---|---|---|
| icon | specify a icon | String | good, star, love | good |
| size | change the size of icon, in pixel | Number | - | 50 |
| maxClick | How many times can I love/like it? | Number | - | 1 |
| bgColor | background color of icon | String | - | #FFF |
| colorActive | color for icon with claps | String | - | #F56C6C |
| colorNormal | normal or initial color for icon without claps | String | - | #909399 |
Events
| event name | description | callback parameter |
|---|---|---|
| cancel | user cancel all claps on it | - |
| clap | user give one love on it | total claps given now (type : number) |
Methods
| method name | description | return value |
|---|---|---|
| getClaps | get total claps | type:Number |
License
MIT
