caohuatao / vue-super-flow Goto Github PK

删掉 no dead 参数才不报错
否则 Module build failed: BrowserslistError: Unknown browser query dead

比如说，节点移动结束。全选移动结束，右键选中节点。选中连线等等

项目采用iview-admin的样式库
在已有项目中引入 ，每个节点内容无法展示，右键菜单已经配置，也不能正常展示：有选项，但是无内容，报错如下：Property or method "meta" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

已经尝试把组件原码copy进项目，也有该问题
尝试搭建了新项目，可以正常使用。所以求作者大大解惑
iview-admin demo地址：https://github.com/view-design/iview-admin

yarn add vue-spuer-flow

readme和文档里都写错了，试了好几次都安装失败才发现=_=#

如题

error in ./node_modules/vue-super-flow/lib/index.css

Module build failed: BrowserslistError: Unknown browser query dead
at D:\work\subway\node_modules\browserslist\index.js:164:11
at Array.reduce ()
at resolve (D:\work\subway\node_modules\browserslist\index.js:132:18)
at browserslist (D:\work\subway\node_modules\browserslist\index.js:224:16)
at Browsers.parse (D:\work\subway\node_modules\autoprefixer\lib\browsers.js:61:16)
at new Browsers (D:\work\subway\node_modules\autoprefixer\lib\browsers.js:52:30)
at loadPrefixes (D:\work\subway\node_modules\autoprefixer\lib\autoprefixer.js:70:24)
at plugin (D:\work\subway\node_modules\autoprefixer\lib\autoprefixer.js:81:24)
at LazyResult.run (D:\work\subway\node_modules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (D:\work\subway\node_modules\postcss\lib\lazy-result.js:192:32)
at LazyResult.asyncTick (D:\work\subway\node_modules\postcss\lib\lazy-result.js:204:22)
at D:\work\subway\node_modules\postcss\lib\lazy-result.js:197:27

@ ./node_modules/vue-super-flow/lib/index.css 4:14-118 13:3-17:5 14:22-126
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

这是报错内容

./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5-2!./node_modules/vue-super-flow/lib/index.css
Module build failed: BrowserslistError: Unknown browser query dead
at C:\webstorm\Fund\node_modules\autoprefixer\node_modules\browserslist\index.js:164:11
at Array.reduce ()

nodelist不是双向绑定的 想在父组件中获取修改更新后的nodelist的数据 以及 如何修改nodelist中的数据传给子组件

项目很不错正好能解决我的问题，如果有禁止编辑功能就更好了

看了您的作品，很感兴趣，但是我发现demo里面的编辑按钮单击之后无效，是有bug吗

可以曝露removeNode 方法嘛？

希望尽快处理一下 谢谢您

要么内容用全英，同lang；
要么lang用 zh，同内容。

如何获取被设计器设计完之后保存下来的数据？然后可以再渲染页面的时候，显示流程图。

dom会超出，
破坏原有布局

项目有这个需求 但是没有发现插槽跟接口

在大屏上显示会存在问题 线条不能完整的显示 或者显示部分

大佬，有没有可编辑输入的例子。小白太可怜了，刚进公司就被搞这种流程图

如题

vue flow components
->
vue-super-flow 是一款快速方便实现流程图的 vue 插件。Demo地址 ：https://caohuatao.github.io/demo/；
Vue-super-flow is a quick and convenient Vue plug-in to realize flow chart. Demo address: https://caohuatao.github.io/demo/ ;

就在这个nodeMouseup方法里面加个callback就行，我有个需求，要在手动连线之后调用一个回调函数来完成一些操作，如果没有回调函数的话实在是不方便...

双击线条的事件可以暴露出来嘛？

加你qq了，麻烦通过一下。。。。

可以设置 图片不能拖出边界嘛？

如题

尊敬的大佬，您好，
请问一下
`Failed to compile.

./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5-2!./node_modules/vue-super-flow/lib/index.css
Module build failed: BrowserslistError: Unknown browser query `dead``

请问这个是什么问题哈

会不会是什么js或者css与vue-super-flow冲突了，但是我没有找到

后台接口希望 id的内容是数字 请教一下id生成是在文件的哪个位置

有没有新建连接的钩子函数，如何获取id

我对vue的插槽不是很理解，我需要把节点插槽中原本v-slot:node="{meta}”，原来是node.meta对象，想改成是node对象。
我目前需要修改源码node.vue里面的代码

<div
    tabindex="-1"
    class="super-flow__node"
    :class="{'can-move': nodeDrop}"
    :style="style"
    @mousedown.left="nodeMousedown"
    @mouseenter="nodeMouseenter"
    @mouseleave="nodeMouseleave"
    @mouseup="nodeMouseup"
    @contextmenu.prevent.stop="nodeContextmenu">

    // **把这里改成<slot :meta="node"></slot>**
    <slot :meta="node.meta"></slot>

    <div
      v-for="(dir, key) in direction"
      v-show="output && lineDrop"
      :class="`node-side node-side-${key}`"
      @contextmenu.stop.prevent
      @mousedown.left.prevent.stop="evt => sideMousedown(evt, dir)">
    </div>
  </div>

能不能在不修改源代码的前提下，在使用template插槽的时候改成node对象？
如果不行，我是不是要自己修改源代码，然后打包插件自己使用呢？

想在vu3的项目里用这个组件，结果用不了，有点尴尬，，

能否通过类似如下的json生成可视化的流程图？
{
"id": "00000",
"meta": {
"prop": "start",
"name": "条件节点1"
}
children: [{
"id": "11111",
"meta": {
"prop": "start",
"name": "条件节点1"
}
},
{
"id": "22222",
"meta": {
"prop": "start",
"name": "条件节点2"
},
},

]

}

直接把json赋值给this.$refs.superFlow.graph并不能展示

"origin": [
0,
0
],
"nodeList": [
{
"id": "node43bEDxs4QYLxYqA8",
"width": 120,
"height": 40,
"coordinate": [
293.11109924316406,
115.24305725097656
],
"meta": {
"nodeSn": "20201117155528475709",
"nodeType": 12,
"name": "swooptask222",
"retryTimes": "2"
}
},
{
"id": "nodex3J2Ah7U3lf3ohnK",
"width": 120,
"height": 40,
"coordinate": [
214.11109924316406,
212.24305725097656
],
"meta": {
"nodeType": 1,
"processInfoSn": "20201118144643126323",
"name": "qwe",
"flag": 1,
"isSubProcess": 1,
"releaseState": 1,
"processLevel": 1,
"runStrategy": 2,
"projectSn": "20201111151301378332",
"hasEvent": 1
}
}
],
"linkList": [
{
"id": "linkqUDpYBsyXW857ojR",
"startId": "node43bEDxs4QYLxYqA8",
"endId": "nodex3J2Ah7U3lf3ohnK",
"startAt": [
60,
40
],
"endAt": [
120,
20
],
"meta": null
}
]
}

就是全选之后，能不能提供缩放的功能。感觉这个还是很实用的。

是否有节点展开收起功能？

      <template v-slot:node="{meta}">
        <div :class="`flow-node flow-node-${meta.prop}`" >
          <header class="ellipsis" @click.prevent="clickNode(meta.name)">{{meta.name}}</header>
          <section>{{meta.desc}}</section>
        </div>
      </template>

    const clickNode = (name: string) => {
      console.log(name);
    };

在示例上增加了一个node click事件，结果第一次点击node不触发，第二次点击才能出发clickNode事件，请问这个可以解决吗

我通过循环连线列表拿到顺序的节点列表，但移动任何一个具有连接线的节点后，连线顺序会发生变化