转载

VueStar：缤纷多彩的 Vue 点赞组件

VueStar

米娜撒，新年快乐！❤❤❤

demo

扫描下面的二维码观看demo

VueStar：缤纷多彩的 Vue 点赞组件

API

Props

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

Slot

SlotName	说明
icon	承载点赞的图标

详细说明

Props

animate

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

VueStar：缤纷多彩的 Vue 点赞组件

color

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

VueStar：缤纷多彩的 Vue 点赞组件

Slot

icon

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

VueStar：缤纷多彩的 Vue 点赞组件

关于event

简单来说该组件其实就一个包裹内容的控件,围绕 slot 中的内容，当你 slot 中内容被激活（点击等等之类的事件）时候，做出相应的变化(颜色改变和css动画)，这是耦合组件的属性。但是其余对于 slot 被激活的时候产生的回调（点赞次数+1等等），应该与组件应该完全解耦。这类事件应该绑定在 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

原文 https://github.com/OYsun/VueStar

正文到此结束

所属分类：编程技术

本文标签： UI http git 代码安装 ECS ip GitHub tar src tab API id 参数 CSS ACE https 二维码
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二