vue score 评分插件

vue javascript 插件

1 插件部分

1.1 template部分

<template>
    <div>
        <div class="j_div_score">
            <div class="j_div_gray" :style="{cursor:disable ? '':'pointer'}">
                <span v-for="i in arr" @click="setScore(i)" class="j_score_gray"></span>
                <span class="j_sp_score" v-if="gold_width > 0">{{score}} 分</span>
            </div>
            <div class="j_div_gold" :style="{width:gold_width+'px'}">
                <span :style="{cursor:disable ? '':'pointer'}" v-for="a in arr" @click="setScore(a)" class="j_score_gold"></span>
            </div>
        </div>
    </div>
</template>

1.2 script 部分

<script>
    export default {
        name: 'myscore',
        data(){
            return{
                total: 5,
                arr: null,
                gold_width: 0,
                zero: false,
                score: 2,
                disable: false
            }
        },
        props:{
            scoreObj: {
                type: Object,
                default: null
            }
        },
        mounted(){
            if(this.arr === null)this.arr = [];
            for(let i = 1; i <= this.total; i++){
                this.arr.push(i);
            }
            if(this.score < 0)this.score = 0;
            if(this.score > 10)this.score = 10;
            this.gold_width = 22 * (this.score/2) + Math.floor(this.score/2)*5;
        },
        methods: {
            setScore: function(i){
                if(this.disable) return;
                if(this.gold_width == 27 && i == 1 && this.zero){
                    this.gold_width = 0;
                    this.score = 0;
                }
                else{
                    this.gold_width = 27*i;
                    this.score = i * 2;
                }
            }
        },
        beforeMount(){
            if(this.scoreObj){
                for(let key in this.scoreObj){
                    this.$data[key] = this.scoreObj[key];
				}
			}
		},
		watch: {
			'score': function(){
				this.$emit('callback',this.score);
            }
        }
    }
</script>

1.3 css部分

<style scoped>
    .j_div_score{font-size: 14px;font-family: '微软雅黑';position:relative;user-select:none;}
    .j_score_gray{background:url(imgs/gray.png) no-repeat;display: inline-block;width: 22px;height: 20px;margin-right:5px;}
    .j_score_gold{background:url(imgs/gold.png) no-repeat;display: inline-block;width: 22px;height: 20px;margin-right:5px;}
    .j_div_gray,.j_div_gold{float:left;position:absolute;top:0;left:0;height:20px;white-space:nowrap;}
    .j_div_gold{overflow:hidden;transition:width 0.5s;}
    .j_sp_score{display:inline-block;height:20px;line-height:20px;position:relative;top:-4px;color:#666;margin-left:10px;}
</style>

Tips:

1、以上通常会被放在一个.vue文件里面

2、css部分引入的图片需要根据实际情况引入

2 插件注册以及引用

2.1 注册

import Vue from 'vue'
import vScore from './score.vue'
const score = {
    name: 'myscore',
    install: function(){
        Vue.component('my-score',vScore);
    }
};
export default score;

Tips:

1、import路径根据实际项目情况而定，下同（不再赘述）

2、组件注册名 my-score 可随意起，最好不要与HTML保留标签冲突

2.2 引用

import vScore from '../components//vScore/score.js'
Vue.use(vScore)

<template>
    <div>
        <div class="div_score">
            <my-score :scoreObj="scoreObj" @callback="getScore"></my-score>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue'
    export default{
        data(){
            return{
                scoreObj: {
                    score: 5.7,
                    disable: false,
                    zero: true
                }
            }
        },
        methods: {
            getScore: function(s){
                console.log(s);
            }
        }
    }
</script>

3 插件可配置选择

3.1 2.2 插件引用部分scoreObj包含三个属性：

Tips：

评分一般都是两分一跳，总分10分，考虑实际情况和美观，暂不开放对星星数量和每颗星对应的分值进行配置

3.2 回调函数部分

一般评分插件是需要回调一个分数，这样可以在@callback处定义自己的回调方法

4 实际效果