{"id":239261,"date":"2022-04-14T10:01:09","date_gmt":"2022-04-14T02:01:09","guid":{"rendered":"https:\/\/lrxjmw.cn\/?p=239261"},"modified":"2022-03-30T10:02:09","modified_gmt":"2022-03-30T02:02:09","slug":"vue-jsplumb-linux","status":"publish","type":"post","link":"https:\/\/lrxjmw.cn\/vue-jsplumb-linux.html","title":{"rendered":"\u7b80\u5355\u4ecb\u7ecdvue3.x \u4f7f\u7528jsplumb\u5b9e\u73b0\u62d6\u62fd\u8fde\u7ebf"},"content":{"rendered":"<table>\n<tbody>\n<tr>\n<td style=\"padding: 5px 12px; width: 25px; font-size: 22px; text-align: center; background: #E8E8E8; line-height: 30px; color: #999;\">\u5bfc\u8bfb<\/td>\n<td style=\"padding: 10px 10px 12px; line-height: 20px;\"><strong>\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4e3a\u5927\u5bb6\u8be6\u7ec6\u4ecb\u7ecd\u4e86vue3.x \u4f7f\u7528jsplumb\u5b9e\u73b0\u62d6\u62fd\u8fde\u7ebf\uff0c\u6587\u4e2d\u793a\u4f8b\u4ee3\u7801\u4ecb\u7ecd\u7684\u975e\u5e38\u8be6\u7ec6\uff0c\u5177\u6709\u4e00\u5b9a\u7684\u53c2\u8003\u4ef7\u503c\uff0c\u611f\u5174\u8da3\u7684\u5c0f\u4f19\u4f34\u4eec\u53ef\u4ee5\u53c2\u8003\u4e00\u4e0b<br \/>\n<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u672c\u6587\u5b9e\u4f8b\u4e3a\u5927\u5bb6\u5206\u4eab\u4e86vue3.x \u4f7f\u7528jsplumb\u5b9e\u73b0\u62d6\u62fd\u8fde\u7ebf\u7684\u5177\u4f53\u4ee3\u7801\uff0c\u4f9b\u5927\u5bb6\u53c2\u8003\uff0c\u5177\u4f53\u5185\u5bb9\u5982\u4e0b<\/p>\n<p>\u5982\u679c\u60f3\u5728vue2\u91cc\u9762\u4f7f\u7528jsplumb \u53ef\u4ee5\u67e5\u770b \u6587\u7ae0\uff0c\u4e0b\u9762\u8bb2\u89e3\u5982\u4f55\u5728vue3.x \u91cc\u9762\u4f7f\u7528jsplumb\u8fdb\u884c\u62d6\u62fd\u8fde\u7ebf<\/p>\n<p>1\u3001\u5b89\u88c5<\/p>\n<pre>npm install --save jsplumb<\/pre>\n<p>2\u3001\u5f15\u5165<\/p>\n<pre>< script lang=\"ts\" setup>\r\n  import {ref, reactive,onMounted} from 'vue'\r\n  import jsPlumb from 'jsplumb'\r\n< \/script><\/pre>\n<p>3\u3001\u4f7f\u7528<br \/>\n<a href=\"https:\/\/lrxjmw.cn\/wp-content\/uploads\/2022\/03\/2022329170609518.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lrxjmw.cn\/wp-content\/uploads\/2022\/03\/2022329170609518-300x255.jpg\" alt=\"\" width=\"300\" height=\"255\" class=\"alignnone size-medium wp-image-239265\" srcset=\"https:\/\/lrxjmw.cn\/wp-content\/uploads\/2022\/03\/2022329170609518-300x255.jpg 300w, https:\/\/lrxjmw.cn\/wp-content\/uploads\/2022\/03\/2022329170609518.jpg 442w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<pre>< template>\r\n  < h3>jsplumb\u4f7f\u7528\r\n  < div id=\"container\">\r\n        < div class=\"col1\">\r\n            < div v-for=\"item in list1\" :key=\"item.nodeId\" :id=\"item.nodeId\" name=\"joint\">{{ item.name }}\r\n        < \/div>\r\n        < div class=\"col2\">\r\n            < div v-for=\"item in list2\" :key=\"item.nodeId\" :id=\"item.nodeId\" name=\"data\">{{ item.name }}\r\n        < \/div>\r\n    < \/div>\r\n< \/template>\r\n< script lang=\"ts\" setup>\r\n  import {ref, reactive,onMounted} from 'vue'\r\n  import jsPlumb from 'jsplumb'\r\n    \/\/jsplumb\u4f7f\u7528\r\n    let $jsPlumb = jsPlumb.jsPlumb;\r\n    let jsPlumb_instance = null; \/\/ \u7f13\u5b58\u5b9e\u4f8b\u5316\u7684jsplumb\u5bf9\u8c61\r\n    \/\/\u6a21\u578b\u8f74\r\n    const list1 = reactive([\r\n        {name: \"name1\", nodeId: \"name1\", axis: '', type:''},\r\n        {name: \"name2\", nodeId: \"name2\", axis: '', type:''},\r\n        {name: \"name3\", nodeId: \"name3\", axis: '', type:''},\r\n        {name: \"name4\", nodeId: \"name4\", axis: '', type:''},\r\n        {name: \"name5\", nodeId: \"name5\", axis: '', type:''},\r\n        {name: \"name6\", nodeId: \"name6\", axis: '', type:''}\r\n    ]);\r\n    \/\/\u63a5\u53e3\u6570\u636e\u70b9\r\n    const list2 = reactive([\r\n        {name: '\u6570\u636e1', nodeId: 'data1'},\r\n        {name: '\u6570\u636e2', nodeId: 'data2'},\r\n        {name: '\u6570\u636e3', nodeId: 'data3'},\r\n        {name: '\u6570\u636e4', nodeId: 'data4'},\r\n        {name: '\u6570\u636e5', nodeId: 'data5'},\r\n        {name: '\u6570\u636e6', nodeId: 'data6'}\r\n    ]);\r\n \r\n    onMounted(()=>{\r\n        showPlumb();\r\n    })\r\n \r\n    const showPlumb = ()=> {\r\n        jsPlumb_instance = $jsPlumb.getInstance({\r\n            Container: 'container', \/\/ \u9009\u62e9\u5668id\r\n            EndpointStyle: {radius: 0.11, fill: '#fff'}, \/\/ \u7aef\u70b9\u6837\u5f0f\r\n            PaintStyle: {stroke: '#000', strokeWidth: 2}, \/\/ \u7ed8\u753b\u6837\u5f0f\uff0c\u9ed8\u8ba48px\u7ebf\u5bbd  #456\r\n            HoverPaintStyle: {stroke: '#1E90FF'}, \/\/ \u9ed8\u8ba4\u60ac\u505c\u6837\u5f0f  \u9ed8\u8ba4\u4e3anull\r\n            ConnectionOverlays: [ \/\/ \u6b64\u5904\u53ef\u4ee5\u8bbe\u7f6e\u6240\u6709\u7bad\u5934\u7684\u6837\u5f0f\uff0c\u56e0\u4e3a\u6211\u4eec\u8981\u6539\u53d8\u8fde\u63a5\u7ebf\u7684\u6837\u5f0f\uff0c\u6545\u5355\u72ec\u914d\u7f6e\r\n                ['Arrow', { \/\/ \u8bbe\u7f6e\u53c2\u6570\u53ef\u4ee5\u53c2\u8003\u4e2d\u6587\u6587\u6863\r\n                    location: 1,\r\n                    length: 10,\r\n                    paintStyle: {\r\n                        stroke: '#000',\r\n                        fill: '#000'\r\n                    }\r\n                }]\r\n            ],\r\n            Connector: ['Straight'], \/\/ \u8981\u4f7f\u7528\u7684\u9ed8\u8ba4\u8fde\u63a5\u5668\u7684\u7c7b\u578b\uff1a\u76f4\u7ebf\uff0c\u6298\u7ebf\uff0c\u66f2\u7ebf\u7b49\r\n            DrapOptions: {cursor: 'crosshair', zIndex: 2000}\r\n        },)\r\n \r\n        console.log(jsPlumb_instance)\r\n \r\n        jsPlumb_instance.batch(() => {\r\n \r\n            for (let i = 0; i < list1.length; i++) {\r\n                initLeaf(list1[i].nodeId, 'joint')\r\n            }\r\n            for (let i = 0; i < list2.length; i++) {\r\n                initLeaf(list2[i].nodeId, 'data')\r\n            }\r\n        })\r\n \r\n        const joint = document.getElementsByName('joint')\r\n        const data = document.getElementsByName('data')\r\n \r\n        jsPlumb_instance.setSourceEnabled(joint, true)\r\n        jsPlumb_instance.setTargetEnabled(data, true)\r\n        jsPlumb_instance.setDraggable(joint, false) \/\/ \u662f\u5426\u652f\u6301\u62d6\u62fd\r\n        jsPlumb_instance.setDraggable(data, false) \/\/ \u662f\u5426\u652f\u6301\u62d6\u62fd\r\n \r\n        jsPlumb_instance.bind('click',  (conn, originalEvent) => {\r\n            jsPlumb_instance.deleteConnection(conn)\r\n        })\r\n \r\n    }\r\n \r\n    \/\/ \u521d\u59cb\u5316\u5177\u4f53\u8282\u70b9\r\n    const initLeaf = (id, type)=> {\r\n        const ins = jsPlumb_instance;\r\n        const elem = document.getElementById(id)\r\n        if (type == 'joint') {\r\n            ins.makeSource(elem, {\r\n                anchor: [1, 0.5, 0, 0], \/\/ \u5de6 \u4e0a \u53f3 \u4e0b\r\n                allowLoopback: false,\r\n                maxConnections: 1\r\n            })\r\n        } else {\r\n            ins.makeTarget(elem, {\r\n                anchor: [0, 0.5, 0, 0],\r\n                allowLoopback: false,\r\n                maxConnections: 1\r\n            })\r\n        }\r\n    }\r\n \r\n< \/script>\r\n \r\n< style scoped lang=\"less\">\r\n #container {\r\n    position: relative;\r\n      margin-top: 20px;\r\n      width: 100%;\r\n      height: 300px;\r\n  }\r\n \r\n  .col2, .col1 {\r\n      float: left;\r\n      text-align: center;\r\n  }\r\n \r\n  .col1 {\r\n      width: 80px;\r\n  }\r\n \r\n  .col2 {\r\n      width: 120px;\r\n      margin-left: 80px;\r\n  }\r\n \r\n  #container > div > div {\r\n      line-height: 30px;\r\n      margin: 0 0 17px 0;\r\n      background: #ef631e;\r\n      color: #fff;\r\n  }\r\n< \/style><\/pre>\n<p>\u4ee5\u4e0a\u5c31\u662f\u672c\u6587\u7684\u5168\u90e8\u5185\u5bb9\uff0c\u5e0c\u671b\u5bf9\u5927\u5bb6\u7684\u5b66\u4e60\u6709\u6240\u5e2e\u52a9\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u672c\u6587\u5b9e\u4f8b\u4e3a\u5927\u5bb6\u5206\u4eab\u4e86vue3.x \u4f7f\u7528jsplumb\u5b9e\u73b0\u62d6\u62fd\u8fde\u7ebf\u7684\u5177\u4f53\u4ee3\u7801\uff0c\u4f9b\u5927\u5bb6\u53c2\u8003\uff0c\u5177\u4f53\u5185\u5bb9\u5982\u4e0b \u5982\u679c\u60f3\u5728 [&hellip;]<\/p>\n","protected":false},"author":1482,"featured_media":172449,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[55],"tags":[],"class_list":["post-239261","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-thread"],"acf":[],"_links":{"self":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/239261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/users\/1482"}],"replies":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/comments?post=239261"}],"version-history":[{"count":5,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/239261\/revisions"}],"predecessor-version":[{"id":239267,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/239261\/revisions\/239267"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/media\/172449"}],"wp:attachment":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/media?parent=239261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/categories?post=239261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/tags?post=239261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}