Rate

星级评分

Rate 组件使用 html5data- 属性实现,当点击评分区域时,获取 data 属性的值,然后通过 vue:class 控制评分星星的状态,即是否为 active

  1. <template>
  2. <divclass="page__bd">
  3. <divclass="weui-cells__title">点击评分</div>
  4. <divclass="weui-cells__title">{{rateScore}}</div>
  5. <divclass="weui-rate-wrap">
  6. <ulclass="weui-rate">
  7. <li class="weui-rate-item" v-for="n in max" :key="index" :class="{'weui-rate-item-active' : index <= tempValue}" :data-index='index' @click="selectRate">
  8. <divclass="weui-rate-item-def"></div>
  9. </li>
  10. </ul>
  11. </div>
  12. </div>
  13. </div>
  14. </template>
  15. <script>
  16. exportdefault{
  17. data(){
  18. return{
  19. max:5,
  20. rateScore:'',
  21. rateScoreDesc:['非常不满意,各方面都很差','不满意,比较差','一般,还需改善','比较满意,仍可改善','非常满意,无可挑剔'],
  22. tempValue:3
  23. }
  24. },
  25. methods:{
  26. selectRate(e){
  27. this.tempValue = e.mp.currentTarget.dataset.index;
  28. this.rateScore =this.rateScoreDesc[this.tempValue];
  29. }
  30. }
  31. }
  32. </script>
  33. <style>
  34. </style>

效果

rate01