m-vue-flow v0.0.10

Vue3 流程设计

使用

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

<m-vue-flow ref="flowRef">
    <!--自定义属性面板-->
    <template v-slot="{ name, username, updateValue }">
        <n-input :value="name" size="small" round placeholder="小" @update:value="(value: any) => updateValue({ name: value })" />
        <n-input :value="username" size="small" round placeholder="小" @update:value="(value: any) => updateValue({ username: value })" />
    </template>
</m-vue-flow>
<n-button tertiary @click="getValue">获取值</n-button>

import { ref } from 'vue';
import { NInput, NButton } from 'naive-ui';
import MVueFlow from 'm-vue-flow';

const flowRef = ref();

const getValue = () => {
    flowRef.value.getValue().then(({ xml }: any) => {
        console.log(xml);
    });
};

属性

defaultValue: { type: String, default: '' }, //默认值
name: { type: String, default: '' }, //流程名称
language: { type: Object, default: () => ({}) } //语言

方法

updateValue(value: { [key: string]: any }) //修改属性值
getValue() //获取值
importXML(xml: string) //导入XML