改造vue-webtopo-svgeditor2.1版本，兼容vue2

原控件在 https://github.com/yaolunmao/vue-webtopo-svgeditor  是园子里的朋友 咬轮猫  开发的

在网上发现大神开发这套组态，很符合项目要求，10.1期间准备融入项目，结果发现他是基于VUE3.0开发的，我们项目是vue2.0，他在git上也提到兼容2.0的方式，连猜带蒙跟着做，我从1.0版本开始看代码，移植很顺利，2.0~2.1就有些困难了，这里写下过程，有需要的朋友可以参考,下面针对 2.1 版本说说，最后的发布版本我不准备兼容了，因为我们也要升级到vue3.0了^ ^

1 ，安装 vue-fragment ,安装后针对public\InterfaceReturn.json  文件做改造 ，多节点的component  前后加 <fragment> </fragment>

2 ，删除public\InterfaceReturn.json文件里  v-chart 控件，我是因为版本总装不对 vue-echart，放弃了。用其他方式绘制了

3，最关键的一步，在 SvgComponents.vue 文件中，改造 created 函数如下

  created() {
    this.svgInfoData.forEach(f => {
      const componentInfo = {
        template: f.template,
        props: f.props
      }
      importComponents[f.type] = componentInfo
      console.log(f.type, componentInfo)
      Vue.component(f.type, {
        props: ['prop_data'],
        template: f.template
      })
    })
  },

基本就可以跑起来了。

预览展示代码有个 key的问题，改造如下

      <svg
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        style="background-color:#000000"
        viewBox="0 0 1920 1080"
        width="100%"
        height="100%"
      >
        <defs />
        <g
          v-for="item in svgLists"
          :id="item.id"
          :key="item.id"
          :title="item.title"
          :transform="'translate('+(item.svgPositionX)+','+(item.svgPositionY)+')' +'rotate('+item.angle+')' +'scale('+item.size+')'"
        >
          <SvgComponents
            :component_prop="item"
            :svgInfoData="svgInfoData"
          />
        </g>
      </svg>

 

目前使用方式是用vue-webtopo-svgeditor2.1绘制好，自己手工再编几个组件，然后在自己改造后的vue2.0里面展示。

最后提一句，增加 vue.component 后编译出错，在vue.config.js 增加了 runtimeCompiler: true,  就好了，这个仅供参考