带动画效果的按钮_带有喜欢的星形动画的喜欢按钮

带动画效果的按钮

VueStar (VueStar)

A like button with delightful star animation powered by Vue.js.

由Vue.js驱动的带有令人愉快的星形动画的“赞”按钮。

View demo 查看演示 Download Source 下载源

API (API)

道具 (Props)

Option	Type	Description
animate	String	To activate the animation of the like button
color	String	Activate the like button, the color of the button. (note to must be hex or RGB color code)

选项	类型	描述
动画	串	激活“喜欢”按钮的动画
颜色	串	激活“赞”按钮，即按钮的颜色。 (请注意必须是十六进制或RGB颜色代码)

插槽 (Slot)

SlotName	Description
icon	Set up the like button

插槽名称	描述
图标	设置喜欢按钮

插槽 (Slot)

图标 (icon)

iconTo the slot inside fill in any content you want, it is the carrier of the like button

icon在里面的slot填写您想要的任何内容，它是“赞”按钮的载体

突发事件 (abuout event)

活动应绑定在slot (Events should be bound in the 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>

简单的例子 (Simple example)

<vue-star animate="yourAnimateCssClass" color="rgb(152, 138, 222)">
    <img slot="icon" src="./yourImgPlace/yourImg.png" />
  </vue-star>

<!--use animate.css and font-awesome -->
  <vue-star animate="animated bounceIn" color="#F05654">
    <i slot="icon" class="fa fa-heart"></i>
  </vue-star>

安装及使用 (Installation and use)

npm install vue-star

• If used as a global component

  如果用作全局组件

//In the project entry file
import Vue from 'vue'
import VueStar from 'vue-star'
Vue.component('VueStar', VueStar)

• If as a local component

  如果作为本地组件

//In a component
import VueStar from 'vue-star'
export default {
  components: {
    VueStar
  }
}

翻译自: https://vuejsexamples.com/a-like-button-with-delightful-star-animation-with-vue/

带动画效果的按钮