63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
|
import type { Node, Edge } from '@vue-flow/core'
|
|
import { VueFlow } from '@vue-flow/core'
|
|
import SpecialEdge from './speciaiEdge.vue'
|
|
import SpecialNode from './speciaiNode.vue'
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
})
|
|
//const emit = defineEmits([
|
|
//])
|
|
let data = reactive({
|
|
})
|
|
|
|
const nodes = ref<Node[]>([
|
|
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 0 } },
|
|
{ id: '2', type: 'output', label: 'Node 2', position: { x: 100, y: 100 } },
|
|
{ id: '3', type: 'custom', label: 'Node 3', position: { x: 400, y: 100 } },
|
|
{ id: '4', type: 'custom', label: 'Node 3', position: { x: 400, y: 200 } },
|
|
])
|
|
|
|
const edges = ref<Edge[]>([
|
|
{ id: 'e1-2', source: '1', target: '2', type: 'custom' },
|
|
{ id: 'e1-3', source: '1', target: '3', animated: true },
|
|
{ id: 'e1-4', source: '1', target: '4', },
|
|
])
|
|
|
|
|
|
onMounted(()=>{
|
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
defineExpose({})
|
|
const {} = toRefs(data);
|
|
</script>
|
|
<template>
|
|
<div class="view2">
|
|
<VueFlow :nodes="nodes" :edges="edges">
|
|
<!-- bind your custom node type to a c omponent by using slots, slot names are always `node-<type>` -->
|
|
<template #node-custom="nodeProps">
|
|
<SpecialNode v-bind="nodeProps" />
|
|
</template>
|
|
|
|
<!-- <template #edge-custom="edgeProps">
|
|
<SpecialEdge v-bind="edgeProps" />
|
|
</template> -->
|
|
</VueFlow>
|
|
</div>
|
|
</template>
|
|
<style lang="less">
|
|
@import "@vue-flow/core/dist/style.css";
|
|
@import "@vue-flow/core/dist/theme-default.css";
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.view2{
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
</style> |