- Notifications
You must be signed in to change notification settings - Fork108
✨A like button with delightful star animation powered by Vue.js
License
NotificationsYou must be signed in to change notification settings
OYsun/VueStar
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
查看中文文档，请移步至这里
For a better demonstration, please use the phone scan the following two-dimensional code view demo，or click this linkhttp://web-oysun.cn/VueStar/
| Option | Type | Description |
|---|---|---|
| animate | String | To activate the animation of the like button |
| color | String | Activate the like button, the color of the button. (note to must be hex or RGB color code) |
| SlotName | Description |
|---|---|
| icon | Set up the like button |
animateSpecify the like button animation, the default is no animation, you can add animation CSS class, of course, can also introduce CSS animation library, such as animate.css
colorActivate the button when the button color changes, the default is not. Note: The value of this parameter must be filled in hex or rgb color code, rather than the css class
iconTo theslot inside fill in any content you want, it is the carrier of the like button
<template> <vue-staranimate="animated rubberBand"color="#F05654"> <aslot="icon"class="fa fa-heart"@click="handleClick"></a> </vue-star></template></script>exportdefault { methods: {handleClick () {//do something } }}</script>
<vue-staranimate="yourAnimateCssClass"color="rgb(152, 138, 222)"><imgslot="icon"src="./yourImgPlace/yourImg.png"/></vue-star>
<!--use animate.css and font-awesome --><vue-staranimate="animated bounceIn"color="#F05654"><islot="icon"class="fa fa-heart"></i></vue-star>
npminstallvue-star
- If used as a global component
//In the project entry fileimportVuefrom'vue'importVueStarfrom'vue-star'Vue.component('VueStar',VueStar)
- If as a local component
//In a componentimportVueStarfrom'vue-star'exportdefault{components:{ VueStar}}
If you encounter problems or suggestions in the use, welcome toissues
MIT