VCC完成脱离及验证

main.js

@@ -4,13 +4,13 @@ import "element-ui/lib/theme-chalk/index.css";
 
 import AntdUI from "ant-design-vue";
 import "ant-design-vue/dist/antd.css";
-import Main from "./dist/vcc.umd.min.js";
+import APP from "./src/App.vue";
 
 Vue.use(ElementUI);
 Vue.use(AntdUI);
 
 new Vue({
   el: "#app",
-  render: (h) => h(Main),
+  render: (h) => h(APP),
 });
  

package.json

@@ -5,7 +5,7 @@
   "main": "./src/main.js",
   "scripts": {
     "serve": "vue-cli-service serve --open --port 8008",
-    "build": "vue-cli-service build --target lib --name vcc ./src/components-v2/Main.vue",
+    "build": "vue-cli-service build --target lib --name vcc ./src/components-v2/VCC.vue",
     "compileAndbuild:dev": "npm run compileComponent && vue-cli-service build",
     "lint": "vue-cli-service lint",
     "build:prod": "vue-cli-service build --mode production",

src/App.vue

@@ -0,0 +1,26 @@
+<template>
+  <vcc :initCodeEntity="codeStructure" @updateCodeEntity="onCodeUpdate"></vcc>
+</template>
+
+<script>
+// 以这样一段结构初始化VCC组件
+const initCodeStr = '{"template":{"lc_id":"root","__children":[{"div":{"class":"container","style":"min-height: 100%; padding-bottom: 100px;","lc_id":"container","__text__":"Hello，欢迎使用LCG，请往此区域拖拽组件","__children":[{"el-button":{"lc-mark":"","type":"danger","lc_id":"COAAYXizyI","__children":[],"__text__":"危险按钮","@click":"onButtonClick","size":"small"}}]}}]}}'
+
+export default {
+  components: {
+    vcc: () => import('./components-v2/VCC.vue')
+  },
+  data() {
+    return {
+      codeStructure: JSON.parse(initCodeStr),
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    onCodeUpdate(newCodeEntity) {
+      // 编辑后新的代码结构
+    }
+  }
+}
+</script>

src/components-v2/VCC.vue

@@ -73,7 +73,7 @@ window.styleSourceMap = styleData;
 
 export default {
   name: "vcc",
-  props: [],
+  props: ['initCodeEntity'],
   components: {
     RawComponents,
     ToolsBar,
@@ -103,15 +103,13 @@ export default {
         attributeContainter.style = "right: calc(-300px - 20px); display:none;";
         this.$refs['attributeInput'].onHide();
       }
-    }
+    },
   },
   computed: {
   },
   beforeCreate() { },
   created() {
     this.mainPanelProvider = new MainPanelProvider();
-    // 方便调试追踪
-    window.mainPanelProvider = this.mainPanelProvider;
   },
   beforeMount() { },
   mounted() {
@@ -151,11 +149,12 @@ export default {
         if (this.$refs.codeStructure) {
           this.$refs.codeStructure.updateCode(codeRawVueInfo);
         }
+        this.$emit('updateCodeEntity', codeRawVueInfo);
       }).onNodeDeleted(() => {
         this.currentEditRawInfo = null;
       }).onSelectElement(rawInfo => {
         this.currentEditRawInfo = rawInfo;
-      }).render(this.getFakeData());
+      }).render(this.initCodeEntity ? this.initCodeEntity : this.getFakeData());
     },
 
     // 指向将要插入哪个元素之前

src/components/AttributeInput.vue

@@ -156,11 +156,9 @@ export default {
     },
 
     createNew() {
-      window.trackManager.track("lc_on_attribute_add");
       this.localAttributes.push({ key: "", value: "" });
     },
     save() {
-      window.trackManager.track("lc_on_attribute_save");
 
       try {
 
@@ -193,11 +191,9 @@ export default {
       }
     },
     remove() {
-      window.trackManager.track("lc_on_attribute_remove");
       this.$emit("remove", { lc_id: this.rawInfoID });
     },
     deleteItem(index) {
-      window.trackManager.track("lc_on_element_delete");
       this.localAttributes.splice(index, 1);
     },
     copyBro() {

src/components/Code.vue

@@ -66,7 +66,6 @@ export default {
       }
     },
     download() {
-      window.trackManager.track("lc_on_code_download");
       let blob = new Blob([this.prettyCode], {
         type: "text/plain;charset=utf-8",
       });

src/utils/initRawComponent.js

@@ -35,12 +35,6 @@ export function initElement(element) {
             }${getSplitTag()}${JSON.stringify(raw)}`;
         event.dataTransfer.setData("text/plain", str);
 
-        try {
-            const tag = getRawComponentKey(raw);
-            window.trackManager.track("lc_on_start_drag", {
-                tag,
-            });
-        } catch (error) { }
         event.stopPropagation();
     });