实现 UUID 生成器 工具

分类：developer ｜ 标签：UUID、NanoID、生成、ID 生成 UUID v4 / NanoID，支持批量与格式选项

2.1 功能说明

生成 UUID v4 / NanoID，支持批量与格式选项

核心能力

• 类型
• uuid
• nanoid
• 数量
• 格式

2.1.1 使用指南

UUID 生成器使用指南

UUID v4

基于随机数（crypto.randomUUID）的 128 位唯一标识符，形如 f47ac10b-58cc-4372-a567-0e02b2c3d479，适合做主键、追踪 ID。

NanoID

更短、URL 友好的随机 ID，使用 _-~ 等安全字符集，碰撞概率极低，适合做短链接或 token。

选项

• 大写：将字母转为大写。
• 包含连字符：UUID 默认带连字符，关闭后输出紧凑 32 位。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• genUuid()
• genNanoid()
• generate()
• copyAll()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import ToolPageShell from '@/components/ToolPageShell.vue'

const kind = ref('uuid')
const count = ref(5)
const upper = ref(false)
const dash = ref(true)
const results = ref([])

const NANOID_ALPHABET = 'useandom-26T198340PX75pxqRHM-W7JKVBH' // 安全 URL 字符集

function genUuid() {
  let id = crypto.randomUUID()
  if (!dash.value) id = id.replace(/-/g, '')
  return upper.value ? id.toUpperCase() : id
}
function genNanoid(len = 21) {
  const buf = new Uint8Array(len)
  crypto.getRandomValues(buf)
  let id = ''
  for (let i = 0; i < len; i++) id += NANOID_ALPHABET[buf[i] % NANOID_ALPHABET.length]
  return upper.value ? id.toUpperCase() : id
}

function generate() {
  const arr = []
  for (let i = 0; i < count.value; i++) {
    arr.push(kind.value === 'uuid' ? genUuid() : genNanoid())
  }
  results.value = arr
}

const resultsText = computed(() => results.value.join('\n'))

async function copyAll() {
  if (!resultsText.value) return
  try {
    await navigator.clipboard.writeText(resultsText.value)
    ElMessage.success('已复制全部')
  } catch {
    ElMessage.warning('复制失败，请手动复制')
  }
}

generate()

2.3 效果截图

暂未生成该工具的效果截图。

工具访问地址：https://www.i91tools.com/tools/uuid-generator