Vue3 组合式 API
Siona
Vue3 组合式 API
1. <script setup> 中常见用法
在 Vue 3 的 <script setup> 语法中，你可以将模板、脚本和样式全部组合在一个文件中。 以下是你的示例代码使用 <script setup> 的版本：
<template>
<div class="container" ref="container"></div>
</template>
<script setup lang="ts">
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";
import "@logicflow/extension/lib/style/index.css";
import {onMounted, ref} from "vue";
const container = ref(null);
const data = {
// 节点
nodes: [
{
id: "1",
type: "rect",
x: 100,
y: 100,
},
{
id: "2",
type: "circle",
x: 300,
y: 200,
},
],
// 边
edges: [
{
sourceNodeId: "1",
targetNodeId: "2",
type: "polyline",
},
]
}
// 渲染画布
let lf;
onMounted(() => {
lf = new LogicFlow({
// container: document.querySelector('.logic-container'),
container: container.value,
autoExpand: false,
hoverOutline: false,
edgeSelectedOutline: false,
width: 1500,
height: 1000,
grid: true
});
lf.render(data);
})
</script>
<style scoped>
.container {
width: 100%;
height: 100%;
}
</style>
在这个例子中，<script setup> 自动地将 ref 和 onMounted 与组件的实例进行绑定。 请注意，在这种语法下，你无需再显式地返回 container，因为在 <script setup> 中声明的所有变量和函数都会自动被注入到模板中。