vue五星评分插件

时间 2020-04-06

标签 vue 五星评分插件繁體版

原文原文链接

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

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

五星评分插件

作电商网站要用到评分功能，因而本身写了一个小插件 vue_star.js。

测试html: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:vue

.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，实在好用。