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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。