A like button with delightful star animation with vue

VueStar

A like button with delightful star animation powered by Vue.js.

API

Props

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)

Slot

SlotName	Description
icon	Set up the like button

Slot

icon

iconTo the slot inside fill in any content you want, it is the carrier of the like button

abuout event

Events should be bound in the slot

<template>
  <vue-star animate="animated rubberBand" color="#F05654">
    <a slot="icon" class="fa fa-heart" @click="handleClick"></a>
  </vue-star>
</template>

</script>
export default {
  methods: {
    handleClick () {
      //do something
    }
  }
}
</script>

Simple example

  <vue-star animate="yourAnimateCssClass" color="rgb(152, 138, 222)">
    <img slot="icon" src="./yourImgPlace/yourImg.png" />
  </vue-star>

  <!--use animate.css and font-awesome -->
  <vue-star animate="animated bounceIn" color="#F05654">
    <i slot="icon" class="fa fa-heart"></i>
  </vue-star>

Installation and use

npm install vue-star

• If used as a global component

//In the project entry file
import Vue from 'vue'
import VueStar from 'vue-star'
Vue.component('VueStar', VueStar)

• If as a local component

//In a component
import VueStar from 'vue-star'
export default {
  components: {
    VueStar
  }
}

GitHub