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

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

 
最近做毕设，一个电商网站，类似某宝某东。在学一些新的东西，#[Sass](https://github.com/sass/sass)和#[Vue](https://github.com/vuejs/vue)(对我来说是新的![stk-img](ka/8))。

 

五星评分插件

 

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

 

测试html:
 
<!DOCTYPE html>
<html>
<head>
    <script src="vue.min.js"></script>
    <script src="vue_star.js"></script>
    <style>
        @font-face {
            font-family: 'icon-font';
            src: url('iconfont.eot');
            src: url('iconfont.eot?#iefix') format('embedded-opentype'),
            url('iconfont.woff2') format('woff2'),
            url('iconfont.woff') format('woff'),
            url('iconfont.ttf') format('truetype'),
            url('iconfont.svg##iconfont') format('svg');
        }
    </style>
    <link href="vue_star.css" rel="stylesheet">
</head>
<body>
    <div id="container">
        固定：
        <star :star="3.8" :modify="'f'" :f_size="20"></star>
        手动：
        <star :star="0" :modify="'t'" :f_size="30"></star>
    </div>
</body>
<script>
    window.onload = function(){
        new Vue({el: '#container'})
    }
</script>
</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: "" +
        "<div class='star' :style='{width: f_size*5+\"px\"}'>" +
        "   <span :style='{width: percent*100+\"%\", fontSize: f_size+\"px\"}' @mousemove='check_change'></span>" +
        "   <b>{{ mark }}</b>" +
        "</div>"
    ,
    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`，实在好用。

 

 

 

posted on 2020-04-05 23:34  yunyuyuan  阅读(573)  评论(0)    收藏  举报

导航