介绍
st-rating 是一个易于使用的前端评分组件，它能够让用户清楚地看到自己的评分结果。这个组件开源，可通过 npm 包的形式进行下载安装。
安装
使用 npm 安装 st-rating：
npm install st-rating
当然也可以通过 CDN 方式引入：
<link rel="stylesheet" href="https://unpkg.com/st-rating/dist/st-rating.min.css" /> <script src="https://unpkg.com/st-rating/dist/st-rating.min.js"></script>
使用
在 HTML 文件中引入 CSS 和 JS 文件：
<link rel="stylesheet" href="path/to/st-rating.min.css" /> <script src="path/to/st-rating.min.js"></script>
然后，在你需要添加评分组件的地方，添加以下 HTML：
<div class="st-rating"></div>
然后，创建一个 stRating 实例：
var element = document.querySelector('.st-rating');
var options = { ... };
var rating = new stRating(element, options);其中的 options 可以指定以下属性：
- value: 初始值（0-10），默认为 0。
- readonly: 是否只读，默认为 false。
- isHalf: 是否允许半星评分，默认为 false。
- onRate: 评分后回调函数。
例如，可以这样定义 options：
var options = {
value: 8,
readonly: false,
isHalf: true,
onRate: function(newValue) {
console.log('rated:', newValue);
}
};示例
以下是一个简单的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------
----- ---------------- --------------------------------------------------------- --
-------
----------------- -
----------- -------
------- -----
-
--------
-------
------
---- -------------------------
------------
---- ------------------------
------- -------------------------
------
------- -----------------------------------------------------------------
--------
--- ------- - -------------------------------------
--- ------- - -
------- -----
------- ------------------ -
--------------------- ----------
-
--
--- ------ - --- ----------------- ---------
--- --- - -------------------------------
----------- - ---------- -
---------- - - -------------------
--
---------
-------
-------在该示例中，我们通过创建一个 stRating 实例对评分组件进行配置，值得一提的是，在点击评分后，我们通过 rating.getValue() 方法获取用户评分结果，而不是通过 rating.value 属性来获取。因为 rating.value 属性只代表初始化时的值，而并不反映实时的评分结果。
结论
通过本教程，我们学习了 st-rating 组件的使用方法，并学会了如何通过设置属性来控制其在页面上的行为。希望这篇文章能够对你理解 st-rating 组件的使用，以及前端评分组件的开发有所启发和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e781e8991b448e08eb