Rate组件

虽然是源码分析，但终究还是需要自己敲一遍。很多时候，只是以为自己会了，其实只是看的懂了，但是不看源代码的话，估计还是两眼一黑。

所以，这次打算写的更详细一点。从一些简单的功能开始，一步步的去分析源码，通过给组件迭代分析，一个版本一个版本地迭代，逐步实现不同的功能。

---

Version-0.1-实现了显示整数评分，高分和低分之间的图标、颜色变化
最初始的版本，暂时先不考虑半星这种情况。

<template>
  <div class="me-rate">
    <span
      v-for="item in max"
      class="me-rate-item">
      <i
        :class="[getIconClass(item-1)]"
        :style="getIconColor(item)"
        class="el-rate-icon"></i>
    </span>
    <span 
      v-if="showText" 
      class="me-rate-text" 
      :style="{color: textColor}">{{ text }}</span>
  </div>
</template>

props: max -> 评分的最高分
然后根据max值, 循环遍历max个图标节点。而对于高分和低分之间的变化就在于这两句：

:class="[getIconClass(item-1)]"
:style="getIconColor(item)"

给每个图标绑定不同的class 和 style。
举个例子，对于图标，如果评分为3，总分为5.

1. 则第1-3个图标应该为activeClass, 4-5个图标为voidClass
2. activeClass 和 voidClass的值从哪里取呢？ ——> classMap。当组件初始化的时候，通过props的colors 和 iconClass的值，初始化这两个map集合。
3. 很巧妙的一点在于，对于图标和颜色的取值，都是通过getValueFromMap这个函数实现。
4. 不同等级获取不同的值，就需要lowThreshold, highThreshold这两个props来进行判断临界值的判断。

分析到这里，再看version-0.1版本的代码，应该问题就不大了。

---

version-0.2-半星的实现与disabled

在前面，如果为voidClass, 我们直接获取的是 this.classMap.voidClass, 但是disabled的时候，voidClass的样式不同，依旧为实心的，所以要添加 disabledVoidClass, 在props, computed, classMap三处都要进行修改。

Rate.png

对于半星的实现，在原有的基础上，给图标增加子元素， 绝对定位，设置宽度为50%（如果小数部分大于0.5）。这个子元素（半星）的图标和颜色样式肯定为 activeClass、activeColor.

    <i
        :class="[getIconClass(item)]"
        :style="getIconColor(item)"
        class="el-rate-icon">
        <i
          v-if="showDecimalIcon(item)"
          :class="decimalIconClass"
          :style="decimalStyle"
          class="me-rate-decimal"></i>
       </i>

---

version-0.3-实现hover、click动态选择分数

这一部分的重点在于理解v-model的本质

<input v-on:input   v-bind:value />

所以可以试一下，如果将props中的value换一个名字，那么，在调用组件时v-model并不能正确的绑定值。

相应的，在点击的时候，触发selectValue函数，通过this.$emit('input', **)手动地来触发v-model的改变。

selectValue() {
        if(this.disabled) {
          return;
        }
        this.$emit('input', this.currentValue);
      },

而对于hover的时候，改变图标的选中状态，这段代码很有意思

setCurrentValue(value, event) {
        if(this.disabled) {
          return;
        }
        if(this.allowHalf) {
          let target = event.target;
          if(hasClass(target, 'me-rate-item')) {
            target = target.querySelector('.el-rate-icon');
          }
          if(hasClass(target, 'me-rate-decimal')) {
            target = target.parentNode;
          }
          this.pointerAtLeftHalf = event.offsetX * 2 <= target.clientWidth;
          this.currentValue = this.pointerAtLeftHalf ? value -0.5 : value;
        }else {
          this.currentValue = value;
        }
        this.hoverIndex = value;
      },

首先，不管hover到父元素还是半星子元素上，都先查找到el-rate-icon元素。然后通过offsetX 和 clientWidth 来判断hover的位置是否过半。相应的改变 currentValue.

---