简介
在前端开发中，经常需要给元素分配唯一的 id，这时候就可以使用 npm 包 auto-id。auto-id 是一个能够生成唯一 id 的库，而且使用非常简单，只需要调用一下它的 API 就好了。
安装
使用 npm 安装 auto-id:
npm install auto-id --save
使用方法
在需要使用 auto-id 生成 id 的位置引入 auto-id，然后使用它的 API 来获得唯一的 id。
基本用法
import { generate } from 'auto-id'
const id = generate()传入前缀
有时候我们需要指定 id 的前缀，这时候可以传入一个前缀字符串到 generate 方法中。
import { generate } from 'auto-id'
const id = generate('prefix')设置 id 的长度
使用 auto-id 的默认设置，生成的 id 是 8 位的随机字符串，如果需要其他长度的 id，可以调用 setLength 方法设置。
import { generate, setLength } from 'auto-id'
setLength(10) // 设置 id 的长度为 10
const id = generate()判断 id 是否已经被使用
auto-id 不仅可以生成 id，还可以判断一个 id 是否已经在当前文档中被使用了。
import { generate, isUsed } from 'auto-id'
const id = generate()
if (isUsed(id)) {
console.log('id 已经被使用了')
}示例代码
-- -------------------- ---- -------
----------
-----
---- ------------------------------ -- --- -----------
---- -------------------------------- -- --- -------------
------
-----------
--------
------ - --------- ---------- ------ - ---- ---------
------------
------ ------- -
-------- -
------------------ -
--- -- - ----------------
----------------- - -- -- -- -----
-- - ---------------- -- -------- --
-
------ --
-
-
-
---------上面的示例代码中，我们在 Vue 组件中使用了 auto-id。使用 setLength 方法设置 id 的长度为 7，然后在 generateId 方法中调用 generate 方法生成 id，并且通过 while 循环判断该 id 是否已经被使用。如果已经被使用就重新生成一个新的 id，直到生成一个未被使用的唯一 id。最后将这个唯一的 id 作为元素的 id 属性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8481e8991b448d917a