vue-star 使用和修改

最新推荐文章于 2022-06-22 07:13:34 发布

阿豪boy

最新推荐文章于 2022-06-22 07:13:34 发布

阅读量124

点赞数

文章标签： python vue css js html

本文链接：https://blog.csdn.net/qq_35516360/article/details/122066627

版权

原文链接: vue-star 使用和修改

上一篇: Vue中的$set的使用

下一篇: Python之 is 和 == 的区别字符串的intern机制

git

https://github.com/OYsun/VueStar

demo

http://web-oysun.cn/VueStar/

一个点赞收藏的简单插件，在使用的过程中发现一些问题，自己稍微修改了下，加了一个激活状态的属性，去掉了颜色验证，修改了定位方式，使用默认定位方式

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>