1.0.1 • Published 7 months ago
jx-vue3-stars v1.0.1
介绍
基于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:点击组件星星,获取分数值。