网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
一个Vue.js流程图组件,可帮助您生成带有方向箭头的可拖动,可编辑的流程图,以简便的方式可视化您的工作流程。
1.将Vue和Vue流程图组件都导入到项目中。
import Vue from 'vue';
import FlowChart from 'flowchart-vue';
2. 注册组件。
Vue.use(FlowChart);
3. 将组件添加到模板。
<flowchart
:nodes="nodes"
:connections="connections"
ref="chart">
</flowchart>
4.指定流程图的节点和连接。
export default {
name: 'App',
data: function() {
return {
nodes: [
{
id: 1,
x: 140,
y: 270,
name: 'Start',
type: 'start' // or 'operation'
withd: 120,
height: 60
},
],
connections: [
{
source: {id: 1, position: 'right'},
destination: {id: 2, position: 'left'},
id: 1,
type: 'pass',
},
],
};
},
methods: {
// ...
}
};
5. 默认配置项。
nodes: {
type: Array,
default: () => [
{ id: 1, x: 140, y: 270, name: "Start", type: "start" },
{ id: 2, x: 540, y: 270, name: "End", type: "end" },
],
},
connections: {
type: Array,
default: () => [
{
source: { id: 1, position: "right" },
destination: { id: 2, position: "left" },
id: 1,
type: "pass",
},
],
},
width: {
type: [String, Number],
default: 800,
},
height: {
type: [String, Number],
default: 600,
},
readonly: {
type: Boolean,
default: false,
},
render: {
type: Function,
default: render,
},
转载请注明来源:可拖动、编辑的Vue工作流程图组件(flowchart-vue)
本文永久链接地址:https://www.moyouyouw.cn/code/1227.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论