vue 实现只有中评好评差评功能

工作的日常分享4：vue 实现中评好评差评功能，一开始产品经理的要求是用星星，后面说要改成只有中评好评差评，一开始是打算用饿了么组件库的，后面就只能自己想办法实现了，实现起来也还是蛮简单的
其他工作日常分享：
统一输入框只能输入数字且不能小于1
使用循环总是拿到最后的值
将参数或者数据当做属性使用
el-form 动态控制rules是否校验

实现方法：首先需要在阿里巴巴图标库去选择对应的图标，具体的使用方法可以看官网

阿里巴巴图标库地址
循环渲染的方法：score是后端所需要的参数，自己根据后端需要的参数定义，在点击的时候将当前下标赋值到一个指定的字段中，然后给当前的盒子加类名，更改他的点击样式之类的，注意icon的渲染，不要写错了

      <el-form-item label="商品评价">
        <div v-for="item, index in texts" :key="index" class="icon-box" @click="RateClick(index, item.score)"
          :class="{ active: subscript == index }">
          <span :class="'iconfont ' + item.icon"></span>{{ item.text }}
        </div>
      </el-form-item>
//点击时的样式状态自己根据需求设置
.active {
    color: #FFF;
    border: 0;
    background-color: #409eff;
}

然后定义在data中定义iocn以及内容和后端需要的参数

texts: [{
        text: '好评',
        icon: 'icon-haoping',
        score: 10
      }, {
        text: '中评',
        icon: 'icon-pingjiazhongping',
        score: 20
      }, {
        text: '差评',
        icon: 'icon-chaping',
        score: 30
      }],