iview draws flow chart

Function: This function is purely front-end and can be dynamically rendered based on back-end data.​ 

Implementation method: vue2/vue3 can be used. I implemented it in vue2.

Implementation steps:

        1.Introduce the framework

        2. Package components

        3. Interface usage

Introducing the framework

1. Path /public/static/index.html

<script src="<%= BASE_URL %>static/meta/meta2d.js"></script>

2. Create meta2d.js path and then /public/static/meta/meta2d.js

The code inside is npm i meta2d.js Copy the code inside and put it into meta2d.js

Encapsulated components

Path /src/components/flow/draw.vue

code

<template>
  <div
    id="topology2"
    class="topology"
    :style="{ height: height, width: '100%' }"
  >
    <!-- 画布 @click="onTouchstart($event) height: 

Guess you like

Origin blog.csdn.net/weixin_42066070/article/details/130386327