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

参数 类型 说明
animate String 点赞激活时候的动画 ,默认是没有动画的,你可以添加动画css类,当然,也可以引入第三方css动画库,比如animate.css
color String 点赞激活时候的颜色(注意填写的是hex或者rgb的颜色代码)

animate03.gifcolor01.gif

Slot

icon 承载点赞的图标,你可以往该slot里面填入任意需要的图标,如 icon01.gificon02.gif

点击事件

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

欧阳森 OYsun

相关项目

这是一个基于Vue.js的模拟命令行效果的动画组件。
Vue.js的文本幻灯片组件。
这是一个基于Vue.js的内容切换组件。
这是一个使用Vue.js的加载Spinner的集合。
这是一个实现Material设计风格的纹波效果的插件。
这是一个基于Vue的emoji图标反馈组件。