在Vue中使用Qunee组件

qunee组件支持es6引入方式，可以在vue项目中使用，可以按下面的方式使用Graph组件

Graph.vue 选项式API

Graph.vue

<template>
    <div ref="canvas"></div>
</template>
<script>
import Q from 'https://demo.qunee.com/lib/qunee-es.js'
export default {
    mounted(){
        this.graph = new Q.Graph(this.$refs.canvas);
    }
}
</script>

App.vue中使用Graph.vue

App.vue

<template>
    <Graph ref="graph_comp"/>
</template>

<script setup>
import Graph from "./Graph.vue";
import {onMounted, ref} from "vue";

const graph_comp = ref();

onMounted((e) => {
    let graph = graph_comp.value.graph;
    graph.createNode('Qunee by Vue');
});
</script>

<style>
body {
    margin: 0px;
    position: absolute;
    inset: 0px;
    display: flex;
}
</style>

<style scoped>
div {
    flex-grow: 1;
}
</style>

main.js

import {createApp} from '../qunee_demo_3/doc/vue.md'
import App from './App.vue'

let app = createApp(App);
app.mount('body');

index.html

<script type="module" src="./src/main.js"></script>

运行效果，项目代码下载 - qunee_by_vue.zip

Vue中注意事项

data不能返回node，graph等对象，data对象会自动包装getter，setter函数，应该为普通javascript对象，不能是自定义类型的数据，参考：https://cn.vuejs.org/api/options-state.html#data

Graph.vue 组合式API

如果使用组合式API，可以按下面的写法

<template>
    <div ref="canvas"/>
</template>

<script setup>
import Q from 'https://demo.qunee.com/lib/qunee-es.js'
import {onMounted, useTemplateRef} from "vue";

// V2.8.2.2以下版本需要增加以下函数，方便切换画布容器
if(!Q.Graph.prototype.mount){
    Q.Graph.prototype.mount = function(p){
        let canvasPanel = this.canvasPanel;
        canvasPanel.parentElement && canvasPanel.remove();
        if(p){
            p.appendChild(canvasPanel);
            p.classList.add('Q-Graph');
        }
    }
}
const el = useTemplateRef("canvas");
let graph = new Q.Graph();
onMounted(() => {
    graph.mount(el.value);
});
defineExpose({
    graph
})
</script>