我创建一个自定义的Node.vue,为啥渲染不出来呢

[lishouyan]

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>

[noonnightstorm]

@Zt448143356

[Zt448143356]

少了d对大括号