vue-svg-like
vue-svg-like
🎉 A Vue component for animated like button 🎉
Installation
NPM
npm install vue-svg-like
YARN
yarn add vue-svg-like
Usage
<template>
<vue-svg-like
:clicked="clicked"
color="#38b48b"
subColor="#f08300"
:size="5"
:duration="0.5"
@click="onClickLikeButton"
/>
</template>
<script>
import VueSvgLike from 'vue-svg-like'
export default {
components: {
VueSvgLike
},
data () {
return {
clicked: false
}
},
methods: {
onClickButtonLike: function () {
this.clicked = !this.clicked
}
}
}
</script>
Configuration
Property | Type | Description | Default |
---|---|---|---|
color | String | The main color. This color is assigned to the heart. | #f91880 |
subColor | String | The sub color. This color is assigned to the explosion. | #f91880 |
size | Number | Overall size of the button. This represents a multiple of the default size and should be a positive number. | 1 |
duration | Number | Animation duration. This prepresents animation-duration in CSS and should be a positive number. The unit is s. |
1 |
disabled | Boolean | This prevents the user from interacting with the button: it cannot be pressed or focused. | false |
Dependencies
@babel/core: ^7.14.6@babel/preset-env: ^7.14.7@rollup/plugin-alias: ^3.1.2@rollup/plugin-babel: ^5.3.0@rollup/plugin-commonjs: ^14.0.0@rollup/plugin-node-resolve: ^9.0.0@rollup/plugin-replace: ^2.4.2@vue/cli-plugin-babel: ^4.5.13@vue/cli-service: ^4.5.13cross-env: ^7.0.3minimist: ^1.2.5node-sass: ^6.0.1rimraf: ^3.0.2rollup: ^2.52.8rollup-plugin-terser: ^7.0.2rollup-plugin-vue: ^5.1.9sass-loader: ^10.2.0vue: ^2.6.14vue-template-compiler: ^2.6.14