介绍

基于vue3.0的星星评分组件: 1、包含可点击评分、仅展示分数两种方式； 2、支持引入图片方式。

组件使用

安装

npm i jx-vue3-stars --save

使用

<template>
  <div>仅展示分数：<Stars class="star-box" :score="4" theme="green" /></div>
  <div>
    <span>可评分的星星：</span>
    <Stars
     class="star-box"
     :score="score"
     type='click'
     fullStar="https://image.yesm.cn/FkPmlnScaqG9n2z9gtfGkXddAgYt"
     emptyStar="https://image.yesm.cn/FvUpsy9k78QTB9BgplR5rP9O8lXv"
     :starWidth="20"
     @update-rate="update"
    />
    <span class="pdl">{{ score }}分</span>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Stars from 'jx-vue3-stars'
// 评分方法
let score = ref(1)
function update (num) {
  score.value = num
}
</script>

属性说明

 score: 分数（值为0-5）
 type: 展示类型，不传时仅展示分数，type='click'时组件可点击评分
 theme: 主题色，默认值为#fadb14
 fullStar: 分值星星图
 emptyStar：未加分星星底图
 starWidth： 星星图片大小，默认18，（单位：px）
 @update-rate：点击组件星星，获取分数值。