介绍
bootstrap-star-rating 是一个基于 Bootstrap 的评分组件，可以方便地在网页中添加星级评分功能。本文将介绍如何使用此 npm 包。
安装
要安装 bootstrap-star-rating，只需在终端中运行以下命令：
npm install bootstrap-star-rating
使用
使用 bootstrap-star-rating 很简单，只需要在 HTML 中引入相关的 CSS 和 JavaScript 文件，然后在需要添加评分组件的元素上调用 starRating() 方法即可。下面是一个示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ---- ------ ------------
----- ---------------- ---------------------------------
----- ---------------- -----------------------------------
-------
------
---- ------------------
------- -------------------------------------
------- ------------------------------------------
--------
-----------------------------
--------------------------
---
---------
-------
-------在上面的代码中，我们在页面中创建了一个空的 <div> 元素，并指定了它的 ID 为 "rating"。然后，在页面加载完成后，我们调用了这个元素的 starRating() 方法。
接下来，我们可以把这个 <div> 元素放到任何其他 HTML 元素中，比如表单中的一个输入框，这样就可以让用户对该项进行评分。
<form> <label>请为我们的产品打分：</label> <div id="rating"></div> <input type="hidden" name="score" id="score"> </form>
在上面的代码中，我们把 <div> 元素放到了表单中，并添加了一个隐藏的输入框来保存用户评分的值。在提交表单时，我们可以使用 JavaScript 获取评分值并把它作为表单数据提交给后端服务器。
参数
bootstrap-star-rating 还支持一些可选参数，可以用来自定义评分组件的外观和行为。下面是一些常见的参数及其含义：
initialRating: 初始评分值，默认为 0。starSize: 星星大小，单位为像素，默认为 40。useGradient: 是否使用渐变颜色，默认为 false，表示使用纯色。disableAfterRate: 用户评分后是否禁用组件，默认为 true。onHover: 当用户鼠标悬停在星星上时的回调函数。onClick: 用户点击星星时的回调函数。
下面是一个示例，演示如何使用这些参数：
-- -------------------- ---- -------
-------------------------
-------------- --
--------- ---
------------ -----
----------------- ------
-------- ---------------------- -------------- -----
--------------------- - - ------------ - - --------- - - ---------------
--
-------- ---------------------- -------------- -----
------------------- - - ------------ - - -------- - - ---------------
-
---总结
bootstrap-star-rating 是一个非常方便易用的评分组件，可以帮助我们快速地在网页中添加星级评分功能。本文介绍了如何使用该组件以及一些常见的参数选项，并给出了示例代码。希望读者能够通过本文学到有用的知识，为自己的前端开发工作增加更多的效率和乐趣。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35683