git
https://github.com/OYsun/VueStar
demo
一个点赞收藏的简单插件,在使用的过程中发现一些问题,自己稍微修改了下,加了一个激活状态的属性,去掉了颜色验证,修改了定位方式, 使用默认定位方式
VueStar.vue
@import './CoreBase64.less';
.VueStar{
position: absolute;
}
.VueStar__ground {
width: 100px;
height: 100px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.VueStar__icon {
z-index: 888; /*❤今年888大发*/
}
.VueStar__decoration {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
.base64();
background-position: 0 0;
transition: background-position 1s steps(25);
transition-duration: 0s;
&--active {
transition-duration: 1s;
background-position: -2500px 0;
}
}
测试
引入注册后直接使用
import VueStar from '../components/VueStar'
<vue-star animate="animated rubberBand" color="blue">
<i slot="icon" class="fa fa-heart fa-3x" @click="handleClick"></i>
</vue-star>
<vue-star animate="animated rubberBand" color="#F05654" :active="true">
<i slot="icon" class="fa fa-heart fa-2x"></i>
</vue-star>