初识vue+jsplumb(第一个Demo)_jsplumb vue 安装

第一步先安装jsplumb

npm install jsplumb --save

然后再组件中引用

import {jsPlumb} from 'jsplumb'

demo成品如下

 

<template>

  <div id="wrapper">

    <div class="line-wrap" style="margin-left: 70px;">

      <div id="A" class="state-item">A</div>

      <div id="B" class="state-item">B</div>

      <div id="C" class="state-item">C</div>

    </div>

    <div class="line-wrap">

      <div id="D" class="state-item">D</div>

    </div>

  </div>

  <!-- 在这里我们定义了基本的盒子，我们可以通过盒子的className定义盒子的样式，记得每个盒子一定要定义唯一的Id -->

</template>

<script>

  import {jsPlumb} from 'jsplumb'

  export default {

    name: 'landing-page',

    data() {

      return {

        releationList: [

          {name: 'A', kindredList: ['B'], friendsList: ['D']},

          {name: 'B', kindredList: ['C', 'D'], friendsList: []}

        ],

      //  在这里我们定义了关系列表：A与B存在亲属关系，B与C、D存在亲属关系,A与D又是朋友

      //  如果数据存在后端，那么可以通过请求获取到关系列表，然后组成理想的数据格式，这个可以自行处理

      }

    },

    mounted () {

      let plumbIns = jsPlumb.getInstance()

      // 在这里我们实例了一个对象

      let lineList = [] // 定义一个空列表用来存连线

      this.releationList.forEach(i =>{

        i.kindredList.forEach(j => {

          let storeInfo = {

            source: i.name,//起点Id

            target: j,//终点Id

            overlays: [["Arrow", { width: 10, length: 10, location: 1 }]],//定义连接线部件的样式

            paintStyle: { stroke: '#66ccff', strokeWidth: 2 },//定义连接线的颜色以及粗细，这里我们定义亲属的连接线为蓝色

          }

          lineList.push(storeInfo)

        })// 循环亲属关系列表，起点以name作为起点，终点以亲属的名字

        i.friendsList.forEach(j => {

          let storeInfo = {

            source: i.name,

            target: j,

            overlays: [["Arrow", { width: 10, length: 10, location: 0.5 }]],

            paintStyle: { stroke: '#99ff99', strokeWidth: 2 },//这里我们定义朋友之间的连线用绿色

          }// 循环亲属关系列表，起点以name作为起点，终点以朋友的名字

          lineList.push(storeInfo)

        })

       

      })

      let  jsPlumbConnectOptions = {

        isSource: true,

        isTarget: true,

        anchor: ['Left', 'Right', 'Top', 'Bottom', [0.3, 0, 0, -1], [0.7, 0, 0, -1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]],//定义可用连接点坐标，坐标位于盒子的四周

        connector: ['StateMachine'],//连接线样式

        endpoint: 'Blank',//端点样式

      }

      plumbIns.ready(function () {

       lineList.forEach((item) => {

          plumbIns.connect(item, jsPlumbConnectOptions);

        });

      })

    }

  }

</script>

<style >

  #wrapper {

    background:

      radial-gradient(

        ellipse at top left,

        rgba(255, 255, 255, 1) 40%,

        rgba(229, 229, 229, .9) 100%

      );

    height: 100vh;

    padding: 60px 80px;

    width: 100vw;

  }

  .state-item {

    width: 80px;

    height: 40px;

    color: #606266;

    background: #f6f6f6;

    border: 2px solid rgba(0, 0, 0, 0.05);

    text-align: center;

    line-height: 40px;

    font-family: sans-serif;

    border-radius: 4px;

    margin-right: 60px;

  }

  .line-wrap {

    display: flex;

    margin-bottom: 40px;

  }

</style>