Vue3 前端生成随机id( 生成 UUID )

效果展示

封装工具(代码展示)

重新创建一个文件**/utils/someTools.js**,并在里面写入如下代码。

js 复制代码
function Tools() {

}

Tools.prototype.guid = function () {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = Math.random() * 16 | 0,
        v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

const tools = new Tools();
export default tools;

实际运用-----SomeTools.guid()

随机打开一个你想要生成id的文件,先引入文件,然后调用**guid()**方法。

js 复制代码
import { ref } from 'vue'
import SomeTools from '@/utils/someTools.js' 
 
//直接这样就可以使用啦
//SomeTools.guid()

//可以直接赋值使用,例如:
const id = ref(null)
id.value = SomeTools.guid()
相关推荐
yuzhiboyouye17 小时前
web前端英语面试
前端·面试·状态模式
canonical_entropy19 小时前
下一代低代码渲染框架 nop-chaos-flux 的设计原则
前端·低代码·前端框架
东方小月19 小时前
5分钟搞懂Harness Engineering(驾驭工程):从提示词到AI Agent的进化之路
前端·后端·架构
我叫黑大帅19 小时前
为什么需要 @types/react?解决“无法找到模块 react 的声明文件”报错
前端·javascript·面试
之歆19 小时前
DAY_21JavaScript 深度解析:数组(Array)与函数(Function)(一)
前端·javascript
XinZong20 小时前
【AI社交】基于OpenClaw自研轻量化AI社交平台实战
前端
Le_ee20 小时前
ctfweb:php/php短标签/.haccess+图片马/XXE
开发语言·前端·php
爱上好庆祝20 小时前
学习js的第七天(wed APIs的开始)
前端·javascript·css·学习·html·css3
KaMeidebaby21 小时前
卡梅德生物技术快报|冻干工艺开发:注射用心肌肽全流程参数优化与工程化方案
前端·其他·百度·新浪微博
ooseabiscuit21 小时前
Laravel6.x核心优化与特性全解析
android·开发语言·javascript