动态组件完成

public/InterfaceReturn.json

@@ -1,14 +1,14 @@
 [{
   "type": "AlternatorSvg",
   "title": "发电机",
-  "template": "<ellipse id=\"c1\" cx=\"50\" cy=\"50\" rx=\"35\" ry=\"35\" fill=\"none\" :stroke=\"color\" stroke-width=\"2\" transform=\"translate(-50,-50)\"></ellipse><path id=\"l1\" d=\"M30,50 C30,44 34,40 40,40 46,40 50,44 50,50 M50,50 C50,56 54,60 60,60 66,60 70,56 70,50 \" fill=\"none\" :stroke=\"color\" stroke-width=\"2\" transform=\"translate(-50,-50)\"></path>",
+  "template": "<ellipse id=\"c1\" cx=\"50\" cy=\"50\" rx=\"35\" ry=\"35\" fill=\"none\" :stroke=\"svg_color\" stroke-width=\"2\" transform=\"translate(-50,-50)\"></ellipse><path id=\"l1\" d=\"M30,50 C30,44 34,40 40,40 46,40 50,44 50,50 M50,50 C50,56 54,60 60,60 66,60 70,56 70,50 \" fill=\"none\" :stroke=\"svg_color\" stroke-width=\"2\" transform=\"translate(-50,-50)\"></path>",
   "props": ["svg_color"],
   "default_color":"#00FF00",
   "priview_img":"/AlternatorSvg.png"
 }, {
   "type": "ArrowDownSvg",
   "title": "箭头向下",
-  "template": "<polygon  points=\"0,-8 5,0 10,-8\" :fill=\"color\" :stroke=\"color\" stroke-width=\"2\" transform=\"translate(-5,0)\"></polygon>",
+  "template": "<polygon  points=\"0,-8 5,0 10,-8\" :fill=\"svg_color\" :stroke=\"svg_color\" stroke-width=\"2\" transform=\"translate(-5,0)\"></polygon>",
   "props": ["svg_color"],
   "default_color":"#00FF00",
   "priview_img":"/ArrowDownSvg.png"

src/components/DynamicTest.vue

@@ -1,61 +1,24 @@
 <template>
-  <div style="padding: 30px">
-    <button @click="change('1')">组件1</button>
-    <button @click="change('2')">组件2</button>
-    <button @click="change('3')">组件3</button>
-    <component :is="componentTag"
-               :color= color
-               :translate =translate></component>
-  </div>
+{{svg_color}}
+  <component :is="svgtype"
+             :svg_color= svg_color></component>
 </template>
 <script>
-// var componentA = {
-//   template: `<div style="color:red">我是 {{msg}}</div>`,
-//   props: ['msg']
-// }
-// var componentB = {
-//   template: `<div style="color:green">我是 componentB</div>`
-// }
-// var componentC = {
-//   template: `<div style="color:rebeccapurple">我是 componentC</div>`
-// }
 let importComponents = {};
 export default {
-
+  props: ['svgInfoData','svg_color','svgtype'],
   data () {
     return {
-      componentTag: '',
-      color: '测试颜色',
-      translate:'测试坐标'
+      componentTag: ''
     }
   },
   components: importComponents,
   methods: {
-    change (index) {
-      if (index == 1) {
-        this.componentTag = 'AlternatorSvg'
-      }
-      else {
-        this.componentTag = 'ArrowDownSvg'
-      }
 
-    },
   },
   created () {
-    // let _this=this;
-    //假如这是接口获取的字符串
-    const dataStr = [{
-      type: 'AlternatorSvg',
-      name: '发电机',
-      template: `<ellipse id="c1" cx="50" cy="50" rx="35" ry="35" fill="none" :stroke="color" stroke-width="2" :transform="translate"></ellipse><path id="l1" d="M30,50 C30,44 34,40 40,40 46,40 50,44 50,50 M50,50 C50,56 54,60 60,60 66,60 70,56 70,50 " fill="none" :stroke="color" stroke-width="2" :transform="translate"></path>`,
-      props: ['color', 'translate']
-    }, {
-      typr: 'ArrowDownSvg',
-      name: '箭头向下',
-      template: `<polygon  points="0,-8 5,0 10,-8" :fill="color" :stroke="color" stroke-width="2" :transform="translate"></polygon>`,
-      props: ['color', 'translate']
-    }];
-    dataStr.forEach(f => {
+    this.svgInfoData.forEach(f => {
+      console.log(111);
       let componentInfo = {
         template: f.template,
         props: f.props

src/components/DynamicTest1.vue

@@ -10,8 +10,8 @@
 </template>
 <script>
 var componentA = {
-  template: `<div style="color:red">我是 {{color}}</div>`,
-  props: ['color']
+  template: "<div style=\"color:red\">我是 {{color}}</div>",
+  props: ["color"]
 }
 var componentB = {
   template: `<polygon  points="0,-8 5,0 10,-8" :fill="color" :stroke="color" stroke-width="2" :transform="translate"></polygon>`

src/components/LeftToolBar.vue

@@ -186,11 +186,11 @@
 <script>
 import global from '@/global/global.js';//全局变量
 export default {
+  props: ['svgInfoData'],
   data () {
     return {
       activeKey: ['1'],//当前激活的key
-      text: `这里是预留位置.`,
-      svgInfoData:[]
+      text: `这里是预留位置.`
     };
   },
   methods: {
@@ -205,20 +205,6 @@ export default {
       global.CurrentlySelectedToolBarWidth = width;
       // alert(this.$UCore.GenUUid());
     },
-  },
-  created () {
-    let _this=this;
-    //请求接口获取组件
-    this.$axios.get('/InterfaceReturn.json')
-      .then(function (response) {
-        _this.svgInfoData=response.data;
-        console.log(response.data);
-      })
-      .catch(function (error) {
-        console.log(error);
-      });
-
-
   }
 };
 </script>

src/views/CircuitEdit.vue

@@ -13,11 +13,9 @@
       <span v-if="!shrink" @click="exitFullscreen" class="icon-shrink svgfont">&#xe62b;</span>
       <a-layout class="pageMain">
         <a-layout-sider class="leftNav">
-          <LeftToolBar></LeftToolBar>
+          <LeftToolBar :svgInfoData= svgInfoData></LeftToolBar>
         </a-layout-sider>
         <a-layout-content class="centerContain" :class="{ fixed: !shrink }">
-          <DynamicTest></DynamicTest>
-          <DynamicTest1></DynamicTest1>
           <div class="canvas-content" id="canvas"  @mousemove="MouseMove"  @mousedown="MousedownCanvas" @mouseup="MouseupCanvas" @dblclick="DblClick" @mousewheel="MouseWheel">
             <!--拖动辅助线-->
             <div id="guide-x"></div>
@@ -30,7 +28,8 @@
             <feComposite in="SourceGraphic"/>
             </filter>
             <g style="cursor:pointer" v-for="(item,index) in svgLists" :key="item" :id=item.id  @mousedown="MousedownSvg(item.id,index)" :title=item.title :transform="'translate('+(item.svgPositionX)+','+(item.svgPositionY)+')' +'rotate('+item.angle+')'" >
-              <SvgComponents :height = item.height :color= item.svgColor :width= item.width :type= item.type :tableData= item.tableData :fontSize= item.fontSize :svgText= item.svgText :editable= editable></SvgComponents>
+              <DynamicTest :svg_color= item.svgColor :svgtype= item.type :svgInfoData= svgInfoData></DynamicTest>
+              <!-- <SvgComponents :color= item.svgColor :width= item.width :type= item.type :tableData= item.tableData :fontSize= item.fontSize :svgText= item.svgText :editable= editable></SvgComponents> -->
             </g>
             </svg>
           </div>
@@ -46,14 +45,14 @@
 <script>
 import LeftToolBar from '@/components/LeftToolBar.vue';
 import RightToolBar from '@/components/RightToolBar.vue';
-import SvgComponents from '@/components/SvgComponents.vue';
+// import SvgComponents from '@/components/SvgComponents.vue';
 import global from '@/global/global.js';//全局变量
 import DynamicTest from '@/components/DynamicTest.vue';
-import DynamicTest1 from '@/components/DynamicTest1.vue';
 export default {
-  components: { LeftToolBar,RightToolBar,SvgComponents,DynamicTest,DynamicTest1},
+  components: { LeftToolBar,RightToolBar,DynamicTest},
   data(){
     return{
+      svgInfoData:[],//接口获取到的组件数据
       shrink:true,//收缩状态  true收缩  false展开
       svgLists:[
         ],
@@ -428,6 +427,15 @@ export default {
           }
           
       }
+    //请求接口获取组件
+    this.$axios.get('/InterfaceReturn.json')
+      .then(function (response) {
+        _this.svgInfoData=response.data;
+        console.log(response.data);
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
   }
 
 }