Vue.js開源：VueStar - 繽紛多彩的 Vue 點贊組件

VueStar

米娜撒，新年快樂！???

demo

掃描下面的二維碼觀看demo

API

Props

Slot

詳細說明

Props

animate

animate 指明點贊圖標動畫,默認是沒有動畫的，你可以添加動畫css類，當然，也可以引入第三方css動畫庫，比如animate.css

color

color 是當點贊組件激活時候點贊圖標的顏色變化,默認是沒有顏色變化的。注意：該參數填寫的值必須是hex或者rgb顏色代碼，而不是css類

Slot

icon

icon 是點贊組件承載的核心,往該 slot 里面填入任意你需要的圖標

關于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></code></pre> 
  
簡單的例子
 
  
<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