Vue realizes only the function of positive and negative reviews

Daily sharing of work 4: Vue realizes the function of good reviews and negative reviews. At the beginning, the product manager’s request was to use stars. Later, he said that he wanted to change it to only positive reviews and negative reviews. At the beginning, he planned to use the Ele.me component library. Later, he had to find a way to realize it. It ’s quite
simple .

Implementation method: first of all, you need to select the corresponding icon in the Alibaba icon library, and the specific usage method can be found on the official website

Alibaba icon library address
The method of circular rendering: score is the parameter required by the backend. According to the definition of the parameter required by the backend, assign the current subscript to a specified field when clicking, and then add a class name to the current box, change its click style, etc., pay attention to the rendering of the icon, do not write it wrong

      <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;
}

Then define the parameters needed to define iocn and content and backend in data

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