在前端开发中，评分组件是不可或缺的一部分。它们可以用于显示评分，收集用户评价等等。其中，elovate-rating 是一个十分实用的评分组件，它提供了多种配置选项和可自定义的指示标签。本文将为大家详细介绍如何使用 npm 包 elovate-rating，帮助大家更好地掌握评分组件的使用方法，并且本文附带详细示例代码。
安装和引入 elovate-rating
首先，我们需要安装 elovate-rating 这个 npm 包，使用以下命令：
npm install elovate-rating --save
接着，我们需要在代码中引入 elovate-rating，使用以下代码：
import ElovateRating from 'elovate-rating'; import 'elovate-rating/dist/index.css';
在引入组件之前，还需要安装并引入 Vue.js，使用以下命令：
npm install vue --save
import Vue from 'vue';
使用 elovate-rating
现在，我们已经成功地安装并引入了 elovate-rating，下面让我们来看一下如何使用它。
我们创建一个新的 Vue 组件，并在组件中渲染 elovate-rating：
<template>
<div>
<elovate-rating />
</div>
</template>如果我们现在运行这个组件，会看到一个默认配置的评分组件，如下图所示：
很明显，这个评分组件并不是我们所需要的，我们需要进行自定义配置。
配置 elovate-rating
在 Vue 组件中，配置 elovate-rating 的最简单方法是在组件的 data 属性中声明一个名为 options 的对象。这个对象可以设置多个选项，包括评分等级数、评分颜色、评分大小等等。
下面是一个 options 配置对象的例子：
-- -------------------- ---- -------
------ -
------ -
-------- -
------- -- -- -----
------ ---------- -- ----
----- --- -- ----
---- --- -- ----
---------- ------- ------ ------ ------ ------ -- ------
-
-
-上述代码中，我们设置了五个评分等级，评分颜色为橙黄色，评分大小为 35px，评分间距为 10px。我们还设置了每个等级的文本。
现在，我们把 options 对象作为组件的 props 传递给 elovate-rating，如下所示：
<template>
<div>
<elovate-rating :options="options" ref="rating" />
</div>
</template>对于上述代码，需要特别注意的是我们使用了 ref 属性来引用 elovate-rating。这是为了在组件中访问 elovate-rating 的实例对象，方便我们进行一些其他的操作和调用。
获取和设置 elovate-rating 的值
当用户对 elovate-rating 进行评分时，我们需要能够获取到用户所选择的等级。我们可以通过监听 elovate-rating 的 input 事件来实现这个目的。
我们可以在 Vue 组件的 methods 属性中实现一个 onInput 方法，并在其中调用 elovate-rating 的 getValue() 方法来获取当前评分等级的值。
methods: {
onInput() {
const value = this.$refs.rating.getValue();
console.log(value);
},
},然后，我们可以在 elovate-rating 组件中添加 v-model 指令来自动更新评分等级。我们可以把这个指令绑定到 Vue 组件的 value 属性上，如下所示：
-- -------------------- ---- -------
----------
-----
--------------- ------------------ ------------ --------------- ---------------- --
------
-----------
--------
------ ------- -
------ -
------ -
-------- -
------- --
------ ----------
----- ---
---- ---
---------- ------- ------ ------ ------ ------
--
------ -
-
--
-------- -
--------- -
----- ----- - -----------------------------
-------------------
--
--
-
---------现在，如果用户点击评分组件上的某一个等级，我们就可以正常地捕获到这个事件，并获取到用户选择的评分等级。同时，也会自动更新值并显示在页面上。
总结
本文介绍了如何使用 npm 包 elovate-rating 来创建一个自定义评分组件。我们可以通过配置选项来自定义组件的各种属性，包括大小、颜色、等级数及其对应的文本。此外，我们还介绍了如何获取和设置 elovate-rating 的值，帮助你在使用这个组件时更加得心应手。希望这篇文章能够对你有所帮助，让你更好地掌握评分组件的使用方法。下面是完整的示例代码：
-- -------------------- ---- -------
----------
-----
--------------- ------------------ ------------ --------------- ---------------- --
------
-----------
--------
------ --- ---- ------
------ ------------- ---- -----------------
------ --------------------------------
------ ------- -
------ -
------ -
-------- -
------- --
------ ----------
----- ---
---- ---
---------- ------- ------ ------ ------ ------
--
------ -
-
--
-------- -
--------- -
----- ----- - -----------------------------
-------------------
--
--
----------- -
-------------
-
-
---------
------ -------
--------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558a881e8991b448d5f90