在前端开发过程中，我们经常需要使用评分组件来展示用户评价或者评分。而 star-evaluation 是一个简单易用的评分组件，可以方便地用在各种前端项目中。本篇文章介绍如何使用 star-evaluation 包及其相关API。
安装
使用npm安装star-evaluation：
$ npm install star-evaluation
使用
使用 star-evaluation 包非常简单，首先我们需要在HTML中声明好一个div元素，然后在JavaScript中引入该组件并渲染到这个div中即可。
HTML：
<div id="star-container"></div>
JavaScript：
-- -------------------- ---- -------
------ -------------- ---- ------------------
----- ------------- - ------------------------------------------
----- -------------- - --- ----------------------------- -
------------- --
--------- ----- -- -
-------------------- ----- -- -----------
-
---defaultValue: 组件初始状态下的分数值，默认为0。onChange: 用户设置评分值时的回调函数，传入一个参数为当前的评分值。
渲染后会生成如下所示的评分组件：
值得注意的是，使用star-evaluation组件时必须要传入一个外层容器，并且在该容器设置指定的宽和高度。
我们还可以通过以下属性和方法对评分组件进行更加详细的配置。
属性
readonly: 是否只读，默认为false。maxValue: 最大值，默认为5。color: 星星的颜色，默认为 #FFBA00。size: 星星的大小，单位为px，默认为25。gap: 星星之间的间距，单位为px，默认为5。
方法
getValue(): 获取当前评分值。setValue(value: number): 设置当前评分值。
以下是一个示例代码，展示了如何使用上述属性和方法：
-- -------------------- ---- -------
------ -------------- ---- ------------------
----- ------------- - ------------------------------------------
----- -------------- - --- ----------------------------- -
------------- --
--------- -----
------ ----------
----- ---
---- ---
--------- ----- -- -
-------------------- ----- -- -----------
-
---
-------------------- ----- -- -------------------------------
---------------------------
---------------- ----- -- -------------------------------结论
通过本文，我们学习了如何使用npm包 star-evaluation 创建并自定义评分组件，如何使用它的 API 定制前端项目的星级评价。验证码技术的目标是帮助前端工程师轻松构建评分控件，以便更好地展示用户评分或评价，从而拓宽开发者的自由度，提高用户产品体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e3d9381d61a3540a34