vue five-star rating widget

Original Address: https://blog.phyer.cn/article/6884 . New bloggers, welcome to visit (● '◡' ●)

A recent complete set, an electricity supplier site, a treasure of a similar east. In learning something new, # [Sass] (https://github.com/sass/sass) and # [Vue] (https://github.com/vuejs/vue) (new for me! [stk-img] (ka / 8)).

Plug-star rating

Make electricity supplier website to use a scoring function, then I wrote a small plug-in `vue_star.js`.

Test 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<
        Manual:>Star> </
        : Modify= "0": Star="'t'" :f_size="30"></star>
    </div>
</body>
<script>
    window.onload = function(){
        new Vue({el: '#container'})
    }
</script>
</html>

Renderings

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;
  }
}

Digression

Sass's official website that he is ** the world's most mature, stable, and powerful CSS extension language **, literally, with Sass can save at least 1/3 of the time to write css, for its author, the biggest advantage is very simple to pinpoint elements. Brains do not think the class name, with a lot of html .head with this simple css class name without fear of confusion.

Vue is a good starting point: only drive for front-end data. It changed my understanding of front-end development. Whether before or jsp coupled with django and flask, all data and html together, because I have been written by a front and rear end, I did not feel any inconvenience. After studying VUE, although the rear end or servlet + jsp, but does not substantially jsp processing data, or processing data that do not require access to a simple Dao layer (such as static and the session shared data), the data to the other ajax, data to render vue two-way data binding and `v-if`, really easy to use.

vue five-star rating widget

Original Address: https://blog.phyer.cn/article/6884 . New bloggers, welcome to visit (● '◡' ●)

Plug-star rating

Renderings

Digression

Guess you like