在Ant-design-pro框架中引入jQuery和jQuery-ui步骤

1.安装jQuery和jQuery-ui
npm i jquery s
npm i jquery
-ui s
yarn install

2.在vue.config.js中进行配置

// webpack build externals
const prodExternals = {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  axios: 'axios',
  jquery: 'jquery',// 新添加
  $: 'jquery' // 新添加
}

3.在需要引入的组件中引入

<script>
  import jsplumb from 'jsplumb'
  import  $ from "jquery"
   // 需要注意的是，在jquery-ui引入的时候，
  // 直接写成 import juqery-ui 是没有效果的，只能直接写到具体的方法
  import 'jquery-ui/ui/widgets/draggable'
  import 'jquery-ui/ui/widgets/droppable'
  export default {
    name: 'test1',
    components: {
      jsplumb
    },
 
    mounted(){
      /* global jsPlumb */
      var instance = jsPlumb.getInstance({
        Container:"diagramContainer"
      });
      instance.connect({
        source: 'item_left',
        target: 'item_right',
        paintStyle: { stroke: 'lightgray', strokeWidth: 3 },//设置连线样式
        endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 },//设置连线样式
        overlays: [ ['Arrow', { width: 12, length: 12, location: 1 }] ],//设置箭头
        endpoint: 'Dot',
        connector: ['Bezier'],
        anchor: ['Left', 'Right']
 
      });
 
      //注册实体可draggable
      $("#item_left").draggable({
        containment: "parent",
        drag: function (event, ui) {
          instance.repaintEverything();
        },
        stop: function () {
          instance.repaintEverything();
        }
      });
      $("#item_right").draggable({
        containment: "window",
        drag: function (event, ui) {
          instance.repaintEverything();
        },
        stop: function () {
          instance.repaintEverything();
        }
      });
    }
  }
</script>

2.在vue.config.js中进行配置
// webpack build externalsconst prodExternals = { vue: 'Vue', 'vue-router': 'VueRouter', vuex: 'Vuex', axios: 'axios', jquery: 'jquery',// 新添加 $: 'jquery' // 新添加}3.在需要引入的组件中引入
<script> import jsplumb from 'jsplumb' import $ from "jquery" // 需要注意的是，在jquery-ui引入的时候， // 直接写成 import juqery-ui 是没有效果的，只能直接写到具体的方法 import 'jquery-ui/ui/widgets/draggable' import 'jquery-ui/ui/widgets/droppable' export default { name: 'test1', components: { jsplumb }, mounted(){ /* global jsPlumb */ var instance = jsPlumb.getInstance({ Container:"diagramContainer" }); instance.connect({ source: 'item_left', target: 'item_right', paintStyle: { stroke: 'lightgray', strokeWidth: 3 },//设置连线样式 endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 },//设置连线样式 overlays: [ ['Arrow', { width: 12, length: 12, location: 1 }] ],//设置箭头 endpoint: 'Dot', connector: ['Bezier'], anchor: ['Left', 'Right'] }); //注册实体可draggable $("#item_left").draggable({ containment: "parent", drag: function (event, ui) { instance.repaintEverything(); }, stop: function () { instance.repaintEverything(); } }); $("#item_right").draggable({ containment: "window", drag: function (event, ui) { instance.repaintEverything(); }, stop: function () { instance.repaintEverything(); } }); } }</script>————————————————版权声明：本文为CSDN博主「疯狂一世。」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/qq_41950229/article/details/103381951

来源：oschina

链接：https://my.oschina.net/u/4408413/blog/4285343

标签

jsplumb

Vue.js

vuex

axios

vue-router

jquery