Vue.js 点击星星进行评价

最新推荐文章于 2024-09-04 17:18:19 发布

渐离生死

最新推荐文章于 2024-09-04 17:18:19 发布

阅读量6.5k

点赞数

本文链接：https://blog.csdn.net/qq1452461421/article/details/78717561

版权

1、评价等级（1、2、3、4、5）星

2、支持显示平均评价半星，不支持评价点击星星的时候半星

效果如图：

初始化显示：

点击星星显示：

步骤

CSC：添加一个显示全星，半星，空星的样式

JS: 如下，自定义一个组件

const LENGTH = 5;
const CLS_ON = 'icon-grade-full'; // 全星
const CLS_HALF = 'icon-grade-half'; // 半星
const CLS_OFF = 'icon-grade-empty'; // 空星
Vue.component('star-evaluation', {
  template: `<div class="star-evaluation">
    <span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star" @click="selectStar(index,$event)" v-model="score"></span>
  </div>`,
  props: {
    //* 
    propScore: { // 传入的变量
      type: Number
    }
  },
  data: function () {
    return {
      score: ''
    }
  },
  methods: {
    selectStar: function (index, event) {
      console.log(event.target)
     // 点击当前星星索引值+1
      this.score = index + 1;
    }
  },
  computed: {
    //* 计算显示星星
    itemClasses () {
      let result = []; // 返回的是一个数组,用来遍历输出星星
      let score = Math.floor(this.score * 2) / 2; // 计算所有星星的数量
      let hasDecimal = score % 1 !== 0; // 非整数星星判断
      let integer = Math.floor(score); // 整数星星判断
      for (let i = 0; i < integer; i++) { // 整数星星使用on
        result.push(CLS_ON);// 一个整数星星就push一个CLS_ON到数组
      }
      if (hasDecimal) { // 非整数星星使用half
        result.push(CLS_HALF);// 类似
      }
      while (result.length < LENGTH) { // 余下的用无星星补全,使用off
        result.push(CLS_OFF);// 类似
      }
      return result;
    }
  }
});
HTML: 直接使用自定义的组件 prop-score 是传入的值，即点击后需要显示星星数量
<star-evaluation :prop-score="3.5" @click.stop="selectStar"></star-evaluation>