d71de0a92d
* chore(docs): update basic example styles * chore(docs): update confirm delete example styles * chore(docs): update dnd example styles * chore(docs): update hidden example * chore(docs): update update node example * chore(docs): update node toolbar example styles * chore(docs): update transition example styles * chore(docs): cleanup basic example els * chore(docs): cleanup examples
43 lines
1.1 KiB
Vue
43 lines
1.1 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
|
|
|
|
const { updateNode } = useVueFlow()
|
|
|
|
const bgColor = ref('#eeeeee')
|
|
|
|
const label = ref('Node 1')
|
|
|
|
const nodes = ref([
|
|
{
|
|
id: '1',
|
|
data: { label: label.value },
|
|
style: { backgroundColor: bgColor.value },
|
|
position: { x: 100, y: 100 },
|
|
},
|
|
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
|
|
])
|
|
|
|
const edges = ref([{ id: 'e1-2', source: '1', target: '2' }])
|
|
|
|
function handleUpdate() {
|
|
updateNode('1', { data: { label: label.value }, style: { backgroundColor: bgColor.value } })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<VueFlow :nodes="nodes" :edges="edges" fit-view-on-init>
|
|
<Panel position="top-right">
|
|
<div class="field">
|
|
<label for="label">Label:</label>
|
|
<input id="label" v-model="label" @input="handleUpdate" />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="bgColor">Background color:</label>
|
|
<input id="bgColor" v-model="bgColor" type="color" @input="handleUpdate" />
|
|
</div>
|
|
</Panel>
|
|
</VueFlow>
|
|
</template>
|