vue2实现店铺的星级评价及封装成vue插件支持vue.use(star)

2017-08-17

星级评价在店铺中多次使用，因此作为组件进行编写，及封装成插件的方法

需求分析

星级评价的标准是该店铺的得分，样式以星星的尺寸来划分总共有三种，分别是48,36和24
调用插件时传入两个参数，第一个星星的size，数据类型为number，第二个店铺的评分score，数据类型为number

1 组件形式 star.vue（插件形式就是多个调用的js）

<template>
    <div class="star" :class="starType">
      <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item "></span>
    </div>
</template>

<script>
  const LENGTH = 5;
  const CLS_ON = 'on';
  const CLS_HALF = 'half';
  const CLS_OFF = 'off';
  export default {
    props: {//接受父组件参数数据 来进行数据传递
      size:{
        type: Number
      },
      score:{
        type: Number
      }
    },
    computed:{//计算属性
      starType:function() {
        return 'star-'+this.size
      },
      itemClasses:function() {
        let result = [];
        let score = Math.floor(this.score * 2) / 2 //分数
        let hasDecimal = score % 1 !== 0;//半星
        let integer = Math.floor(score);//全星
        for(let i = 0;i < integer; i++){
          result.push(CLS_ON) //全星的样式
        }
        if(hasDecimal){
          result.push(CLS_HALF)//半星的样式
        }
        while(result.length< LENGTH ){
          result.push(CLS_OFF)//空白星星样式
        }
        return  result;
      }
    }
  }
</script>

css代码

<style>
  .star{
    font-size: 0;
  }
  .star .star-item{
    display: inline-block;
    background-repeat: no-repeat;

  }
   .star-48 .star-item{
    display: inline-block;
    width:20px;
    height:20px;
    margin-right: 22px;
    background-size:20px 20px ;
  }
  .star-48 .star-item:last-child{
    margin-right: 0;
  }
  .star-48 .on{
    background-image:url(star48_on@2x.png) ;
  }
  .star-48 .half{
    background-image:url(star48_half@2x.png) ;
  }
   .star-48 .off{
    background-image:url(star48_off@2x.png) ;
  }
  .star-36 .star-item{
    width:15px;
    height:15px;
    margin-right: 16px;
    background-size:15px 15px ;
  }
   .star-36  .on{
    background-image:url(star36_on@2x.png) ;
  }
  .star-36  .half{
    background-image:url(star36_half@2x.png) ;
  }
  .star-36  .off{
    background-image:url(star36_off@2x.png) ;
  }
   .star-24 .star-item{
    width:10px;
    height:10px;
    margin-right: 3px;
    background-size:10px 10px ;
  }
  .star-24 .on{
    background-image:url(star24_on@2x.png) ;
  }
  .star-24 .half{
    background-image:url(star24_half@2x.png) ;
  }
  .star-24 .off{
    background-image:url(star24_off@2x.png) ;
  }

</style>

在引用页面引用当前的组件方式

<body>
<star  :size="48" :score="seller.score"></Star_>
</body

<script>
   import star from '../star/star.vue';

    export default {
        components:{
          star
        }
    }
</script>

下面我们来实现vue.use(Star_)插件的形式调用. star.vue不变请看最上面的代码

在star.vue同级创建 index.js(名字无所谓只要路径没问题)

import StarComponent from './star.vue'
const Star_ing = {
  install: function(Vue) {
//  Star_ 引用的组件名称<Star_></Star_>
    Vue.component('Star_', StarComponent)
  }
}
export default Star_ing

在main.js入口文件下引用该组件

import Star from './components/star' //自定义星星等级组件

Vue.use(Star)

引用方式
<body>
<Star_  :size="48" :score="seller.score"></Star_>
</body>

这样就可以在各个页面用的到的地方引用了

参数详解 :class v-for的一些基础语法什么的就不多说了不懂得可以看看官网
:class =’starType’ 返回的是一个字符串，该字符串由’star-‘ + this.size拼接而成，this.size是调用组件时传入的num 拼接后，会出现三个类名，分别是star-48，star-36，star-24，这三个类名决定了星星的大小
v-for=”itemClass in itemClasses” :class=”itemClass” 是循环数组然后拿出span的样式决定星星的状态
使用props进行数据传递接受父组件传过来的参数 size 和 score 和定义参数的类型number
const LENGTH = 5; 星星长度
const CLS_ON = ‘on’; 全星的class name
const CLS_HALF = ‘half’; 半星的class name
const CLS_OFF = ‘off’; 空白星星的class name
let result = []; 定义了一个数组，该数组用于存放星星的类名
let score = Math.floor(this.score * 2) / 2 ，将分数乘以二并向下取整之后除以二，得到x.0或者是x.5的数字
let hasDecimal = score % 1 !== 0;hasDecimal的值是true或者false对score取余，有余数时hasDecimal为true，无余数时返回false
let integer = Math.floor(score);//对score再次向下取整
for循环，根据integer的数值确定向result数组中push类名CLS_ON的个数，由此可以得到全星个数
if语句hasDecimal为true则有半星，false则无半星
while语句全星循环的半星判断执行完之后对result数组的长度进行判断，小于总长度则向数组中push空白星