VueStar

前端 表单辅助
基于 Vue.js 的喜欢按钮,带有可爱的动画效果
2019-11-01 我要评论 5 我要收藏

VueStar

awesomes-cn

米娜撒,新年快乐!❤❤❤

demo

扫描下面的二维码观看demo ,或者点击 http://web-oysun.cn/VueStar/

awesomes-cn

API

Props

参数 类型 说明
animate String 点赞激活时候的动画
color String 点赞激活时候的颜色(注意填写的是hex或者rgb的颜色代码)

Slot

SlotName 说明
icon 承载点赞的图标

详细说明

Props

animate

animate指明点赞图标动画,默认是没有动画的,你可以添加动画css类,当然,也可以引入第三方css动画库,比如animate.css

awesomes-cn awesomes-cn awesomes-cn awesomes-cn awesomes-cn awesomes-cn

color

color是当点赞组件激活时候点赞图标的颜色变化,默认是没有颜色变化的。注意:该参数填写的值必须是hex或者rgb颜色代码,而不是css类

awesomes-cn awesomes-cn awesomes-cn

Slot

icon

icon是点赞组件承载的核心,往该slot里面填入任意你需要的图标

awesomes-cn awesomes-cn awesomes-cn

关于event

绑定在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>

简单的例子

  <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>

安装和使用

npm install vue-star
  • 若作为全局组件使用
//在项目入口文件
import Vue from 'vue'
import VueStar from 'vue-star'
Vue.component('VueStar', VueStar)
  • 若作为局部组件
//在某个组件中
import VueStar from 'vue-star'
export default {
  components: {
    VueStar
  }
}

bug和建议

如果在使用中遇到问题或者建议,欢迎提issues

LICENSE

MIT

VueStar 相关推荐
对于该库,你有要推荐的内容么?点此提交推荐
请文明评论,与人为善,比聪明更重要!
评论