vue-wiring-diagram-suncloud

vue3-wiring-diagram

安装

npm install vue3-wiring-diagram

按需引入

import {Editor} from 'vue3-wiring-diagram'
import 'vue3-wiring-diagram/dist/style.css'

全局引入

import vue3WiringDiagram from 'vue3-wiring-diagram'
import 'vue3-wiring-diagram/dist/style.css'

createApp(App).use(vue3WiringDiagram)

Demo

<template>
  <div>
    <Editor @getJson="getdata"/>
  </div>
</template>

<script setup>
  import {Editor, setBaseURL, setToken} from 'vue3-wiring-diagram'
  import 'vue3-wiring-diagram/dist/style.css'

  // 设置后端地址（建议使用代理）
  setBaseURL('http://localhost:8001')
  // 设置后端token
  setToken('token')

  /**
   * 获取点击保存后的数据
   * @param data
   */
  const getdata = (data) => {
    console.log(data)
  }
</script>

<script setup>
  import "../dist/style.css";
  import {WiringDiagramEditor, WiringDiagramPreview, setBaseURL, setToken} from '/packages/index.js'
  import {ref} from "vue";
  import {updateData} from "../packages/components/common.js";

  setBaseURL('/api')
  setToken('token')

  const id = ref(36)

  /**
   * 保存数据
   * @param data
   */
  const saveData = (data) => {
    updateData(id.value, data)
  };

</script>

<template>
  <div class="page-container">
    <wiring-diagram-editor :id="id" @getJson="saveData"/>
    <!--        <wiring-diagram-preview :id="id"/>-->
  </div>
</template>

<style scoped>
  .page-container {
    height: 100vh;
  }
</style>