引言
在前端开发中，我们经常需要使用到 checkbox 这种多选按钮，而在 Polymer 中我们可以使用 npm 包 @npm-polymer/paper-checkbox 实现这个功能。本文将详细介绍这个 npm 包的使用方法。
安装
在使用 @npm-polymer/paper-checkbox 之前，我们需要确保已经安装了 npm，因为该包是基于 npm 的。安装 npm 的方法可以参考官网：https://www.npmjs.com/get-npm。
在安装了 npm 之后，我们可以使用以下命令来安装 @npm-polymer/paper-checkbox 包：
npm install @npm-polymer/paper-checkbox
配置
在使用该包之前，我们需要将其引入到我们的项目中。我们可以在 HTML 文件中使用以下代码来引入该包：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------- ------------
------- ------------------------------------------------------------
----- ------------ --------------------------------------------------------------------
-------
------
-----------------------------------------
-------
-------以上代码中，我们使用了 link 标签引入了 paper-checkbox.html 文件，并使用了 script 标签引入了 polymer.js 文件。这样我们就可以使用该 npm 包了。
使用
@npm-polymer/paper-checkbox 包提供了多种页面中使用 checkbox 的方式。接下来我们将介绍其中一种使用方式。
基础使用
最基本的使用方式是直接在 HTML 中使用 paper-checkbox 标签。以下代码演示了基础使用方式：
<paper-checkbox>Checkbox</paper-checkbox>
以上代码中，我们在 body 标签下添加了一个 paper-checkbox 标签。该标签具有一个默认属性 checked，表示默认选中该项。
事件监听
@npm-polymer/paper-checkbox 包可以监听 checkbox 的多种事件，比如 checked-changed、indeterminate-changed 等等。这些事件可以用来实现我们自定义的业务逻辑。
以下代码演示了如何监听 checked-changed 事件：
<paper-checkbox on-checked-changed="_handleChecked">Checkbox</paper-checkbox>
以上代码中，我们在 paper-checkbox 标签中添加了一个 on-checked-changed 属性，指定了事件的名称和监听函数。在监听函数 _handleChecked 中，我们可以拿到 checkbox 的选中状态。
以下是 _handleChecked 监听函数的代码示例：
_handleChecked(event) {
console.log(event.detail.value);
}通过以上示例，我们可以了解到如何监听 checkbox 的 checked-changed 事件，并得到 checkbox 的选中状态。
总结
在本文中，我们详细介绍了 @npm-polymer/paper-checkbox 包的使用方法，包括安装、配置和使用等内容。希望读者可以通过这篇文章深入了解该 npm 包，从而在实际项目中更好地应用它。对于初学者，希望本文能够提供一些指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff281e8991b448ddb65