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