1
0
mirror of https://github.com/sahadev/vue-component-creater-ui.git synced 2025-06-07 13:44:06 +08:00

clear: 替换ID生成工具

This commit is contained in:
shangbin 2021-12-06 20:47:28 +08:00
parent e0a7222dae
commit 674064818d
7 changed files with 54 additions and 74 deletions

74
package-lock.json generated
View File

@ -4461,14 +4461,6 @@
"randomfill": "^1.0.3"
}
},
"crypto-random-string": {
"version": "3.3.1",
"resolved": "https://r.cnpmjs.org/crypto-random-string/download/crypto-random-string-3.3.1.tgz",
"integrity": "sha1-E87pTKyAAeSEJQFgjvd54O0I+C0=",
"requires": {
"type-fest": "^0.8.1"
}
},
"css": {
"version": "3.0.0",
"resolved": "https://r.cnpmjs.org/css/download/css-3.0.0.tgz",
@ -5436,7 +5428,7 @@
},
"esbuild-android-arm64": {
"version": "0.13.15",
"resolved": "https://r.cnpmjs.org/esbuild-android-arm64/download/esbuild-android-arm64-0.13.15.tgz",
"resolved": "https://rg.cnpmjs.org/esbuild-android-arm64/download/esbuild-android-arm64-0.13.15.tgz",
"integrity": "sha512-m602nft/XXeO8YQPUDVoHfjyRVPdPgjyyXOxZ44MK/agewFFkPa8tUo6lAzSWh5Ui5PB4KR9UIFTSBKh/RrCmg==",
"optional": true
},
@ -5448,91 +5440,91 @@
},
"esbuild-darwin-arm64": {
"version": "0.13.15",
"resolved": "https://r.cnpmjs.org/esbuild-darwin-arm64/download/esbuild-darwin-arm64-0.13.15.tgz",
"resolved": "https://rg.cnpmjs.org/esbuild-darwin-arm64/download/esbuild-darwin-arm64-0.13.15.tgz",
"integrity": "sha512-i1FZssTVxUqNlJ6cBTj5YQj4imWy3m49RZRnHhLpefFIh0To05ow9DTrXROTE1urGTQCloFUXTX8QfGJy1P8dQ==",
"optional": true
},
"esbuild-freebsd-64": {
"version": "0.13.15",
"resolved": "https://r.cnpmjs.org/esbuild-freebsd-64/download/esbuild-freebsd-64-0.13.15.tgz",
"resolved": "https://rg.cnpmjs.org/esbuild-freebsd-64/download/esbuild-freebsd-64-0.13.15.tgz",
"integrity": "sha512-G3dLBXUI6lC6Z09/x+WtXBXbOYQZ0E8TDBqvn7aMaOCzryJs8LyVXKY4CPnHFXZAbSwkCbqiPuSQ1+HhrNk7EA==",
"optional": true
},
"esbuild-freebsd-arm64": {
"version": "0.13.15",
"resolved": "https://r.cnpmjs.org/esbuild-freebsd-arm64/download/esbuild-freebsd-arm64-0.13.15.tgz",
"resolved": "https://rg.cnpmjs.org/esbuild-freebsd-arm64/download/esbuild-freebsd-arm64-0.13.15.tgz",
"integrity": "sha512-KJx0fzEDf1uhNOZQStV4ujg30WlnwqUASaGSFPhznLM/bbheu9HhqZ6mJJZM32lkyfGJikw0jg7v3S0oAvtvQQ==",
"optional": true
},
"esbuild-linux-32": {
"version": "0.13.15",
"resolved": "https://r.cnpmjs.org/esbuild-linux-32/download/esbuild-linux-32-0.13.15.tgz",
"resolved": "https://rg.cnpmjs.org/esbuild-linux-32/download/esbuild-linux-32-0.13.15.tgz",
"integrity": "sha512-ZvTBPk0YWCLMCXiFmD5EUtB30zIPvC5Itxz0mdTu/xZBbbHJftQgLWY49wEPSn2T/TxahYCRDWun5smRa0Tu+g==",
"optional": true
},
"esbuild-linux-64": {
"version": "0.13.15",
"resolved": "https://r.cnpmjs.org/esbuild-linux-64/download/esbuild-linux-64-0.13.15.tgz",
"resolved": "https://rg.cnpmjs.org/esbuild-linux-64/download/esbuild-linux-64-0.13.15.tgz",
"integrity": "sha512-eCKzkNSLywNeQTRBxJRQ0jxRCl2YWdMB3+PkWFo2BBQYC5mISLIVIjThNtn6HUNqua1pnvgP5xX0nHbZbPj5oA==",
"optional": true
},
"esbuild-linux-arm": {
"version": "0.13.15",
"resolved": "https://r.cnpmjs.org/esbuild-linux-arm/download/esbuild-linux-arm-0.13.15.tgz",
"resolved": "https://rg.cnpmjs.org/esbuild-linux-arm/download/esbuild-linux-arm-0.13.15.tgz",
"integrity": "sha512-wUHttDi/ol0tD8ZgUMDH8Ef7IbDX+/UsWJOXaAyTdkT7Yy9ZBqPg8bgB/Dn3CZ9SBpNieozrPRHm0BGww7W/jA==",
"optional": true
},
"esbuild-linux-arm64": {
"version": "0.13.15",
"resolved": "https://r.cnpmjs.org/esbuild-linux-arm64/download/esbuild-linux-arm64-0.13.15.tgz",
"resolved": "https://rg.cnpmjs.org/esbuild-linux-arm64/download/esbuild-linux-arm64-0.13.15.tgz",
"integrity": "sha512-bYpuUlN6qYU9slzr/ltyLTR9YTBS7qUDymO8SV7kjeNext61OdmqFAzuVZom+OLW1HPHseBfJ/JfdSlx8oTUoA==",
"optional": true
},
"esbuild-linux-mips64le": {
"version": "0.13.15",
"resolved": "https://r.cnpmjs.org/esbuild-linux-mips64le/download/esbuild-linux-mips64le-0.13.15.tgz",
"resolved": "https://rg.cnpmjs.org/esbuild-linux-mips64le/download/esbuild-linux-mips64le-0.13.15.tgz",
"integrity": "sha512-KlVjIG828uFPyJkO/8gKwy9RbXhCEUeFsCGOJBepUlpa7G8/SeZgncUEz/tOOUJTcWMTmFMtdd3GElGyAtbSWg==",
"optional": true
},
"esbuild-linux-ppc64le": {
"version": "0.13.15",
"resolved": "https://r.cnpmjs.org/esbuild-linux-ppc64le/download/esbuild-linux-ppc64le-0.13.15.tgz",
"resolved": "https://rg.cnpmjs.org/esbuild-linux-ppc64le/download/esbuild-linux-ppc64le-0.13.15.tgz",
"integrity": "sha512-h6gYF+OsaqEuBjeesTBtUPw0bmiDu7eAeuc2OEH9S6mV9/jPhPdhOWzdeshb0BskRZxPhxPOjqZ+/OqLcxQwEQ==",
"optional": true
},
"esbuild-netbsd-64": {
"version": "0.13.15",
"resolved": "https://r.cnpmjs.org/esbuild-netbsd-64/download/esbuild-netbsd-64-0.13.15.tgz",
"resolved": "https://rg.cnpmjs.org/esbuild-netbsd-64/download/esbuild-netbsd-64-0.13.15.tgz",
"integrity": "sha512-3+yE9emwoevLMyvu+iR3rsa+Xwhie7ZEHMGDQ6dkqP/ndFzRHkobHUKTe+NCApSqG5ce2z4rFu+NX/UHnxlh3w==",
"optional": true
},
"esbuild-openbsd-64": {
"version": "0.13.15",
"resolved": "https://r.cnpmjs.org/esbuild-openbsd-64/download/esbuild-openbsd-64-0.13.15.tgz",
"resolved": "https://rg.cnpmjs.org/esbuild-openbsd-64/download/esbuild-openbsd-64-0.13.15.tgz",
"integrity": "sha512-wTfvtwYJYAFL1fSs8yHIdf5GEE4NkbtbXtjLWjM3Cw8mmQKqsg8kTiqJ9NJQe5NX/5Qlo7Xd9r1yKMMkHllp5g==",
"optional": true
},
"esbuild-sunos-64": {
"version": "0.13.15",
"resolved": "https://r.cnpmjs.org/esbuild-sunos-64/download/esbuild-sunos-64-0.13.15.tgz",
"resolved": "https://rg.cnpmjs.org/esbuild-sunos-64/download/esbuild-sunos-64-0.13.15.tgz",
"integrity": "sha512-lbivT9Bx3t1iWWrSnGyBP9ODriEvWDRiweAs69vI+miJoeKwHWOComSRukttbuzjZ8r1q0mQJ8Z7yUsDJ3hKdw==",
"optional": true
},
"esbuild-windows-32": {
"version": "0.13.15",
"resolved": "https://r.cnpmjs.org/esbuild-windows-32/download/esbuild-windows-32-0.13.15.tgz",
"resolved": "https://rg.cnpmjs.org/esbuild-windows-32/download/esbuild-windows-32-0.13.15.tgz",
"integrity": "sha512-fDMEf2g3SsJ599MBr50cY5ve5lP1wyVwTe6aLJsM01KtxyKkB4UT+fc5MXQFn3RLrAIAZOG+tHC+yXObpSn7Nw==",
"optional": true
},
"esbuild-windows-64": {
"version": "0.13.15",
"resolved": "https://r.cnpmjs.org/esbuild-windows-64/download/esbuild-windows-64-0.13.15.tgz",
"resolved": "https://rg.cnpmjs.org/esbuild-windows-64/download/esbuild-windows-64-0.13.15.tgz",
"integrity": "sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ==",
"optional": true
},
"esbuild-windows-arm64": {
"version": "0.13.15",
"resolved": "https://r.cnpmjs.org/esbuild-windows-arm64/download/esbuild-windows-arm64-0.13.15.tgz",
"resolved": "https://rg.cnpmjs.org/esbuild-windows-arm64/download/esbuild-windows-arm64-0.13.15.tgz",
"integrity": "sha512-zzvyCVVpbwQQATaf3IG8mu1IwGEiDxKkYUdA4FpoCHi1KtPa13jeScYDjlW0Qh+ebWzpKfR2ZwvqAQkSWNcKjA==",
"optional": true
},
@ -11344,9 +11336,9 @@
}
},
"rollup": {
"version": "2.60.1",
"resolved": "https://r.cnpmjs.org/rollup/download/rollup-2.60.1.tgz",
"integrity": "sha512-akwfnpjY0rXEDSn1UTVfKXJhPsEBu+imi1gqBA1ZkHGydUnkV/fWCC90P7rDaLEW8KTwBcS1G3N4893Ndz+jwg==",
"version": "2.60.2",
"resolved": "https://rg.cnpmjs.org/rollup/download/rollup-2.60.2.tgz",
"integrity": "sha512-1Bgjpq61sPjgoZzuiDSGvbI1tD91giZABgjCQBKM5aYLnzjq52GoDuWVwT/cm/MCxCMPU8gqQvkj8doQ5C8Oqw==",
"requires": {
"fsevents": "~2.3.2"
}
@ -12771,7 +12763,8 @@
"type-fest": {
"version": "0.8.1",
"resolved": "https://r.cnpmjs.org/type-fest/download/type-fest-0.8.1.tgz",
"integrity": "sha1-CeJJ696FHTseSNJ8EFREZn8XuD0="
"integrity": "sha1-CeJJ696FHTseSNJ8EFREZn8XuD0=",
"dev": true
},
"type-is": {
"version": "1.6.18",
@ -13165,26 +13158,31 @@
}
},
"vite": {
"version": "2.6.14",
"resolved": "https://r.cnpmjs.org/vite/download/vite-2.6.14.tgz",
"integrity": "sha512-2HA9xGyi+EhY2MXo0+A2dRsqsAG3eFNEVIo12olkWhOmc8LfiM+eMdrXf+Ruje9gdXgvSqjLI9freec1RUM5EA==",
"version": "2.7.0-beta.10",
"resolved": "https://rg.cnpmjs.org/vite/download/vite-2.7.0-beta.10.tgz",
"integrity": "sha512-BiZ0SOnvNtB4Q5Y8YJDYf9O2h7Abld6wsT3SCEM5k4KJstMt1oZdO1M3+L3mhSu0mVJX5wHsyt9CEv5o1lz8vg==",
"requires": {
"esbuild": "^0.13.2",
"esbuild": "^0.13.12",
"fsevents": "~2.3.2",
"postcss": "^8.3.8",
"postcss": "^8.3.11",
"resolve": "^1.20.0",
"rollup": "^2.57.0"
"rollup": "^2.59.0"
},
"dependencies": {
"postcss": {
"version": "8.3.11",
"resolved": "https://r.cnpmjs.org/postcss/download/postcss-8.3.11.tgz",
"integrity": "sha1-w77KfqgRzV4cSj7G0udZnvH4+Fg=",
"version": "8.4.4",
"resolved": "https://r.cnpmjs.org/postcss/download/postcss-8.4.4.tgz",
"integrity": "sha512-joU6fBsN6EIer28Lj6GDFoC/5yOZzLCfn0zHAn/MYXI7aPt4m4hK5KC5ovEZXy+lnCjmYIbQWngvju2ddyEr8Q==",
"requires": {
"nanoid": "^3.1.30",
"picocolors": "^1.0.0",
"source-map-js": "^0.6.2"
"source-map-js": "^1.0.1"
}
},
"source-map-js": {
"version": "1.0.1",
"resolved": "https://r.cnpmjs.org/source-map-js/download/source-map-js-1.0.1.tgz",
"integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA=="
}
}
},

View File

@ -32,7 +32,6 @@
"codemirror-editor-vue3": "^0.2.4",
"copy-to-clipboard": "^3.3.1",
"core-js": "^3.6.4",
"crypto-random-string": "^3.3.0",
"css": "^3.0.0",
"element-plus": "^1.2.0-beta.3",
"escodegen": "^2.0.0",
@ -49,6 +48,7 @@
"lodash-es": "^4.17.21",
"md5": "^2.3.0",
"modern-normalize": "^1.0.0",
"nanoid": "^3.1.30",
"object-inspect": "^1.11.0",
"parse-package-name": "^0.1.0",
"prettier": "^2.4.0",

View File

@ -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>

View File

@ -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: {

View File

@ -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();
}
}
}

View File

@ -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)) {

View File

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