vue自定义评分组件

element评分组件con没有合适，自己写了一个评分组件

模板部分

<template>
  <div class="flex">
    <div v-for="i in 5" :key="i" @mouseover="change(i)" class="rate-icon">
      <img :src="activeIcon" v-if="i <= modelValue" />
      <img :src="icon" v-else />
    </div>
  </div>
</template>

js部分

<script>
import icon from '/src/assets/svg/rate-icon.svg'
import activeIcon from '/src/assets/svg/rate-icon-active.svg'
export default {
  props: {
	modelValue:{
      type: Number,
      default: 0,
    },
    value: {
      type: Number,
      default: 0,
    },
    icon: {
      type: String,
      default: icon,
    },
    activeIcon: {
      type: String,
      default: activeIcon,
    },
  },
  data() {
    return {
      property: 'value',
    }
  },
  methods: {
	change(i){
		this.$emit('update:modelValue', i);
	}
  },
}
</script>

css部分

<style lang='scss' scoped>
	.rate-icon {
		margin-right: 12px;
	}
	.rate-icon:last-child {
		margin-right: 0;
	}
</style>

组件使用

<rate v-model="intonation" icon="/src/assets/svg/rate-icon.svg"/>

<script>
import rate from './component/rate.vue'
export default {
  components: {
    rate,
  },
  data() {
    return {
      intonation: 3,
    }
  }
}
</script>