在前端开发领域，我们总是需要使用各种各样的库和框架来实现我们的需求，而 npm 是一个非常重要的包管理器，能够帮助我们轻松地管理和安装各种第三方库和插件。其中，askmethat-rating 就是一个非常优秀的 npm 包，它能够帮助我们实现页面上的评分功能，本文就来详细介绍一下它的使用方法。
安装 npm 包 askmethat-rating
在开始使用 askmethat-rating 前，我们需要先安装它，通过以下命令即可在你的项目中安装：
npm install askmethat-rating --save
安装完成后，askmethat-rating 就可以被正常使用了。
使用 askmethat-rating
使用 askmethat-rating 很简单，它只需要一个 div 容器即可。我们可以通过如下的代码来实现一个简单的星级评分：
<div id="rating"></div>
在 JS 中，我们需要先引入 askmethat-rating，并使用以下代码初始化：
-- -------------------- ---- ------- ------ - ------ - ---- ------------------- ----- ------ - --- -------- --------- ---------- ---- -- ----- ---------- ------------- ---------- ------ - ---
我们在初始化时提供了一个 options 对象，它包含了以下属性：
selector: 评分组件所在的 div 容器的 id 或 class，例如 '#rating' 或 '.rating'max: 评分的最大值，例如 5icon: 未选中状态下的图标，例如 'fa-star-o'selectedIcon: 选中状态下的图标，例如 'fa-star'value: 评分的初始值，例如 3
通过以上代码，我们就可以成功在页面上呈现出一个星级评分组件。
修改 askmethat-rating 样式
虽然 askmethat-rating 默认提供了一些样式，但我们还是可能需要对其样式进行一定的调整。下面我们通过修改 askmethat-rating 的默认样式，来让页面上的评分组件更加美观。
首先，在 HTML 中添加一个样式表：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1Tnf2rvpzLhBWLLbpVgJNcPT+6EdHXa" crossorigin="anonymous" />
以上代码是引入了字体图标库 Font Awesome，我们需要使用它的图标来实现评分组件。接下来，我们在 CSS 中修改评分组件的样式：
-- -------------------- ---- ------- ----------------- - -------- ----- ---------- ----- ------ ----- - ----------------- --- - ------- -------- - ----------------- ---------- ----------------- ------------- ----------------- ------------- ----------------- ------------- ----------------- ------------ - ------ -------- - ----------------- ----------- ----------------- -------------- ----------------- -------------- ----------------- -------------- ----------------- ------------- - ------ -------- -
以上样式代码中，我们将评分组件设置为 display: flex，使得星级图标之间能够有空隙，并且设置了比较大的字体大小。同时，我们通过修改字体图标的颜色、悬停时的颜色和选中时的颜色，来使评分组件具有较好的交互性和视觉效果。
示例代码
最后，让我们来看一下完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- ---------------------------- ----------------- --
----- --------------- ---------------------------- ------------------ --
-----
----------------
-------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-----------------------
--
-------
----------------- -
-------- -----
---------- -----
------ -----
-
----------------- --- -
------- --------
-
----------------- ----------
----------------- -------------
----------------- -------------
----------------- -------------
----------------- ------------ -
------ --------
-
----------------- -----------
----------------- --------------
----------------- --------------
----------------- --------------
----------------- ------------- -
------ --------
-
--------
----------------------- ----------
-------
------
---- ------------------
------- --------------
------ - ------ - ---- -------------------
----- ------ - --- --------
--------- ----------
---- --
----- ------------
------------- ----------
------ --
---
---------
-------
-------通过本文的介绍，相信大家已经掌握了如何使用 askmethat-rating 包来实现星级评分功能，并且也了解了如何修改评分样式。希望本文对你有所帮助，如果你有任何疑问或建议，欢迎留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664b81e8991b448e2698