Vue精简代码实现评分组件

写在前面

评分组件，星星可以点击也可以禁止点击，根据分值，可以展示全星、灰星、半星，包含小数点就算半星！

效果图

组件代码

<template>
  <div class="star">
    // 用于父子组件双向绑定
    <input type="hidden" v-model="value">
    // 不可点击的星星
    <div v-if="readonly">
      // 满星
      <img v-for="i in parseInt(value)" :key="i" :src="full">
      // 半星
      <img v-if="value.toString().indexOf('.') > 0" :src="half">
      // 灰星
      <img v-for="i in parseInt(5 - value)" :key="i * 6" :src="empty">
    </div>
    // 可点击的星星
    <div v-else>
      // 满星
      <img v-for="i in num" :key="i" :src="full" @click="num = i">
      // 灰星
      <img v-for="i in parseInt(5 - num)" :key="i * 5" :src="empty" @click="num += i">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 分值
    value: {
      type: Number,
      default: 0
    },
    // 只读，表示可以点击还是不可点击
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      num: 0,
      full: require('./红星.png'),
      empty: require('./灰星.png'),
      half: require('./半星.png')
    }
  },
  watch: {
    num () {
      // 可点击状态下，双向绑定的分值改变
      this.$emit('input', this.num)
    }
  }
}
</script>

<style scoped>
  .star img {
     width: 24px;
     height: 24px;
     margin: 0 2px;
   }
</style>

父组件使用

<template>
	<div>
     <span>评分</span>
     // 可点击
     <star v-model="mess.star"/>
     // 不可点击
     <star v-model="mess.star" readonly/>
   </div>
</template>

<script>
  import star from './star'
  
  export default {
    data () {
      return {
        star: 4.5
      }
    },
    components: {
      star
    }
  }
</script>

每天都要进步！！！
个人联系方式（添加请备注）：
QQ：332983810
微信：hu_jiliang