vue+jsplumb实现连线绘图,供大家参考,具体内容如下
jsPlumb是一个比较强大的绘图组件,它提供了一种方法,主要用于连接网页上的元素。在现代浏览器中,它使用SVG或者Canvas技术,而对于IE8以下(含IE8)的浏览器,则使用VML技术。
效果图
1.安装
npm install jsplumb --save
2.main.js 引入
import jsPlumb from 'jsplumb' Vue.prototype.$jsPlumb = jsPlumb.jsPlumb
3.示例代码
<template> <div> <div id="container"> <div class="left"> <ul> <li v-for="(item,index) in leftList" :key="'left' + index" :id="item.nodeId" name="source"> {{item.name}} </li> </ul> </div> <div class="right"> <ul> <li v-for="(item,index) in rightList" :key="'right' + index" :id="item.nodeId" name="target"> {{item.name}} </li> </ul> </div> </div> </div> </template> <script> export default { name: "linkElementModal", data() { return { jsPlumb: null, // 缓存实例化的jsplumb对象 leftList:[ {name: 'xxx_left_1', nodeId: 'left_1'}, {name: 'xxx_left_2', nodeId: 'left_2'}, {name: 'xxx_left_3', nodeId: 'left_3'}, {name: 'xxx_left_4', nodeId: 'left_4'} ], rightList:[ {name: 'xxx_right_1', nodeId: 'right_1'}, {name: 'xxx_right_2', nodeId: 'right_2'}, {name: 'xxx_right_3', nodeId: 'right_3'}, {name: 'xxx_right_4', nodeId: 'right_4'} ] } }, mounted(){ this.showPlumb(); }, methods:{ showPlumb() { this.jsPlumb = this.$jsPlumb.getInstance({ Container: 'container', // 选择器id EndpointStyle: {radius: 0.11, fill: '#999'}, // 端点样式 PaintStyle: {stroke: '#999', strokeWidth: 2}, // 绘画样式,默认8px线宽 #456 HoverPaintStyle: {stroke: '#994B0A', strokeWidth: 3 }, // 默认悬停样式 默认为null ConnectionOverlays: [ // 此处可以设置所有箭头的样式 ['Arrow', { // 设置参数可以参考中文文档 location: 1, length: 12, paintStyle: { stroke: '#999', fill: '#999' } }] ], Connector: ['Straight'], // 要使用的默认连接器的类型:直线,折线,曲线等 DrapOptions: {cursor: 'crosshair', zIndex: 2000} }); this.jsPlumb.batch(() => { for(let i = 0; i < this.leftList.length; i++){ this.initLeaf(this.leftList[i].nodeId, 'source'); } for(let j = 0; j < this.rightList.length; j++){ this.initLeaf(this.rightList[j].nodeId , 'target') } }) this.setjsPlumb(true,true); //点击连线 this.jsPlumb.bind('click', (conn, originalEvent) => { console.log(conn, originalEvent) }) //连线时触发 this.jsPlumb.bind('connection', (conn, originalEvent) => { console.log(conn.sourceId) console.log(conn.targetId) }) //右键触发 this.jsPlumb.bind('contextmenu', (conn, originalEvent) => { console.log(conn, originalEvent) }) }, // 初始化规则使其可以连线、拖拽 initLeaf(id, type) { const ins = this.jsPlumb; const elem = document.getElementById(id); if (type === 'source') { ins.makeSource(elem, { anchor: [1, 0.5, 0, 0], // 左 上 右 下 allowLoopback: false, //允许回连 maxConnections: -1 //最大连接数(-1表示不限制) }) } else { ins.makeTarget(elem, { anchor: [0, 0.5, 0, 0], allowLoopback: false, maxConnections: -1 }) } }, setjsPlumb(sourceFlag, targetFlag){ const source = document.getElementsByName('source') const target = document.getElementsByName('target') this.jsPlumb.setSourceEnabled(source, sourceFlag) this.jsPlumb.setTargetEnabled(target, targetFlag) this.jsPlumb.setDraggable(source, false) // 是否支持拖拽 this.jsPlumb.setDraggable(target, false) // 是否支持拖拽 }, } } </script> <style> #container{ width: 500px; height: 500px; padding: 20px; position: relative; /*一定加上这句,否则连线位置发生错乱*/ } .left{ float: left; width: 150px; } .right{ float: right; width: 150px; } .left li,.right li{ width: 100%; border-radius: 4px; border: 1px solid #ccc; background: #efefef; margin-bottom: 20px; padding: 8px 5px; } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。