npm 包 starability 使用教程

在现代 Web 开发中，用户界面的交互体验至关重要。星级评分是常用的一种交互元素，而使用第三方库来实现这个功能可以大大提高开发效率和可维护性。npm 包 starability 就是一个快速实现星级评分的优秀选择。

安装

使用 npm 包管理工具来安装 starability：

npm install starability --save

引入

在您的项目中引入 starability:

import 'starability/basic.css';
import 'starability/starability-all.css';
import 'starability/starability-grow.css';
import Starability from 'starability';

这里我们引入了三个样式文件，其中 basic.css 和 starability-all.css 是必需的。如果需要使用动画特效，则还要引入 starability-grow.css 文件。最后，通过 Starability 类来初始化星级评分组件。

用法

假设我们有一个表示电影评分的 div 元素，它的 id 是 movieRating。我们可以这样初始化 starability：

const movieRating = document.querySelector('#movieRating');
new Starability(movieRating);

此时，div 元素里面就会生成五颗空的星，用鼠标单击或者拖拽即可进行评分。

如果想设置默认值，可以在初始化时传入 initialRating 参数：

new Starability(movieRating, { initialRating: 3 });

如果想禁止用户对评分进行修改，则可以传入 readOnly 参数：

new Starability(movieRating, { readOnly: true });

高级用法

starability 还支持更多高级的用法。例如，我们可以自定义星星的数量和大小：

<div id="myRating" class="starability-grow">
  <input type="radio" name="rating" value="1" checked class="starability-hidden">
  <input type="radio" name="rating" value="2" class="starability-hidden">
  <input type="radio" name="rating" value="3" class="starability-hidden">
  <input type="radio" name="rating" value="4" class="starability-hidden">
  <input type="radio" name="rating" value="5" class="starability-hidden">
</div>

这里我们使用了 starability-grow 样式，并且手动添加了五个 radio 元素。然后在初始化时指定选项：

const myRating = document.querySelector('#myRating');
new Starability(myRating, {
  starWidth: 30,
  stars: 7,
  defaultText: '请评分'
});

此时，我们就得到了七颗宽度为 30 像素的星星，并且默认文本是“请评分”。

总结

通过本文，我们学习了如何使用 npm 包 starability 来快速实现星级评分功能。我们首先讲解了安装和引入的步骤，然后介绍了基本用法和高级用法。希望这篇文章对你有帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35562