vue中使用visjs小记

vue中的template部分：

<div style="border-right:1px dashed #eee;">
        <!--节点编辑框-->
         <div id="node-popUp"> 
           <p id="node-operation">node</p> <br>
           <div style="margin: 10px;display:flex;align-items:center;">
             <div style="flex:0 0 30%;margin-right:10px;text-align:right;">ID</div>
             <input disabled id="node-id" value="new value" class="ivu-input ivu-input-disabled" style="margin-right:20px;"/>
          </div>
          <div style="margin: 10px;display:flex;align-items:center;">
             <div style="flex:0 0 30%;margin-right:10px;text-align:right;">节点名称</div>
             <input id="node-label" value="new value" class="ivu-input" style="margin-right:20px;" />
          </div>
          <div style="margin: 10px;display:flex;align-items:center;">
             <div style="flex:0 0 30%;margin-right:10px;text-align:right;">节点类型</div>
             <select id="node-type" class="ivu-select-selection ivu-input" style="margin-right:20px;">
                <option v-for="item in nodeType"  :value="item.type" class="ivu-select-item">{{item.label}}</option>
             </select>
          </div>
          <div style="margin: 30px 20px;">
             <input type="button" value="确定" id="node-saveButton" class="ivu-btn ivu-btn-primary" style="margin: 0 20px;" />
             <input type="button" value="取消" id="node-cancelButton" class="ivu-btn ivu-btn-primary" style="margin: 0 10px;"/>
          </div>
        </div>

      <!--连线编辑框-->
        <div id="edge-popUp">
          <p id="edge-operation">edge</p>
          <div style="margin: 10px;display:flex;align-items:center;">
            <div style="flex:0 0 30%;margin-right:10px;text-align:right;">关系名称</div>
            <input id="edge-label" value="new value" class="ivu-input" style="margin-right:20px;" />
          </div>
          <div style="margin: 10px;display:flex;align-items:center;">
            <div style="flex:0 0 30%;margin-right:10px;text-align:right;">关系类型</div>
            <select id="edge-type" class="ivu-select-selection ivu-input" style="margin-right:20px;">
              <option v-for="item in edgeType"  :value="item.color" class="ivu-select-item">{{item.label}}</option>
            </select>
          </div>
          <div style="margin: 30px 20px;">
            <input type="button" value="确定" id="edge-saveButton" class="ivu-btn ivu-btn-primary" style="margin: 0 20px;" />
            <input type="button" value="取消" id="edge-cancelButton" class="ivu-btn ivu-btn-primary" style="margin: 0 10px;"/>
          </div>
        </div>
        <div id="mynetwork">
        	<!--用于画关系图的部分-->
        </div>
      </div>

vue 中的 javascript 部分：

	export default {
	    data() {
	        return {
	          nodeType: [{//节点类型下拉选项
	            label: '蔬菜',
	            type: 'vegtables'
	          },{
	            label: '水果',
	            type: 'fruit''
	          }],
	          edgeType: [{
	            label: '资金',
	            color: '#0066CC'
	          },{
	            label: '关系',
	            color: '#9933cc'
	          },{
	            label: '物品',
	            color: '#663300'
	          }]
	        };
	    },
		mounted () {  //
		    this.draw();
		},
		methods: {
			draw () {
	          let _this = this;
	          this.nodes = new DataSet(this.nodesList);

	          // create an array with edges
	          this.edges = new DataSet(this.edgesList);
	
	          // create a network
	          var container = document.getElementById('mynetwork');
	          var data = {
	            nodes: this.nodes,
	            edges: this.edges
	          };
	          var options = {
	            autoResize: false,
	            interaction: {
	              hover: true
	            },
	            locale: 'cn',//工具栏显示中文
	            locales: {
	              cn: {//工具栏中文翻译
	                edit: '编辑',
	                del: '删除当前节点或关系',
	                back: '返回',
	                addNode: '添加节点',
	                addEdge: '添加连线',
	                editNode: '编辑节点',
	                editEdge: '编辑连线',
	                addDescription: '点击空白处可添加节点',
	                edgeDescription: '点击某个节点拖拽连线可连接另一个节点',
	                editEdgeDescription: '可拖拽连线改变关系',
	                createEdgeError: 'Cannot link edges to a cluster.',
	                deleteClusterError: 'Clusters cannot be deleted.',
	                editClusterError: 'Clusters cannot be edited.'
	              }
	          },
	          manipulation: {//工具栏
	              enabled: true,
	              initiallyActive: true, //直接显示工具栏
	              addNode: function(data, callback) {  //添加节点
	                // filling in the popup DOM elements
	                document.getElementById('node-operation').innerHTML = "新增节点";
	                document.getElementById('node-id').value = data.id;
	                data.group = 'fruit';
	                editNode(data, clearNodePopUp, callback);
	              },
	              editNode: function(data, callback) {  //编辑节点
	                // filling in the popup DOM elements
	                document.getElementById('node-operation').innerHTML = "编辑节点";
	                document.getElementById('node-id').value = data.id;
	                editNode(data, cancelNodeEdit, callback);
	              },
	              addEdge: function(data, callback) {
	                document.getElementById('edge-operation').innerHTML = "新增连线";
	                document.getElementById('edge-type').value = '#9933cc';
	                editEdgeWithoutDrag(data, callback);
	              },
	              editEdge:function(data, callback) {
	                  document.getElementById('edge-popUp').style.display = 'block';
	                  document.getElementById('edge-operation').innerHTML = "编辑连线";
	                  editEdgeWithoutDrag(data, callback);
	                }
	          },
	          nodes: { //节点配置
	              borderWidth: 0, //节点边框的宽度,单位为px
	              color: { //字体配置
	                border: '#fff',
	                background: '#fff'
	              },
	              font: { //字体配置
	                color: '#333'
	              },
	              widthConstraint: { //节点名称宽度
	                maximum: 80
	              }
	            },
	            edges: { //连线配置
	              color: {
	                color: '#9933cc',
	                highlight: '#9933cc',
	                hover: '#9933cc'
	              },
	              widthConstraint: { //连接线信息宽度
	                maximum: 50
	              },
	              smooth: true, //是否显示方向箭头
	              arrows: { //箭头指向from节点
	                to: true
	              }
	            },
	            physics: {   
	              maxVelocity: 4,
	              minVelocity: 0.62,
	            },
	            groups: {   
	              vegetables: {
	                shape: 'image',
	                image: file,
	              },
	              fruit: {
	                shape: 'circularImage',
	                image: witness,
	              }
	            }
	          };
	          window.network = new Network(container, data, options);
	
	          network.on("dragEnd", e => {  //拖拽完成
	            var _nodeId = e.nodes[0];
	            if (typeof _nodeId === 'undefined')
	              return;
	            _this.nodes.update({
	              id: _nodeId,
	              fixed: {
	                x: true,
	                y: true
	              }
	            });
	          });
	
	
	          network.on('dragStart', e => { //拖拽开始前
	            var _nodeId = e.nodes[0];
	            if (typeof _nodeId === 'undefined')
	              return;
	            _this.nodes.update({
	              id: _nodeId,
	              fixed: {
	                x: false,
	                y: false
	              }
	            });
	          });
	
	          network.on("click", params => {  //点击画布
	    
	          });
	
	          network.on("selectEdge", function (params) { //选择edge
	               console.log('selectEdge Event:', params);
	          });
	
	
	          network.on("hoverNode", params => {  //hover节点时
	            document.getElementById("mynetwork").getElementsByTagName("canvas")[0].style.cursor = "pointer";
	          });
	
	        },
	    }
	 };
	
	function editNode(data, cancelAction, callback) {
	        document.getElementById('node-label').value = data.label;
	        document.getElementById('node-type').value = data.group;
	        document.getElementById('node-saveButton').onclick = saveNodeData.bind(this, data, callback);
	        document.getElementById('node-cancelButton').onclick = cancelAction.bind(this, callback);
	        document.getElementById('node-popUp').style.display = 'block';
	      }
	
	
	 // Callback passed as parameter is ignored
	function clearNodePopUp() {
	        document.getElementById('node-saveButton').onclick = null;
	        document.getElementById('node-cancelButton').onclick = null;
	        document.getElementById('node-popUp').style.display = 'none';
	}
	
	
	function cancelNodeEdit(callback) {
	        clearNodePopUp();
	        callback(null);
	}
	
	
	function saveNodeData(data, callback) {
	        data.label = document.getElementById('node-label').value;
	        data.group = document.getElementById('node-type').value;
	        clearNodePopUp();
	        callback(data);
	}
	
	
	function editEdgeWithoutDrag(data, callback) {
	        // filling in the popup DOM elements
	        document.getElementById('edge-label').value = data.label;
	        document.getElementById('edge-saveButton').onclick = saveEdgeData.bind(this, data, callback);
	        document.getElementById('edge-cancelButton').onclick = cancelEdgeEdit.bind(this, callback);
	        document.getElementById('edge-popUp').style.display = 'block';
	}
	
	
	function clearEdgePopUp() {
	        document.getElementById('edge-saveButton').onclick = null;
	        document.getElementById('edge-cancelButton').onclick = null;
	        document.getElementById('edge-popUp').style.display = 'none';
	}
	
	
    function cancelEdgeEdit(callback) {
	        clearEdgePopUp();
	        callback(null);
	}
	
	
	function saveEdgeData(data, callback) {
	        if (typeof data.to === 'object')
	          data.to = data.to.id
	        if (typeof data.from === 'object')
	          data.from = data.from.id
	        data.label = document.getElementById('edge-label').value;
	        data.color = document.getElementById('edge-type').value;
	        clearEdgePopUp();
	        callback(data);
	}

vue中的style部分：

#mynetwork{
  width: 100%;
  height: 735px;
  margin: 0;
  border: 2px solid #fff;
  color: #3693ff;
  font: 14pt arial;
  position:relative;


  & .vis-manipulation{
    display:flex !important;
    position: absolute;
    left: 65%;
    top: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;


    & .vis-label {
      margin: 0 0 0 23px;
      line-height: 25px;
    }


    & .vis-separator-line {
      float: left;
      display: inline-block;
      width: 1px;
      height: 21px;
      background-color: #bdbdbd;
      margin: 0 7px 0 15px;
    }


    & .vis-button{
      font-family: verdana;
      font-size: 1rem;
      background-position: 0 0;
      background-repeat: no-repeat;
      height: 24px;
      margin-left: 10px;
      cursor: pointer;
      padding: 0 8px 0 8px;
      display:inline-flex;
      background-size: contain;
    }


    & .vis-add{
      background-image: url(./img/添加节点.svg);
    }
    & .vis-connect{
      background-image: url(./img/添加连线.svg);
    }
    & .vis-edit{
      background-image: url(./img/编辑.svg);
    }
    & .vis-delete{
      background-image: url(./img/删除.svg);
    }
    & .vis-back{
      background-image: url(./img/返回.svg);
    }
  }


  & .vis-edit-mode{
    position: absolute;
    left:63%;
    top: 15px;
    height: 20px;
    & .vis-edit{
      background-image: url(./img/编辑.svg);
      background-size: contain;
      background-repeat: no-repeat;
      width: 80px;
      position: relative;
      & .vis-label {
        font-size:1rem;
        cursor:pointer;
        position: absolute;
        bottom:0;
        left: 25px;
      }
    }


  }
  & .vis-close{
    position: absolute;
    cursor: pointer;
    right:10px;
    top: 5px;
    height: 20px;
    width: 20px;
    background-image: url(./img/cross.svg);
    background-size: contain;
    background-position: 0 0;
    background-repeat: no-repeat;
  }
}


#operation {
  font-size:28px;
}
#node-popUp {
  display:none;
  position: absolute;
  top: 90px;
  right: 10px;
  z-index: 299;
  width: 400px;
  height: 300px;
  text-align: center;
  border: 1px solid #eee;
  box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.14);
}
#edge-popUp {
  display:none;
  position: absolute;
  top: 90px;
  right: 10px;
  z-index: 299;
  width: 400px;
  height: 250px;
  text-align: center;
  border: 1px solid #eee;
  box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.14);
}
#node-operation, #edge-operation{
  padding:10px;
  border-bottom: 1px solid #eee;
}