clear: 替换ID生成工具

src/rawComponents/element/button.vue

@@ -27,15 +27,6 @@
               <el-button lc-mark type="warning" round lc_id="jkBcMy35Fs">警告按钮</el-button>
               <el-button lc-mark type="danger" round lc_id="NbMTA5OJFM">危险按钮</el-button>
           </div>
-          <div lc_id="dtI0sv1JGj">
-              <div class="demonstration-element" lc_id="/J59dGf5Ux">Button 图标按钮</div>
-              <el-button lc-mark icon="el-icon-search" circle lc_id="zKuPwfsOg/"></el-button>
-              <el-button lc-mark type="primary" icon="el-icon-edit" circle lc_id="TEEu3UmtSm"></el-button>
-              <el-button lc-mark type="success" icon="el-icon-check" circle lc_id="Gcle27RxOV"></el-button>
-              <el-button lc-mark type="info" icon="el-icon-message" circle lc_id="iYwWDqh7Cj"></el-button>
-              <el-button lc-mark type="warning" icon="el-icon-star-off" circle lc_id="c0jB+EoGdn"></el-button>
-              <el-button lc-mark type="danger" icon="el-icon-delete" circle lc_id="UOzcHamJuB"></el-button>
-          </div>
           <div lc_id="W3QyOQzQlk">
               <div class="demonstration-element" lc_id="smimycex4t">Button 文字按钮</div>
               <el-button lc-mark type="text" lc_id="t0TXebSot2">文字按钮</el-button>
@@ -55,19 +46,6 @@
                   <el-button type="primary" icon="el-icon-delete" lc_id="rp+8TRHMji"></el-button>
               </el-button-group>
           </div>
-          <div lc_id="k4SqegBXaV">
-              <div class="demonstration-element" lc_id="oFxF0LI+dm">Icon 图标</div>
-              <i class="icon el-icon-edit" lc-mark lc_id="a6mb6XhfMc"></i>
-              <i class="icon el-icon-share" lc-mark lc_id="oXLeLY13kj"></i>
-              <i class="icon el-icon-delete" lc-mark lc_id="s8KebZ+PS1"></i>
-              <i class="icon el-icon-info" lc-mark lc_id="WXq43J9XzJ"></i>
-              <i class="icon el-icon-eleme" lc-mark lc_id="4hI/AencQZ"></i>
-              <i class="icon el-icon-setting" lc-mark lc_id="511YTr9sW9"></i>
-              <i class="icon el-icon-video-camera-solid" lc-mark lc_id="/k6h8zYM65"></i>
-              <i class="icon el-icon-message-solid" lc-mark lc_id="blqIQB6Vhj"></i>
-              <i class="icon el-icon-s-data" lc-mark lc_id="gbq6whZDAm"></i>
-              <el-link href="https://element.eleme.cn/#/zh-CN/component/icon" style="margin-left: 10px;" class="el-icon-d-arrow-right" type="info" target="_blank" lc_id="t+j3VEq1No">查看所有图标</el-link>
-          </div>
           <div lc_id="D9dpNStd1t">
               <div class="demonstration-element" lc_id="MPmrgZvo8q">Link 文字链接</div>
               <el-link lc-mark lc_id="rtsG+iZyEB">默认链接</el-link>

src/rawComponents/element/index.vue

@@ -2,14 +2,14 @@
   <div lc_id="v91WiYWqPM" class="element-class">
     <lc-button lc_id="pclmcAeMlS"></lc-button>
     <lc-table lc_id="pclmcAeMlS"></lc-table>
-    <lc-form lc_id="ZyKgG7bSXm"></lc-form>
+    <!-- <lc-form lc_id="ZyKgG7bSXm"></lc-form>
     <lc-image></lc-image>
     <lc-form-base></lc-form-base>
     <lc-dialog></lc-dialog>
     <lc-icon lc_id="v31NGzWvBh"></lc-icon>
     <lc-layout lc_id="SBCyi1cZac"></lc-layout>
     <lc-container lc_id="ZyKgG7bSXm"></lc-container>
-    <lc-final></lc-final>
+    <lc-final></lc-final> -->
   </div>
 </template>
 <script>
@@ -24,7 +24,7 @@ import table from "./table";
 // import image from "./image";
 // import final from "./final";
 
-// import { deepLCEle } from "@/utils/initRawComponent";
+import { deepLCEle } from "@/utils/initRawComponent";
 
 export default {
   data() {
@@ -33,10 +33,8 @@ export default {
   mounted() {
     this.$emit('mounted');
     // 对所有拥有lc-mark的元素进行初始化
-    let countComponentCount = 0;
-    // deepLCEle(document.querySelector('.element-class'), () => {
-    //   countComponentCount++;
-    // });
+    deepLCEle(document.querySelector('.element-class'), () => {
+    });
   },
   methods: {},
   components: {

src/utils/common.js

@@ -1,5 +1,5 @@
 import isEqual from "lodash-es/isEqual";
-// import cryptoRandomString from "crypto-random-string";
+import { customAlphabet, nanoid } from 'nanoid';
 
 export function getRawComponentKey(__rawVueInfo__) {
     return Object.keys(__rawVueInfo__)[0];
@@ -24,6 +24,14 @@ export function isObject(obj) {
     return Object.prototype.toString.apply(obj) === "[object Object]";
 }
 
+/**
+ * @description 生成唯一ID
+ */
+ export function createUniqueId() {
+  const nanoid = customAlphabet('1234567890abcdefghijklmnopqrstuvwxyz', 10);
+  return nanoid();
+}
+
  /**
 * 遍历对象，添加ID
 * @param {*} jsonObj
@@ -50,7 +58,7 @@ export function ergodic(jsonObj) {
 
    // 添加ID
    if (!jsonObj["lc_id"]) {
-    //  jsonObj["lc_id"] = cryptoRandomString({ length: 10, type: "base64" });
+     jsonObj["lc_id"] = createUniqueId();
    }
  }
 }

src/utils/forCode.js

@@ -1,7 +1,6 @@
 
-import { isObject, isArray, getRawComponentKey } from '@/utils/common';
+import { isObject, isArray, getRawComponentKey, createUniqueId } from '@/utils/common';
 import presetAttribute from "../libs/presetAttribute";
-// const cryptoRandomString = require("crypto-random-string");
 
 // 将预生成的ID替换，否则当有两个组件挂在同一个树上时，后一个会将前一个的属性覆盖
 export function replaceRowID(codeObj, html) {
@@ -14,7 +13,7 @@ export function replaceRowID(codeObj, html) {
                     const element = obj[key];
                     if (key == "lc_id") {
                         const oldID = obj[key];
-                        const newID = 3333;
+                        const newID = createUniqueId();
                         newHtml = newHtml.replace(oldID, newID);
                         obj[key] = newID;
                     } else if (isObject(element)) {

src/utils/initRawComponent.js

@@ -1,5 +1,4 @@
 import { generateRawInfo, getSplitTag } from './forCode';
-import { getRawComponentKey } from './common';
 
 
 // 遍历DOM树，初始化lc-mark标记的元素