Vue Star
made with Vuejs

Vue Star是一个带动画的“喜欢”按钮组件，带有由Vue.js驱动的令人愉悦的星星动画。

安装

Npm

npm i  vue-star

Yarn

yarn add  vue-star

使用

作为全局组件使用

//在项目入口文件
import Vue from 'vue'
import VueStar from 'vue-star'
Vue.component('VueStar', VueStar)

作为局部组件

//在某个组件中
import VueStar from 'vue-star'
export default {
  components: {
    VueStar
  }
}

简单的例子

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


  <!--动画引入animate.css库,icon引入font-awesome图标库  -->
  <vue-star animate="animated bounceIn" color="#F05654">
    <i slot="icon" class="fa fa-heart"></i>
  </vue-star>

API

Props

Slot

icon 承载点赞的图标，你可以往该slot里面填入任意需要的图标，如

点击事件

点击事件是绑定在 icon 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>