4行html实现js(vue)五星评分插件，鼠标悬浮评分，⭐平滑切割

原文地址：https://blog.phyer.cn/article...。新人博主，欢迎大家访问(●'◡'●)

最近做毕设，一个电商网站，类似某宝某东。在学一些新的东西，#Sass和#Vue。

---

五星评分插件

做电商网站要用到评分功能，于是自己写了一个小插件 vue_star.js。

测试html:

    
    
    
    


    

        固定：
        
        手动：
        
    

效果图

vue_star.js:

Vue.component('star', {
    props: ['star', 'modify', 'f_size'],
    data: function(){
        return {
            percent: this.$props['star']/5,
            can_modify: this.$props['modify']!=='f',
            debounce: false,
        }
    },
    template: "" +
        "
" +
        "   " +
        "   {{ mark }}" +
        "
"
    ,
    computed: {
        mark: function () {
            return (this.percent*5).toString().replace(/(\.\d)\d*/, '$1')
        }
    },
    methods: {
        check_change: function(e){
            if(this.can_modify){
                this.mouse_move(e);
            }
        },
        mouse_move: function (e) {
            this.percent = e.offsetX/this.$el.offsetWidth;
        }
    }
});

vue_star.scss:

.star{
  display: flex;
  align-items: center;
  position: relative;
  >span{
    position: relative;
    display: flex;
    &:before,&:after{
      position: absolute;
      top: 0;
      left: 0;
      font-family: 'iconfont';
      content: '\e72d\e72d\e72d\e72d\e72d';
    }
    &:before{
      position: relative;
      color: #8b8b8b;
      overflow: visible;
    }
    &:after{
      width: 100%;
      color: #ffb652;
      overflow: hidden;
      transition: all .1s linear;
    }
  }
  >b{
      position: absolute;
      top: 0;
      left: 100%;
      font-size: 15px;
  }
}

题外话

• Sass的官网说自己是世界上最成熟、稳定和强大的CSS扩展语言，名副其实，用Sass至少能省1/3的css编写时间，对笔者来说它最大的好处是可以很简单地精确定位到元素。不用绞尽脑汁想类名，同一个html用很多.head这种简单类名而不用担心css混淆。
• Vue的出发点很好：只针对前端，数据驱动。改变了我对前端开发的理解。以前无论用jsp还是django和flask，都是数据和html耦合在一起，因为我都是一个人写前后端，也没觉得有什么不方便。学了vue之后，虽然后端还是servlet+jsp，但是jsp基本不处理数据，或处理一些不需要访问Dao层的简单数据(比如静态共用数据和session)，其它数据交给ajax，数据渲染交给vue的数据双向绑定和v-if，实在好用。