Open lishouyan opened 3 years ago
base-node.vue
<template> <div class="base-node"> <div>测试.vue 的node节点{{itemData.id}}</div> <div class="center"> <el-button @click="click" type="success">button</el-button> </div> </div> </template> <script> export default { name: "base-node", props: { itemData: { type: Object, }, canvasNode: { type: Object } }, methods: { click(e) { console.log('click'); e.stopPropagation(); } }, created() { // console.log(this.itemData); // console.log(this.canvasNode); } }; </script> <style scoped> .base-node { width: 190px; border-radius: 5px; border: 2px solid #aaa; padding: 10px; } .base-node .center { text-align: center; } </style>
<template> <div id="Dag"> <butterfly-vue style="border: 1px solid #cccccc;height: 800px; width: 100% " :canvasConf="conf" :canvasData="mockData" key="Dag" /> </div> </template> <script> import ButterflyVue from 'butterfly-vue'; import 'butterfly-dag/dist/index.css'; //import dragNode from './node/drag-node.vue'; import baseNode from './node/base-node.vue'; const input = [ { id: 'input', orientation: [-1, 0], type: 'target', pos: [0, 0.5] } ]; const output = [ { id: 'output', type: 'source', orientation: [1, 0], pos: [0, 0.5] } ]; export default { name: 'Dag', components: { ButterflyVue, baseNode }, methods: { }, data(){ return{ user1: { ref: 'user1', userData: { title: '申请人', input: '', modify: 1, reader: 5, } }, conf: { height: 900, disLinkable: true, // 可删除连线 linkable: true, // 可连线 draggable: true, // 可拖动 zoomable: true, // 可放大 moveable: true, // 可平移 theme: { edge: { arrowPosition:1, arrow: true, type: 'AdvancedBezier', } } }, mockData:{ groups: [ { id: 'table_1', left: 10, top: 20, render: '<div style="border-radius: 3px; background: #00000011;width: 100px; height:20px; font-weight: 700">group</div>', draggable: true }, { id: 'table_2', left: 200, top: 20, render: '<div style="border-radius: 3px; background: #00000011;width: 100px; height:20px; font-weight: 700">group2</div>', draggable: false }, ], nodes: [ { id: 'node1', group: 'table_1', top: 40, left: 20, endpoints: output, render: '<div style="border-radius: 3px; background:#ccc;width: 100px; height:20px; font-weight: 700">node2</div>' }, { id: 'node2', group: 'table_1', top: 60, left: 20, endpoints: output, render: '<div style="border-radius: 3px; background:#ccc;width: 100px; height:20px; font-weight: 700">node2</div>' }, { id: 'node3', group: 'table_2', top: 40, left: 20, render: baseNode, endpoints: input }, ], edges: [{ id: '1-2', sourceNode: 'node1', targetNode: 'node3', source: 'output', target: 'input', }], } } }, } </script>
@Zt448143356
少了d对大括号
base-node.vue