Vue 流量 QQ
Vue Flow:可高度定制的Vue 3 Flowchart组件.
通过Vue Flow,你可以构建自己的,定制的以节点为基础的应用程序,如静态图,甚至更复杂 互动编辑!
你可以找到一个详细的解释 如何开始在 文档 或检查 页:1 实例。 。 。 .
目录
* 特性
-
👶 方便的设置: 开始无麻烦 - 内建缩放( P) 特性, 元素拖放、 选择和更多
-
🎨 可自定义: 使用自定义节点、边缘和连接线并扩展Vue Flows的功能
-
🚀 快点: 跟踪被动变化,只重新提交适当的元素
-
🧲 Utils 组成( C): 带有图形辅助器的来来来来来来来来来来来来来来来来来来来来来来来 来来来来 来来来来 来来来来 来来来来 来来来来 来来来来 来来来来 来来来来来 来来来 来来来 来来来来 来来来来 来来 来来 来来来来 来来 来来 来来 来 来来来 来 来来 来来 来 来 来 来来 来来 来 来来 来 来 来 来来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来
-
📦 其他组件数字 :
-
QQ背景:有两个内置模式和一些配置选项,如高度,宽度或颜色.
-
QQ 最小映射: 在右下角的小地图形状显示当前节点
-
QQ 控制: 控制从左下方的面板放大行为
-
还有很多...
-
-
🦾 可靠性: 完全写入类型脚本
QQ 设置
$ npm i @braks/vue-flow
# or
$ yarn add @braks/vue-flow
QQ 快速启动
流动包含 节点 财务报告和审定财务报表 边缘 (或者只是节点). 他们一起叫 要素。 。 。 .
每个元素都需要独特的标识.
节点还需要XY位置. 一个边缘需要一个源(node id)和一个目标(node id).
基本布局是这样的:
<!-- Flowchart.vue -->
<script setup>
import { VueFlow } from '@braks/vue-flow'
const elements = ref([
{
id: '1',
label: 'node 1',
position: { x: 100, y: 100 },
},
{
id: '2',
label: 'node 2',
position: { x: 100, y: 200 },
},
{
id: 'e1-2',
target: '2',
source: '1',
},
])
</script>
<template>
<VueFlow v-model="elements"></VueFlow>
</template>
⚠️ 确保导入必要的样式 :
/* import the required styles */
@import "@braks/vue-flow/dist/style.css";
/* import the default theme (optional) */
@import "@braks/vue-flow/dist/theme-default.css";
*
这个图书馆与Vue 2不相通.
Vue Flow使用独有于Vue 3的特性,因此 没有支持Vue 2,未来也不会有任何支持,抱歉.
发展
先决条件
# skip if you already have pnpm installed
$ npm i -g pnpm
# start examples
$ pnpm dev
# build all packages
$ pnpm build
减量容器
为了开始使用开发容器,安装 Docker 扩展
为VSCode.
在安装扩展后, 打开连接菜单
或通过命令标签打开.
选择 Open Folder in Container 选项.
开发容器将旋转所有软件包实例应用并转发 端口到您的机器.
解析器
在这里,你可以向社区提问, 提出新的想法 或者分享你和Vue Flow共同创造的作品.
特别谢谢
这个项目是用
-
- D3使得Vue Flow中的所有缩放和泛动作都成为可能.
-
- VueUse是一套基本的 Vue 组成公用事业
星际迷航
多亏了离开明星的善良个人. 非常感谢你的支持!