在前端开发中，经常需要使用material design的设计风格。而 mdc-chips 组件是其中的一个经常使用的组件之一。@limetech/mdc-chips 是 mdc-chips 的一个 npm 包，可以让我们在项目中更加方便地使用 mdc-chips 组件。
环境准备
首先，需要安装基本的开发环境：Node.js 和 npm（已安装的可跳过）。
然后，在项目文件夹中运行以下命令，安装 @limetech/mdc-chips 包：
npm install @limetech/mdc-chips
基本使用方法
在你的项目中引入所需的组件和样式：
<link rel="stylesheet" href="@limetech/mdc-chips/dist/mdc.chips.min.css" />
import { MDCChipSet } from '@limetech/mdc-chips';然后，在需要使用的地方实例化组件：
-- -------------------- ---- -------
---- ---------------------
---- ------------ -------------
---- ----------------------- -------
------
---- ------------ -------------
---- ----------------------- -------
------
---- ------------ -------------
---- ----------------------- -------
------
------const chipSetEl = document.querySelector('.mdc-chip-set');
const chipSet = new MDCChipSet(chipSetEl);属性和方法
MDCChipSet 类中包含了许多属性和方法，可以让我们更加方便地操作组件：
属性
chips: 返回一个包含所有 Chip 元素的数组。selectedChipIds: 返回一个包含所有被选中 Chip 元素的 id 的数组。el: 返回当前 MDCChipSet 对应的 DOM 元素。
方法
addChip(chipEl: Element): void：添加 Chip 元素到 Chip Set 中。removeChip(chipEl: Element): void：从 Chip Set 中移除指定的 Chip 元素。removeChipById(chipId: string): void：从 Chip Set 中移除指定 id 的 Chip 元素。hasChip(chipEl: Element): boolean：判断指定的元素是否存在于 Chip Set 中。getChipById(chipId: string): Element | null：根据 id 返回指定的 Chip 元素。getChipIndex(chipEl: Element): number：返回指定 Chip 元素在 Chip Set 中的索引值。select(chipEl: Element): void：选中指定的 Chip 元素。deselect(chipEl: Element): void：取消选中指定的 Chip 元素。
示例代码
以下是一个使用 @limetech/mdc-chips 的完整示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
-------------------------- ------------
----- ---------------- ------------------------------------------------- --
-------
------
---- ---------------------
---- ------------ ------------ ------------
---- ----------------------- -------
------
---- ------------ ------------ ------------
---- ----------------------- -------
------
---- ------------ ------------ ------------
---- ----------------------- -------
------
------
------- --------------
------ - ---------- - ---- ----------------------
----- --------- - ----------------------------------------
----- ------- - --- ----------------------
----- ---- - ----------------------------------
---------------------
---------
-------
-------运行这个 HTML 文件，可以看到第一个 Chip 元素被选中。可以尝试使用其他方法，更新这个页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/201034