在vue3使用logicflow在rect框中添加一个button按钮，怎么写

在 Vue3 中结合 LogicFlow（LF），你可以通过创建一个自定义组件来实现在 Flowchart 的矩形（Rect）框内添加一个 Button 按钮。首先，你需要安装 LogicFlow 和相关的依赖，然后编写组件逻辑以及数据绑定。

1. 安装依赖：

   npm install logicflow vue@next @vue/composition-api

2. 创建一个名为 `ButtonNode` 的组件，这个组件将作为 Button 节点：

   <template>
     <div class="lf-button-node" @click="onClick">
       <button :class="{ active: isActive }">{{ buttonText }}</button>
     </div>
   </template>

   <script setup>
   import { ref } from 'vue';
   const buttonText = ref('点击我');
   const isActive = ref(false);
   
   function onClick() {
     isActive.value = !isActive.value;
   }
   </script>
   <style scoped>
   .lf-button-node button {
     background-color: lightblue;
     padding: 5px 10px;
   }
   .lf-button-node button.active {
     background-color: dodgerblue;
   }
   </style>

3. 在 LogicFlow 组件中，使用 `graph.addNode` 添加 ButtonNode 到 Flowchart 中：

   <template>
     <logic-flow :nodes="nodes" :edges="edges"></logic-flow>
   </template>

   <script>
   import { onMounted } from 'vue';
   import { Graph } from '@logicflow/core';
   import ButtonNode from './ButtonNode.vue';

   export default {
     setup() {
       const graph = ref(new Graph());
       const nodes = ref([]);

       onMounted(() => {
         // 创建一个矩形节点并添加按钮节点
         const rectNode = graph.value.addNode({ type: 'rect', position: [100, 100] });
         rectNode.content.appendChild(document.createElement(ButtonNode)); // 在矩形内部添加 ButtonNode

         // 初始化节点数组
         nodes.value.push(rectNode);
       });

       return {
         graph,
         nodes
       };
     },
   };
   </script>

4. 在样式上，确保 ButtonNode 的样式能正确显示在 Flowchart 中，并调整它们的布局和交互。