el-rate 辅助文字+自定义表情

前言

记在一次项目中打分设计效果为星星+表情，还要有辅助文字，然后各种面向浏览器编程，也没有看到简便的方法，于是就有了下面的操作：

先上个设计图的效果叭

简单一句话就是随着星数的变化，表情跟文字也要变

代码

<!--template-->
<div v-for="(itme, index) in state.detailList.classList" :key="index" class="scores">
     <div class="headline">
          <div v-for="(itm, index) in itme.classList" :key="index" class="score">
             <div class="describe"><i style="color: red">*</i>{{ index + 1 }}.{{ itm.name}}</div>
                <div class="rates">
                   <el-rate :icon-classes="iconClasses" void-icon-class="icon-rate-face-off" @change="changeRate(itm)" v-model="itm.value" show-text :texts="state.texts" class="rate-star"></el-rate>
                </div>
           </div>
       </div>
 </div>
 <!--setup-->
 const state = reactive({
     detailList: {},
     texts: ['非常差', '较差', '一般', '很好', '非常好']
 })
 <!--改变星数的方法(根据实际业务需求来)-->
 const changeRate = val => {
  state.recordList = [];
  console.log(val, 'val');
  state.rateList.push(val);
  let recordArray = [];
  const map = new Map();
  const qc = state.rateList.filter(rateList => !map.has(rateList.id) && map.set(rateList.id, 1));
  state.rateList = qc;
  state.rateList.forEach(item => {
    let arrayItem = {};
    arrayItem.planId = state.itemId;
    arrayItem.evaluationUserId = state.id;
    arrayItem.parentId = item.parentId;
    arrayItem.score = item.value;
    arrayItem.type = item.type;
    arrayItem.classId = item.id;
    recordArray.push(arrayItem);
  });
  state.recordList = recordArray;
  console.log(state.recordList, 'state.recordList');
};
 
<!--style--> 
::v-deep .el-rate__item {
  width: 32px;
  height: 32px;
  margin-right: 16px;

  .el-rate__icon {
    width: 100%;
    height: 100%;
  }
  .icon {
    width: 32px;
    height: 32px;
  }
}
// 重要部分
::v-deep.rate-star[aria-valuetext='非常差']::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 34px;
  width: 20px;
  height: 20px;
  background: url('../../assets/img/icon_cha.png');
}
::v-deep.rate-star[aria-valuetext='较差']::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 34px;
  width: 20px;
  height: 20px;
  background: url('../../assets/img/icon_cha.png');
}
::v-deep.rate-star[aria-valuetext='一般']::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 34px;
  width: 20px;
  height: 20px;
  background: url('../../assets/img/icon_yiban.png');
}
.rate-star[aria-valuetext='很好']::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 34px;
  width: 20px;
  height: 20px;
  background-image: url('../../assets/img/icon_good.png');
}
.rate-star[aria-valuetext='非常好']::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 34px;
  width: 20px;
  height: 20px;
  background-image: url('../../assets/img/icon_good.png');
}

最后

其实看到最后的原理就是在文字后面加个伪元素再用绝对定位，让表情图片定位过去，再根据文字看显示哪一张表情图，但是写的时候真的有点花时间，所以就来记录一下啦