Vue.js开源：VueStar - 缤纷多彩的 Vue 点赞组件

   <h2>VueStar</h2>    <p><img src="https://simg.open-open.com/show/e8fee23479d05bd500a760b077fc187b.gif"></p>    <h2>米娜撒，新年快乐！❤❤❤</h2>    <h2>demo</h2>    <p>扫描下面的二维码观看demo</p>    <p><img src="https://simg.open-open.com/show/a7f2fe21a41c7b9d8d7b69b82e87ac1b.png"></p>    <h2>API</h2>    <h2>Props</h2>    <table>     <thead>      <tr>       <th>参数</th>       <th>类型</th>       <th>说明</th>      </tr>     </thead>     <tbody>      <tr>       <td>animate</td>       <td>String</td>       <td>点赞激活时候的动画</td>      </tr>      <tr>       <td>color</td>       <td>String</td>       <td>点赞激活时候的颜色(注意填写的是hex或者rgb的颜色代码)</td>      </tr>     </tbody>    </table>    <h2>Slot</h2>    <table>     <thead>      <tr>       <th>SlotName</th>       <th>说明</th>      </tr>     </thead>     <tbody>      <tr>       <td>icon</td>       <td>承载点赞的图标</td>      </tr>     </tbody>    </table>    <h2>详细说明</h2>    <h2>Props</h2>    <h3>animate</h3>    <p>animate 指明点赞图标动画,默认是没有动画的，你可以添加动画css类，当然，也可以引入第三方css动画库，比如animate.css</p>    <p><img src="https://simg.open-open.com/show/7a2e5bdbcd6b3716645e3d973ec54986.gif"> <img src="https://simg.open-open.com/show/875ee4abf6d6b1ee2d1edb05fe29052a.gif"> <img src="https://simg.open-open.com/show/22ca7deda2d434878bcc57e213b1a8a5.gif"> <img src="https://simg.open-open.com/show/601470fe8b688d6d968c03662e1246a4.gif"> <img src="https://simg.open-open.com/show/f1e1a2cec0b84cca1371d33c74f4f8dd.gif"> <img src="https://simg.open-open.com/show/d324fa9a73616466b6d7e6af9d1501b5.gif"></p>    <h3>color</h3>    <p>color 是当点赞组件激活时候点赞图标的颜色变化,默认是没有颜色变化的。注意：该参数填写的值必须是hex或者rgb颜色代码，而不是css类</p>    <p><img src="https://simg.open-open.com/show/87eff89ba9f3197c424fd469b36957b2.gif"> <img src="https://simg.open-open.com/show/06d844239113761acba471f256886f78.gif"> <img src="https://simg.open-open.com/show/4c500d425da0c7939106a8192247e956.gif"></p>    <h2>Slot</h2>    <h3>icon</h3>    <p>icon 是点赞组件承载的核心,往该 slot 里面填入任意你需要的图标</p>    <p><img src="https://simg.open-open.com/show/c91b89bdf3daaa242ef74edebd229a1a.gif"> <img src="https://simg.open-open.com/show/bf11a48d1a1819c7a81ee56f4ed17837.gif"> <img src="https://simg.open-open.com/show/73798dca6d581e79d2c193cc4b63239d.gif"></p>    <h3>关于event</h3>    <p>简单来说该组件其实就一个包裹内容的控件,围绕 slot 中的内容，当你 slot 中内容被激活（点击等等之类的事件）时候，做出相应的变化(颜色改变和css动画)，这是耦合组件的属性。但是其余对于 slot 被激活的时候产生的回调（点赞次数+1等等），应该与组件应该完全解耦。这类事件应该绑定在 slot 中</p>    <pre>  <code class="language-javascript"><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>    <h2>简单的例子</h2>    <pre>  <code class="language-javascript"><vue-star animate="yourAnimateCssClass" color="rgb(152, 138, 222)">      <img slot="icon" src="./yourImgPlace/yourImg.png" />    </vue-star></code></pre>    <pre>  <code class="language-javascript"><!--动画引入animate.css库,icon引入font-awesome图标库  -->    <vue-star animate="animated bounceIn" color="#F05654">      <i slot="icon" class="fa fa-heart"></i>    </vue-star></code></pre>    <h2>安装和使用</h2>    <pre>  <code class="language-javascript">npm install vue-star</code></pre>    <ul>     <li>若作为全局组件使用</li>    </ul>    <pre>  <code class="language-javascript">//在项目入口文件  import Vue from 'vue'  import VueStar from 'vue-star'  Vue.component('VueStar', VueStar)</code></pre>    <ul>     <li>若作为局部组件</li>    </ul>    <pre>  <code class="language-javascript">//在某个组件中  import VueStar from 'vue-star'  export default {    components: {      VueStar    }  }</code></pre>    <h2>bug和建议</h2>    <p>如果在使用中遇到问题或者建议，欢迎提 issues</p>    <h2>LICENSE</h2>    <p>MIT</p>    <p> </p>    <p> </p>