Vue组件开发系列之Rate评分组件

组件源码：
https://github.com/AntJavascript/widgetUI/tree/master/Rate

FireShot Capture 13 - nvx - http___localhost_8080_demo#_Rate.png
组件结构：

<template>
    <div class='wt-rate'>
      <wt-row>
        <div
        :class="[clicked >= index ? checkedIcon + ' checked' : icon, type]"
        v-for="(item, index) in ~~nubmer"
        @click="handle(item, index)"
        :key="index">
        </div>
      </wt-row>
    </div>
</template>

代码分析：

props参数：

props: {
    nubmer: { // 组件显示的数量
      type: Number | String,
      default: () => {
        return 5;
      }
    },
    currentIndex: { // 当前处于第几个
      type: Number | String,
      default: () => {
        return -1;
      }
    },
    disable: { // 是否禁用
      type: Boolean,
      default: () => {
        return false;
      }
    },
    type: { // 组件类型，（可选）主要是颜色的不同（可选值："default", "danger", "success", "warning")
      type: String,
      default: () => {
        return 'default';
      }
    },
    icon: { // 默认显示的图片
      type: String,
      default: () => {
        return 'icon-favor';
      }
    },
    checkedIcon: { // 选中显示的图片
      type: String,
      default: () => {
        return 'icon-favor_fill';
      }
    }
  }

data参数：

data () {
    return {
      clicked: this._props.currentIndex // 父组件指定的选择项
    };
  }

methods函数：

methods: {
    handle (item, index) {
      if (!this.disable) { // 不禁用才可以点击
        this.clicked = index; 当前选中选项
        this.$emit('handle', index + 1); // 传值父组件
      }
    }
  }

组件源码：
https://github.com/AntJavascript/widgetUI/tree/master/Rate