vue中使用唯一标识uuid——uuid.v1()-时间戳、uuid.v4()-随机数；拖拽draggable

花儿开富贵花

已于 2023-03-24 16:14:11 修改

阅读量784

点赞数

文章标签：前端

于 2023-01-11 15:47:22 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43843679/article/details/128646047

版权

唯一标识

“uuid”: “^3.3.3”,

npm install uuid


import { v4 as uuidv4 } from 'uuid';


var newId = uuidv4()

拖拽draggable

<div v-for="(v, i) in item.data" :key="i" class="node-list" draggable="true" @dragstart="e => dragstart(e, v)">
	<span class="ball"></span>
	{{ v.name }}
</div>

  /**
   * 开始拖动
   */
  dragstart(e: any, data: Node) {
    let dragParams: DragStart = {...data, x: e.offsetX, y: e.offsetY}
    e.dataTransfer.setData('node', JSON.stringify(dragParams));
  }

流程图像gojs啊，flowcanvas啊什么的，感觉X6好用且简单。全称是antv/x6、相比gojs可能涉及到版权收费之类的问题，X6是开源的可以放心使用，其他很多类似画布工具般使用X6可以直接以代码方式实现流程制作与展示。
[X6官网地址](https://x6.antv.vision/zh/docs/tutorial/getting-started)