封装星星评分只带显示无点击功能

封装星星评分只带显示无点击功能

components

<template>
  <div class="star">
    <div>
      <!-- // 满星 -->
      <i
        class="iconfont icon-star-full icon_m"
        v-for="(i, index) in parseInt(value)"
        :key="index"
      ></i>
      <!-- // 半星 -->
      <i
        class="iconfont icon-star-half icon_b"
        v-if="value.toString().indexOf('.') > 0"
      ></i>
      <!-- // 灰星 -->
      <i
        class="iconfont icon-star-full icon_h"
        v-for="i in parseInt(5 - value)"
        :key="i * 6"
      ></i>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 分值
    value: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      num: 0,
    };
  },
  watch: {
    num() {
      // 可点击状态下，双向绑定的分值改变
      this.$emit("input", this.num);
    },
  },
};
</script>

<style lang="scss" scoped>
.icon_m {
  color: #fcb237;
  width: 20px;
  height: 20px;
  font-size: 20px;
}
.icon_b {
  color: #fcb237;
  width: 20px;
  height: 20px;
  font-size: 20px;
}
.icon_h {
  color: #e7e7e7;
  width: 20px;
  height: 20px;
  font-size: 20px;
}
</style>

页面引入

<template>
	<Star v-model="value" />
</template>
<script>
import Star from "../components/star.vue";
export default {
	components: { Star }, 
	data() {
    	return {
      		value: 3.5,
	    }
    },
}
</script>