vuejs组件, 炫酷的按钮点击效果, 让你的

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

Usage

In your entry script

import Vue from 'vue'
import vueClapButton from 'vue-clap-button'
Vue.use(vueClapButton);

Then in your .vue file

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