mirror of
https://github.com/sahadev/vue-component-creater-ui.git
synced 2025-06-06 13:04:05 +08:00
Merge branch 'vue3' into antd-vue3
This commit is contained in:
shangbin
commit
ae040e384d
10
README.md
10
README.md
@ -1,10 +1,10 @@
|
||||
# LCG-VCC
|
||||
# VCC
|
||||
|
||||
VCC是Low Code Generator中独立的Vue组件代码编辑器。可以独立运行。
|
||||
VCC(Vue Compontent Creator)是Low Code Generator中独立的Vue组件代码编辑器。可以独立运行。
|
||||
|
||||
**通过它可以通过拖拽快速完成Vue组件代码骨架的搭建。详见后文视频介绍链接。**
|
||||
|
||||
> 点击这里快速预览效果：[https://vcc.sahadev.tech/](https://vcc.sahadev.tech/)
|
||||
> 点击这里快速预览效果：[https://vcc.sahadev.tech/](https://vcc.sahadev.tech/) 当前已经升级至Vue3 + Vite。
|
||||
|
||||
#### 使用示例
|
||||
##### 示例1
|
||||
@ -101,9 +101,9 @@ new Vue({
|
||||
npm i
|
||||
```
|
||||
|
||||
再进行启动:
|
||||
再进行启动(Vite):
|
||||
```
|
||||
npm run serve
|
||||
npm run dev
|
||||
```
|
||||
|
||||
运行完成后，就可以访问[http://localhost:8008/](http://localhost:8008/)预览效果了.
|
||||
|
||||
23
index.html
Normal file
23
index.html
Normal file
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>拖拽式Vue组件代码生成编辑器(VCC)</title><!-- Place this tag in your head or just before your close body tag. -->
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</head>
|
||||
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div id="app" style="height:100%;"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1847
master_vue3.diff
Normal file
1847
master_vue3.diff
Normal file
File diff suppressed because it is too large
Load Diff
2040
package-lock.json
generated
2040
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
44
package.json
44
package.json
@ -9,7 +9,8 @@
|
||||
],
|
||||
"main": "./dist/vcc.umd.min.js",
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve --open --port 8008",
|
||||
"dev": "vite --port 8008",
|
||||
"serve": "vite --port 8008",
|
||||
"build:release": "vue-cli-service build",
|
||||
"build": "vue-cli-service build --report --target lib --name vcc './src/components-v2/VCC.vue' && node ./src/script/distClear.js",
|
||||
"build:win": "vue-cli-service build --report --target lib --name vcc ./src/components-v2/VCC.vue && node ./src/script/distClear.js",
|
||||
@ -21,42 +22,35 @@
|
||||
"debugParser": "node ./src/test/parserJsCode.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.11.5",
|
||||
"ant-design-vue": "^1.7.8",
|
||||
"@element-plus/icons": "0.0.11",
|
||||
"@vitejs/plugin-vue": "^1.10.0",
|
||||
"@vue/compiler-sfc": "^3.2.22",
|
||||
"axios": "^0.21.4",
|
||||
"codemirror-editor-vue3": "^0.2.4",
|
||||
"copy-to-clipboard": "^3.3.1",
|
||||
"core-js": "^3.6.4",
|
||||
"crypto-random-string": "^3.3.0",
|
||||
"crypto-random-string": "^3.3.1",
|
||||
"css": "^3.0.0",
|
||||
"element-ui": "^2.15.6",
|
||||
"element-plus": "^1.2.0-beta.3",
|
||||
"css-scoped": "^1.0.0",
|
||||
"escodegen": "^2.0.0",
|
||||
"espree": "^7.3.0",
|
||||
"eventemitter3": "^4.0.7",
|
||||
"fast-xml-parser": "^3.17.4",
|
||||
"file-saver": "^2.0.2",
|
||||
"fs-extra": "^9.0.1",
|
||||
"glob": "^7.1.6",
|
||||
"html2canvas": "^1.0.0-rc.7",
|
||||
"is-absolute-url": "^3.0.3",
|
||||
"keymaster": "^1.6.2",
|
||||
"lodash": "^4.17.20",
|
||||
"md5": "^2.3.0",
|
||||
"modern-normalize": "^1.0.0",
|
||||
"parse-package-name": "^0.1.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"nanoid": "^3.1.30",
|
||||
"prettier": "^2.4.0",
|
||||
"prismjs": "^1.20.0",
|
||||
"query-string": "^6.13.7",
|
||||
"register-service-worker": "^1.6.2",
|
||||
"split.js": "^1.6.2",
|
||||
"stringify-object": "^3.3.0",
|
||||
"vant": "^2.10.7",
|
||||
"view-design": "^4.3.2",
|
||||
"vue": "^2.6.14",
|
||||
"vue-codemirror": "^4.0.6",
|
||||
"vue-github-button": "^1.3.0",
|
||||
"vue-nestable": "^2.6.0",
|
||||
"vue-router": "^3.4.9",
|
||||
"vuex": "^3.1.2"
|
||||
"vite": "^2.6.14",
|
||||
"vue": "^3.2.22",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"vuex": "^4.0.2",
|
||||
"vue-template-compiler": "^2.6.14",
|
||||
"vue-github-button": "^1.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/generator": "^7.11.6",
|
||||
@ -69,11 +63,11 @@
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-import": "^2.20.1",
|
||||
"eslint-plugin-vue": "^6.1.2",
|
||||
"iview-loader": "^1.3.0",
|
||||
"lint-staged": "^9.5.0",
|
||||
"sass": "^1.25.0",
|
||||
"sass-loader": "^8.0.2",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
"is-obj": "^3.0.0",
|
||||
"is-regexp": "^3.0.0"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<div id="app" style="height:100%;"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -3,12 +3,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
// 以这样一段结构初始化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'),
|
||||
vcc: defineAsyncComponent(() => import('./components-v2/VCC.vue')),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -25,8 +25,8 @@
|
||||
Structure</el-link>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<github-button href="https://github.com/sahadev/vue-component-creater-ui" data-icon="octicon-star"
|
||||
data-show-count="true" aria-label="Star sahadev/vue-component-creater-ui on GitHub">Star</github-button>
|
||||
<a class="github-button" href="https://github.com/sahadev/vue-component-creater-ui" data-icon="octicon-star"
|
||||
data-show-count="true" aria-label="Star sahadev/vue-component-creater-ui on GitHub">Star</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
@ -47,11 +47,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GithubButton from 'vue-github-button'
|
||||
|
||||
export default {
|
||||
props: [],
|
||||
components: { GithubButton },
|
||||
components: { },
|
||||
data() {
|
||||
return {
|
||||
previewMode: false,
|
||||
@ -85,6 +83,10 @@ export default {
|
||||
onEditModeChange() {
|
||||
this.editMode = !this.editMode;
|
||||
this.$emit('onEditModeChange', this.editMode);
|
||||
|
||||
setTimeout(() => {
|
||||
this.editMode = true;
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
fillter: {},
|
||||
@ -103,9 +105,6 @@ export default {
|
||||
border-radius: 0px;
|
||||
align-content: center;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
> * {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.edit {
|
||||
|
||||
@ -16,8 +16,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<attribute-input :enableRemoveButton="true" class="attribute" @save="onSaveAttr" @remove="onRemove"
|
||||
ref="attributeInput" shortcutInitMode="hand" @codeRefresh="generateVueCode" style="display:none;"
|
||||
:__rawVueInfo__="currentEditRawInfo">
|
||||
ref="attributeInput" shortcutInitMode="hand" :__rawVueInfo__="currentEditRawInfo">
|
||||
</attribute-input>
|
||||
</div>
|
||||
</div>
|
||||
@ -38,22 +37,22 @@
|
||||
<el-tooltip effect="dark" content="查看实时代码" placement="top-start">
|
||||
<img class="round-icon" :src="iconCode" alt="" @click="codeDialogVisible = true">
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" content="清空当前编辑内容" placement="top-start">
|
||||
<el-popconfirm confirmButtonText="确认" cancelButtonText="点错了" icon="el-icon-info" iconColor="red"
|
||||
title="点我将清空所有编辑的内容, 确认吗?" @onConfirm="clear">
|
||||
<img slot="reference" class="round-icon" :src="iconClear" alt="">
|
||||
</el-popconfirm>
|
||||
</el-tooltip>
|
||||
<el-popconfirm confirmButtonText="确认" cancelButtonText="点错了" icon="el-icon-info" iconColor="red"
|
||||
title="点我将清空所有编辑的内容, 确认吗?" @confirm="clear">
|
||||
<template #reference>
|
||||
<img class="round-icon" :src="iconClear" alt="">
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<lc-code :rawCode="code" :codeDialogVisible.sync="codeDialogVisible">
|
||||
<lc-code :rawCode="code" v-model:codeDialogVisible="codeDialogVisible">
|
||||
</lc-code>
|
||||
<code-structure @save="onSaveAttr" @remove="onRemove" ref="codeStructure" :visible.sync="structureVisible"
|
||||
@codeRefresh="generateVueCode" @onLevelChange="onLevelChange">
|
||||
<code-structure @save="onSaveAttr" @remove="onRemove" ref="codeStructure" v-model="structureVisible"
|
||||
@reRender="render">
|
||||
</code-structure>
|
||||
<CodeEditor :codeDialogVisible.sync="jsDialogVisible" @saveJSCode="saveJSCode"></CodeEditor>
|
||||
<VueEditor :vueDialogVisible.sync="vueDialogVisible" @codeParseSucess="codeParseSucess"></VueEditor>
|
||||
<CodeEditor v-model:codeDialogVisible="jsDialogVisible" @saveJSCode="saveJSCode"></CodeEditor>
|
||||
<VueEditor v-model:vueDialogVisible="vueDialogVisible" @codeParseSucess="codeParseSucess"></VueEditor>
|
||||
</div>
|
||||
|
||||
<!-- 辅助定位线 -->
|
||||
@ -61,27 +60,33 @@
|
||||
<div class="x"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="fullScreen" v-if="!editMode">
|
||||
<div style="margin: 20px; font-weight: bold;">按下ESC退出预览模式</div>
|
||||
<div id="mountedEle"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import { splitInit } from "../libs/split-init";
|
||||
// 这个文件不可以进行懒加载，它会导致运行时不可点击的行为，具体原因未知
|
||||
// // 这个文件不可以进行懒加载，它会导致运行时不可点击的行为，具体原因未知
|
||||
import { MainPanelProvider } from "../libs/main-panel";
|
||||
import { initContainerForLine } from "@/utils/lineHelper";
|
||||
|
||||
const keymaster = require('keymaster');
|
||||
import keymaster from "keymaster"
|
||||
|
||||
export default {
|
||||
name: "vcc",
|
||||
props: ['initCodeEntity'],
|
||||
emits: ['updateCodeEntity'],
|
||||
components: {
|
||||
RawComponents: () => import("../components/RawComponents"),
|
||||
ToolsBar: () => import("./ToolsBar"),
|
||||
AttributeInput: () => import("../components/AttributeInput"),
|
||||
CodeStructure: () => import("../components/CodeStructure"),
|
||||
"lc-code": () => import("../components/Code"),
|
||||
CodeEditor: () => import('../components/JSCodeEditorDialog.vue'),
|
||||
VueEditor: () => import('../components/VueCodeParseDialog.vue')
|
||||
RawComponents: defineAsyncComponent(() => import("@/components/RawComponents.vue")),
|
||||
ToolsBar: defineAsyncComponent(() => import("./ToolsBar")),
|
||||
AttributeInput: defineAsyncComponent(() => import("../components/AttributeInput")),
|
||||
CodeStructure: defineAsyncComponent(() => import("../components/CodeStructure")),
|
||||
"lc-code": defineAsyncComponent(() => import("../components/Code")),
|
||||
CodeEditor: defineAsyncComponent(() => import('../components/JSCodeEditorDialog.vue')),
|
||||
VueEditor: defineAsyncComponent(() => import('../components/VueCodeParseDialog.vue'))
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -94,14 +99,14 @@ export default {
|
||||
iconCode: ("https://static.imonkey.xueersi.com/download/vcc-resource/icon/code-working-outline.svg"),
|
||||
iconClear: ("https://static.imonkey.xueersi.com/download/vcc-resource/icon/trash-outline.svg"),
|
||||
|
||||
viewMode: false
|
||||
editMode: true
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
currentEditRawInfo(newValue) {
|
||||
const attributeContainter = document.querySelector(".attribute");
|
||||
if (newValue) {
|
||||
attributeContainter.style = "right:10px;";
|
||||
attributeContainter.style = "right:10px; display:block;";
|
||||
this.$refs['attributeInput'].onShow();
|
||||
} else {
|
||||
attributeContainter.style = "right: calc(-300px - 20px); display:none;";
|
||||
@ -139,6 +144,13 @@ export default {
|
||||
this.undo();
|
||||
return false
|
||||
});
|
||||
|
||||
|
||||
keymaster('esc', () => {
|
||||
this.editMode = true;
|
||||
this.mainPanelProvider.setEditMode(true);
|
||||
return false
|
||||
});
|
||||
},
|
||||
|
||||
init() {
|
||||
@ -205,7 +217,11 @@ export default {
|
||||
},
|
||||
|
||||
onEditModeChange(newValue) {
|
||||
this.mainPanelProvider.setEditMode(newValue);
|
||||
this.editMode = newValue;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.mainPanelProvider.setEditMode(newValue, document.querySelector("#mountedEle"));
|
||||
})
|
||||
},
|
||||
|
||||
renderCode() {
|
||||
@ -220,11 +236,6 @@ export default {
|
||||
this.mainPanelProvider.saveAttribute(resultList, lc_id);
|
||||
},
|
||||
|
||||
onLevelChange(removeID, movePath) {
|
||||
this.mainPanelProvider.onLevelChange(removeID, movePath);
|
||||
},
|
||||
|
||||
generateVueCode() { },
|
||||
onRemove({ lc_id }) {
|
||||
this.mainPanelProvider.remove(lc_id);
|
||||
},
|
||||
@ -240,10 +251,20 @@ export default {
|
||||
this.mainPanelProvider.saveJSCode(code);
|
||||
},
|
||||
|
||||
/**
|
||||
* 二级编辑解析
|
||||
*/
|
||||
codeParseSucess(vueCodeEntity) {
|
||||
this.mainPanelProvider.render(vueCodeEntity);
|
||||
},
|
||||
|
||||
/**
|
||||
* 渲染指定结构
|
||||
*/
|
||||
render(codeEntity) {
|
||||
this.mainPanelProvider.render(codeEntity);
|
||||
},
|
||||
|
||||
help() {
|
||||
window.open('/doc')
|
||||
}
|
||||
@ -365,6 +386,21 @@ export default {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
#fullScreen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#mountedEle {
|
||||
border: 1px dashed rgb(126, 126, 128);
|
||||
border-radius: 10px;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- 以下的样式作用于渲染容器中-->
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<el-card class="attribute-container">
|
||||
|
||||
<center>
|
||||
<div style="text-align: center;">
|
||||
<el-switch v-model="editMode" active-text="自由编辑" inactive-text="约束编辑" active-color="#13ce66"
|
||||
inactive-color="#13ce66">
|
||||
</el-switch>
|
||||
</center>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 20px;">
|
||||
<div name="1" v-show="!editMode">
|
||||
@ -13,8 +13,8 @@
|
||||
<div class="item" v-for="(item, index) in localAttributes" :key="index">
|
||||
<el-input v-model="item.key" :placeholder="'key' + index" class="half-width"></el-input>
|
||||
<div class="split">:</div>
|
||||
<el-input v-model="item.value" :placeholder="'value' + index" class="half-width"></el-input>
|
||||
<i class="el-icon-minus" @click="deleteItem(index)"></i>
|
||||
<el-input v-model="item.value" :placeholder="'value' + index" class="half-width" style="flex-grow: 3;"></el-input>
|
||||
<el-icon @click="deleteItem(index)" style="margin-left: 5px;"><minus /></el-icon>
|
||||
</div>
|
||||
|
||||
<div class="quick-add-root">
|
||||
@ -44,28 +44,31 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<center style="margin-top: 10px;">
|
||||
<div style="margin-top: 10px;text-align:center;">
|
||||
<el-tooltip class="item" effect="dark" content="新增属性 ctrl+a" placement="bottom">
|
||||
<el-button type="primary" class="center" @click="createNew" icon="el-icon-circle-plus-outline" circle>
|
||||
<el-button type="primary" class="center" @click="createNew" circle>
|
||||
<el-icon><circle-plus /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="保存属性 ctrl+s" placement="bottom">
|
||||
<el-button type="success" class="center" @click="save" icon="el-icon-refresh" circle></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="移除该组件 ctrl+d" placement="bottom">
|
||||
<el-button v-if="enableRemoveButton" type="danger" class="center" icon="el-icon-delete" @click="remove" circle>
|
||||
<el-button type="success" class="center" @click="save" circle>
|
||||
<el-icon><refresh /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="复制一个兄弟组件 ctrl+c" placement="bottom">
|
||||
<el-button v-if="enableBroButton" type="primary" class="center" icon="el-icon-copy-document" @click="copyBro"
|
||||
circle>
|
||||
<el-tooltip v-if="enableRemoveButton" class="item" effect="dark" content="移除该组件 ctrl+d" placement="bottom">
|
||||
<el-button type="danger" class="center" @click="remove" circle>
|
||||
<el-icon><delete /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
|
||||
<center>
|
||||
<el-tooltip v-if="enableBroButton" class="item" effect="dark" content="复制一个兄弟组件 ctrl+c" placement="bottom">
|
||||
<el-button type="primary" class="center" @click="copyBro" circle>
|
||||
<el-icon><document-copy /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<div style="text-algin: center;">
|
||||
<span class="shortcut-tip">支持快捷键操作</span>
|
||||
</center>
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-card>
|
||||
</template>
|
||||
@ -73,7 +76,7 @@
|
||||
<script>
|
||||
import { getRawComponentKey, getRawComponentContent } from "@/utils/common";
|
||||
import { brotherEleEnum, copyBroCode } from "@/libs/bro-ele-config";
|
||||
const keymaster = require('keymaster');
|
||||
import keymaster from "keymaster"
|
||||
|
||||
export default {
|
||||
props: ['__rawVueInfo__', 'enableRemoveButton', 'shortcutInitMode'],// __rawVueInfo__为当前编辑的原始代码对象, shortcutInitMode快捷键的初始化方式
|
||||
@ -117,8 +120,6 @@ export default {
|
||||
|
||||
initShortcut() {
|
||||
console.log(`init by mode: ${this.shortcutInitMode}`)
|
||||
|
||||
|
||||
keymaster('⌘+a, ctrl+a', () => {
|
||||
if (this.enable) {
|
||||
this.createNew();
|
||||
@ -159,9 +160,7 @@ export default {
|
||||
this.localAttributes.push({ key: "", value: "" });
|
||||
},
|
||||
save() {
|
||||
|
||||
try {
|
||||
|
||||
let resultList = [];
|
||||
if (!this.editMode) {
|
||||
resultList = this.localAttributes.filter((item) => {
|
||||
@ -198,7 +197,7 @@ export default {
|
||||
},
|
||||
copyBro() {
|
||||
copyBroCode(this.__rawVueInfo__);
|
||||
this.$emit('codeRefresh');
|
||||
this.$store.commit('onDragEnd');
|
||||
},
|
||||
onShow() {
|
||||
// 这种方式适用于常规模式下的初始化，因为这个实例初始化后不会被销毁，一直常驻内存。但又不能受到其它实例销毁时的影响，所以需要明确的再次初始化。
|
||||
@ -271,7 +270,7 @@ export default {
|
||||
|
||||
.half-width {
|
||||
width: 0%;
|
||||
flex-grow: 1;
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
.center {
|
||||
|
||||
@ -1,36 +1,36 @@
|
||||
<template>
|
||||
<el-dialog title="代码预览" :visible.sync="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose"
|
||||
:center=true>
|
||||
<pre style="max-height: 60vh;">
|
||||
<code v-html="formatCode"></code>
|
||||
</pre>
|
||||
<div>
|
||||
<center style="color: #666; font-size: 12px;">使用代码前请确认相应的组件库已集成至项目</center>
|
||||
</div>
|
||||
<span slot="footer">
|
||||
|
||||
<el-tooltip effect="dark" content="拷贝" placement="left">
|
||||
<img class="round-icon" :src="iconCopy" alt="" @click="copyCheck">
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" content="下载" placement="right">
|
||||
<img class="round-icon" :src="iconDownload" alt="" @click="download">
|
||||
</el-tooltip>
|
||||
|
||||
</span>
|
||||
<el-dialog title="代码预览" v-model="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose" :center=true>
|
||||
<!-- 这里加v-if是因为CodeEditor内部不支持watch数据监测 -->
|
||||
<CodeEditor v-if="codeDialogVisible" style="max-height: 65vh;" ref="codeEditor" :initCode="prettyCode" mode="text/html"></CodeEditor>
|
||||
<div style="color: #666; font-size: 12px; text-align:center; margin: 5px;">使用代码前请确认相应的组件库已集成至项目</div>
|
||||
<template v-slot:footer>
|
||||
<span>
|
||||
<el-tooltip effect="dark" content="拷贝" placement="left">
|
||||
<img class="round-icon" :src="iconCopy" alt="" @click="copyCheck">
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" content="下载" placement="right">
|
||||
<img class="round-icon" :src="iconDownload" alt="" @click="download">
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import './prism.css'
|
||||
import Prism from "prismjs";
|
||||
import prettier from "prettier/standalone";
|
||||
import parserHtml from "prettier/parser-html";
|
||||
import copy from 'copy-to-clipboard';
|
||||
import { saveAs } from "file-saver";
|
||||
|
||||
import CodeEditor from './CodeEditor.vue'
|
||||
|
||||
export default {
|
||||
props: ['rawCode', 'codeDialogVisible'],
|
||||
components: {
|
||||
CodeEditor
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
@ -95,10 +95,6 @@ export default {
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
formatCode() {
|
||||
return Prism.highlight(this.prettyCode, Prism.languages.markup, "html");
|
||||
}
|
||||
},
|
||||
fillter: {},
|
||||
};
|
||||
@ -107,7 +103,7 @@ export default {
|
||||
<style scoped>
|
||||
/* 在此自动生成 */
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
:v-deep(.el-dialog__body) {
|
||||
padding: 0 30px !important;
|
||||
}
|
||||
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="codemirror">
|
||||
<codemirror v-model="code" :options="cmOption" @cursorActivity="onCmCursorActivity" @ready="onCmReady"
|
||||
<codemirror v-model:value="code" :options="cmOption" @cursorActivity="onCmCursorActivity" @ready="onCmReady"
|
||||
@focus="onCmFocus" @blur="onCmBlur" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { codemirror } from 'vue-codemirror'
|
||||
import Codemirror from "codemirror-editor-vue3";
|
||||
|
||||
// base style
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
@ -50,20 +50,23 @@ import 'codemirror/addon/fold/indent-fold.js'
|
||||
import 'codemirror/addon/fold/markdown-fold.js'
|
||||
import 'codemirror/addon/fold/xml-fold.js'
|
||||
|
||||
require(['axios'], axios => {
|
||||
self.axios = axios.create({
|
||||
baseURL: '',
|
||||
timeout: 1000,
|
||||
});
|
||||
});
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
props: ['initCode', 'mode'],
|
||||
name: 'code-editor',
|
||||
title: 'Mode: text/x-vue & Theme: monokai',
|
||||
components: {
|
||||
codemirror
|
||||
Codemirror
|
||||
},
|
||||
|
||||
created() {
|
||||
self.axios = axios.create({
|
||||
baseURL: '',
|
||||
timeout: 1000,
|
||||
});
|
||||
},
|
||||
|
||||
computed: {
|
||||
code: {
|
||||
get() {
|
||||
@ -74,6 +77,12 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
initCode() {
|
||||
this.codeStore = this.initCode;
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
codeStore: this.initCode,
|
||||
|
||||
@ -1,125 +0,0 @@
|
||||
<template>
|
||||
<preview :value="preview" class="panel"></preview>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Preview from '@/components/Preview';
|
||||
import { parseComponent } from 'vue-template-compiler/browser';
|
||||
import getImports from '@/utils/get-imports';
|
||||
import getPkgs from '@/utils/get-pkgs';
|
||||
import isAbsouteUrl from 'is-absolute-url';
|
||||
import * as params from '@/utils/params';
|
||||
|
||||
export default {
|
||||
props: ['code'],
|
||||
|
||||
components: {
|
||||
Preview
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
preview: '',
|
||||
}),
|
||||
|
||||
watch: {
|
||||
code: {
|
||||
handler: function (newValue) {
|
||||
this.compile(newValue);
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
async compile(code) {
|
||||
|
||||
if (!code) {
|
||||
return;
|
||||
}
|
||||
const imports = [];
|
||||
const { template, script, styles, customBlocks } = parseComponent(code);
|
||||
let config;
|
||||
|
||||
if ((config = customBlocks.find(n => n.type === 'config'))) {
|
||||
params.clear();
|
||||
params.parse(config.content);
|
||||
}
|
||||
|
||||
let compiled;
|
||||
const pkgs = [];
|
||||
let scriptContent = 'exports = { default: {} }';
|
||||
|
||||
if (script) {
|
||||
try {
|
||||
compiled = window.Babel.transform(script.content, {
|
||||
presets: ['es2015', 'es2016', 'es2017', 'stage-0'],
|
||||
plugins: [[getImports, { imports }]]
|
||||
}).code;
|
||||
} catch (e) {
|
||||
this.preview = `<pre style="color: red">${e.message}</pre>`;
|
||||
return;
|
||||
}
|
||||
scriptContent = await getPkgs(compiled, imports, pkgs);
|
||||
}
|
||||
|
||||
const heads = this.genHeads();
|
||||
const scripts = [];
|
||||
|
||||
pkgs.forEach(pkg => {
|
||||
scripts.push(
|
||||
`<script src=//packd.now.sh/${pkg.module}${pkg.path}?name=${pkg.name
|
||||
}><\/script>`
|
||||
);
|
||||
});
|
||||
|
||||
styles.forEach(style => {
|
||||
heads.push(`<style>${style.content}</style>`);
|
||||
});
|
||||
|
||||
scripts.push(`
|
||||
<script>
|
||||
var exports = {};
|
||||
${scriptContent}
|
||||
var component = exports.default;
|
||||
component.template = component.template || ${JSON.stringify(
|
||||
template.content
|
||||
)}
|
||||
|
||||
new Vue(component).$mount('#app')
|
||||
<\/script>`);
|
||||
|
||||
this.preview = {
|
||||
head: heads.join('\n'),
|
||||
body: '<div lc_id="app"></div>' + scripts.join('\n')
|
||||
};
|
||||
},
|
||||
|
||||
genHeads() {
|
||||
let heads = [];
|
||||
|
||||
const { pkgs, css } = params.get();
|
||||
|
||||
return [].concat(
|
||||
[]
|
||||
.concat(pkgs)
|
||||
.map(
|
||||
pkg =>
|
||||
`<script src="${isAbsouteUrl(pkg) ? '' : prefix}${pkg}"><\/script>`
|
||||
),
|
||||
css.map(
|
||||
item =>
|
||||
`<link rel=stylesheet href="${isAbsouteUrl(item) ? '' : prefix
|
||||
}${item}">`
|
||||
)
|
||||
);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="modern-normalize"></style>
|
||||
<style scoped>
|
||||
.panel {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
@ -1,37 +1,24 @@
|
||||
<template>
|
||||
<el-drawer :visible.sync="drawer" :with-header="false" size="70%" direction="btt">
|
||||
<el-drawer v-model="drawer" :with-header="false" size="70%" direction="btt">
|
||||
<div class="container">
|
||||
|
||||
<center>组件结构检视图
|
||||
<div style="text-align: center;">组件结构检视图
|
||||
<br>
|
||||
<span style="font-size:12px;">Components
|
||||
Structure</span>
|
||||
</center>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="20" style="height:0px;flex-grow:1;">
|
||||
<el-col :span="16" style="height: 100%;">
|
||||
<div style="overflow: scroll;height:100%; margin: 0 20px;padding: 10px;">
|
||||
|
||||
<vue-nestable v-model="treeData" @change="onLevelChange">
|
||||
<template slot-scope="{ item }">
|
||||
<vue-nestable-handle :item="item">
|
||||
<i class="el-icon-rank icon-s"></i>
|
||||
</vue-nestable-handle>
|
||||
|
||||
<span @click="onNodeClick(item)">{{ item.text }}</span>
|
||||
</template>
|
||||
|
||||
<div slot="placeholder">
|
||||
<b>The editor is empty.</b>
|
||||
</div>
|
||||
</vue-nestable>
|
||||
<nested-draggable :data="treeData" />
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<attribute-input ref="attributeInput" :enableRemoveButton="true" v-if="currentEditRawInfo && drawer"
|
||||
@save="onSaveAttr" shortcutInitMode="auto" @remove="onRemove" @codeRefresh="codeRefresh"
|
||||
:__rawVueInfo__="currentEditRawInfo">
|
||||
<attribute-input ref="attributeInput" :enableRemoveButton="true" v-if="currentEditRawInfo" @save="onSaveAttr"
|
||||
shortcutInitMode="auto" @remove="onRemove" :__rawVueInfo__="currentEditRawInfo">
|
||||
</attribute-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -41,80 +28,33 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import "./halower-tree.min.css";
|
||||
import "@/assets/nestable.css"
|
||||
import { isObject, getRawComponentKey, getRawComponentContent } from "@/utils/common";
|
||||
import { VueNestable, VueNestableHandle } from 'vue-nestable';
|
||||
import nestedDraggable from './nested.vue'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
export default {
|
||||
props: ['visible'],
|
||||
emits: ['onLevelChange', 'remove', 'save', 'update:visible', 'reRender'],
|
||||
components: {
|
||||
AttributeInput: resolve => { require(["./AttributeInput"], resolve) },
|
||||
VueNestable,
|
||||
VueNestableHandle
|
||||
AttributeInput: defineAsyncComponent(() => import("@/components/AttributeInput.vue")),
|
||||
nestedDraggable
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
// 在此自动生成
|
||||
treeData: [],
|
||||
currentEditRawInfo: null
|
||||
};
|
||||
},
|
||||
beforeCreate() { },
|
||||
created() { },
|
||||
beforeMount() { },
|
||||
mounted() { },
|
||||
mounted() {
|
||||
},
|
||||
beforeUpdate() { },
|
||||
updated() { },
|
||||
destoryed() { },
|
||||
methods: {
|
||||
// 在此自动生成
|
||||
request() {
|
||||
// 网络请求，可选
|
||||
},
|
||||
codeRefresh() {
|
||||
this.$emit('codeRefresh');
|
||||
},
|
||||
onLevelChange(value, options) {
|
||||
this.$emit('onLevelChange', value.id, options.pathTo);
|
||||
},
|
||||
|
||||
convertStructure(rawInfo) {
|
||||
const title = getRawComponentKey(rawInfo);
|
||||
const object = rawInfo[title];
|
||||
const children = [];
|
||||
if (isObject(object)) {
|
||||
for (const key in object) {
|
||||
if (object.hasOwnProperty(key)) {
|
||||
if (key === '__children') {
|
||||
const element = object[key];
|
||||
|
||||
element.forEach(item => {
|
||||
const temp = this.convertStructure(item);
|
||||
temp && children.push(temp);
|
||||
})
|
||||
} else if (isObject(object[key])) {
|
||||
// 组成一个新的结构，适配只有一个子节点的数据结构
|
||||
const __obj = {};
|
||||
__obj[key] = object[key];
|
||||
const child = this.convertStructure(__obj);
|
||||
child && children.push(child);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
text: title,
|
||||
expanded: true,
|
||||
children: children,
|
||||
rawInfo: rawInfo,
|
||||
id: getRawComponentContent(rawInfo).lc_id
|
||||
}
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
onNodeClick(nodeInfo) {
|
||||
this.currentEditRawInfo = nodeInfo.rawInfo;
|
||||
@ -130,12 +70,17 @@ export default {
|
||||
},
|
||||
|
||||
updateCode(codeRawInfo) {
|
||||
this.treeData = [this.convertStructure(codeRawInfo)];
|
||||
this._codeRawInfo = codeRawInfo;
|
||||
const content = getRawComponentContent(codeRawInfo);
|
||||
const children = content.__children;
|
||||
this.treeData = children;
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
canInitShortcut(newValue) {
|
||||
renderCount(){
|
||||
// 这里利用了vuedraggable v-model的特性，它会更改对象本身的引用
|
||||
this.$emit('reRender', this._codeRawInfo);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -147,8 +92,21 @@ export default {
|
||||
this.$emit('update:visible', false);
|
||||
}
|
||||
},
|
||||
|
||||
renderCount(){
|
||||
return this.$store.state.renderCount;
|
||||
},
|
||||
|
||||
canInitShortcut() {
|
||||
return this.currentEditRawInfo !== null && this.drawer;
|
||||
},
|
||||
currentEditRawInfo() {
|
||||
if (this.$store.state.currentEditComp) {
|
||||
const vccData = this.$store.state.currentEditComp.vccData;
|
||||
return window.tree[vccData.lc_id];
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
fillter: {},
|
||||
@ -162,7 +120,7 @@ center {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-drawer__body {
|
||||
:v-deep(.el-drawer__body) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-dialog title="JS逻辑编辑" :visible.sync="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose"
|
||||
<el-dialog title="JS逻辑编辑" v-model="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose"
|
||||
:center=true>
|
||||
<CodeEditor style="max-height: 65vh;" ref="codeEditor" :initCode="code" mode="text/javascript"></CodeEditor>
|
||||
|
||||
@ -18,6 +18,7 @@ import CodeEditor from './CodeEditor.vue'
|
||||
|
||||
export default {
|
||||
props: ['codeDialogVisible'],
|
||||
emits: ['saveJSCode', 'update:codeDialogVisible'],
|
||||
components: {
|
||||
CodeEditor
|
||||
},
|
||||
@ -117,7 +118,7 @@ export default {
|
||||
<style scoped>
|
||||
/* 在此自动生成 */
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
:v-deep(.el-dialog__body) {
|
||||
padding: 0 30px !important;
|
||||
}
|
||||
</style>
|
||||
@ -19,26 +19,28 @@
|
||||
<div>
|
||||
<el-dropdown @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
<i ref="help" class="el-icon-question" style="font-size:22px;color:#4dba87;"></i>
|
||||
<el-icon style="font-size:22px;color:#4dba87;"><question-filled /></el-icon>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item icon="el-icon-circle-check">基础组件数: {{ componentUnitNum }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-document" command="lcg">LCG平台</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-document" command="help">说明文档</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-chat-line-round" command="chat">在线沟通</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item icon="el-icon-circle-check">基础组件数: {{ componentUnitNum }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-document" command="lcg">LCG平台</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-document" command="help">说明文档</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-chat-line-round" command="chat">在线沟通</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav v-if="currentSelectBrand.titleArray && currentSelectBrand.titleArray.length > 0">
|
||||
<center style="margin-bottom:10px;">
|
||||
<div style="margin-bottom:10px;text-align:center;">
|
||||
<div style="padding:5px;font-size:12px;color:grey;">快速查找需要的</div>
|
||||
<el-autocomplete class="inline-input" v-model="componentSearch" :fetch-suggestions="querySearch" size="mini"
|
||||
placeholder="请输入..." @select="handleSelect"></el-autocomplete>
|
||||
</center>
|
||||
</div>
|
||||
<div class="dismiss-scroll">
|
||||
<div v-for="(item, index) in currentSelectBrand.titleArray" :key="item.title" class="second-nav"
|
||||
:class="{'active':currentSelectBrand.selectIndex === index}" @click="selectSubnav(currentSelectBrand, index)">
|
||||
@ -103,7 +105,7 @@ export default {
|
||||
titleArray: [], // 快速索引标题，默认为空，VCC会自动按照className搜集快速索引标题。
|
||||
},],
|
||||
|
||||
currentIndex: 1
|
||||
currentIndex: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -272,7 +274,7 @@ nav {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
::v-deep .el-submenu__title {
|
||||
:v-deep(.el-submenu__title) {
|
||||
padding: 0 15px !important;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-dialog title="Vue二次编辑" :visible.sync="vueDialogVisible" width="70%" top="10vh" :before-close="handleClose"
|
||||
<el-dialog title="Vue二次编辑" v-model="vueDialogVisible" width="70%" top="10vh" :before-close="handleClose"
|
||||
:center=true>
|
||||
<CodeEditor style="max-height: 65vh;" ref="codeEditor" :initCode="code" mode="text/html"></CodeEditor>
|
||||
|
||||
@ -20,6 +20,7 @@ import { ergodic, findAObject } from '../utils/common';
|
||||
|
||||
export default {
|
||||
props: ['vueDialogVisible'],
|
||||
emits: ['codeParseSucess', 'update:vueDialogVisible'],
|
||||
components: {
|
||||
CodeEditor
|
||||
},
|
||||
@ -88,7 +89,7 @@ export default {
|
||||
<style scoped>
|
||||
/* 在此自动生成 */
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
:v-deep(.el-dialog__body) {
|
||||
padding: 0 30px !important;
|
||||
}
|
||||
</style>
|
||||
577
src/components/halower-tree.min.css
vendored
577
src/components/halower-tree.min.css
vendored
File diff suppressed because one or more lines are too long
89
src/components/nested.vue
Normal file
89
src/components/nested.vue
Normal file
@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<draggable class="dragArea" tag="ul" :list="data" @start="onStartDrag" @choose="onClick"
|
||||
@end="onEndDrag">
|
||||
<template #item="{ element }">
|
||||
<li class="itemArea">
|
||||
<p>{{ getRawComponentKey(element) }}</p>
|
||||
<nested-draggable :data="getRawComponentContent(element).__children" />
|
||||
</li>
|
||||
</template>
|
||||
</draggable>
|
||||
</template>
|
||||
<script>
|
||||
import draggable from "vuedraggable";
|
||||
import { getRawComponentKey, getRawComponentContent } from "@/utils/common";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
required: true,
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
getRawComponentKey,
|
||||
getRawComponentContent,
|
||||
onStartDrag(event) {
|
||||
event.item.classList.add("is-dragging");
|
||||
},
|
||||
onClick(event) {
|
||||
if(this.$store.state.currentEditComp){
|
||||
this.$store.state.currentEditComp.item.classList.remove("is-dragging");
|
||||
}
|
||||
|
||||
event.item.classList.add("is-dragging");
|
||||
|
||||
event.vccData = getRawComponentContent(this.data[event.oldIndex]);
|
||||
this.$store.commit('storeCurrentEditComp', event);
|
||||
},
|
||||
onEndDrag(event) {
|
||||
event.item.classList.remove("is-dragging");
|
||||
|
||||
this.$store.commit('onDragEnd');
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
draggable
|
||||
},
|
||||
name: "nested-draggable"
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.dragArea {
|
||||
min-height: 20px;
|
||||
border: 1px dashed rgb(126, 126, 128);
|
||||
border-radius: 5px;
|
||||
padding-inline-start: 30px;
|
||||
padding-right: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.itemArea {
|
||||
min-height: 20px;
|
||||
border: 1px dashed rgb(126, 126, 128);
|
||||
padding-right: 2px;
|
||||
padding-bottom: 2px;
|
||||
border-radius: 5px;
|
||||
padding-inline-start: 10px;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
|
||||
.is-dragging {
|
||||
background-color: rgba(106, 127, 233, 0.274);
|
||||
border: 1px dashed rgb(73, 100, 241);
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
@ -1,15 +1,16 @@
|
||||
//该文件会遍历Object，获取关键的class,事件,data, 最终拼装为一个完整的SFC文件
|
||||
|
||||
import stringifyObject from 'stringify-object';
|
||||
import _ from 'lodash';
|
||||
import stringifyObject from '@/libs/stringify-object'
|
||||
import merge from 'lodash-es/merge';
|
||||
import cloneDeep from 'lodash-es/cloneDeep';
|
||||
import prettier from 'prettier/standalone.js';
|
||||
import parserBabel from 'prettier/parser-babel.js';
|
||||
|
||||
// 导出组件模板文件
|
||||
|
||||
function vueTemplate () {
|
||||
return `
|
||||
<template> <!--在此自动生成--> </template>
|
||||
return `<template>
|
||||
<!--在此自动生成-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default // $script
|
||||
@ -422,14 +423,6 @@ const scriptTemplate = `{
|
||||
fillter: {},
|
||||
};`;
|
||||
|
||||
const { merge, cloneDeep } = _;
|
||||
|
||||
const rawAdd = Set.prototype.add;
|
||||
Set.prototype.add = function (value) {
|
||||
if (typeof value === "string" && checkKeyword(value))
|
||||
rawAdd.apply(this, arguments);
|
||||
};
|
||||
|
||||
function checkKeyword(value) {
|
||||
return value != "true" && value != "false";
|
||||
}
|
||||
@ -499,7 +492,7 @@ function findVarFormExpression(expression) {
|
||||
}
|
||||
}
|
||||
|
||||
class CodeGenerator {
|
||||
export class CodeGenerator {
|
||||
|
||||
constructor(options = {}) {
|
||||
this.options = options;
|
||||
@ -629,23 +622,23 @@ class CodeGenerator {
|
||||
classes.forEach((item) => {
|
||||
// 处理多个空字符串
|
||||
if (!item) return;
|
||||
this.classSet.add(item);
|
||||
this.classSet.addeee(item);
|
||||
});
|
||||
} else if (/^v-on/g.test(key) || /^@/g.test(key)) {
|
||||
// 匹配@,v-on
|
||||
if (getVarName(value)) {
|
||||
this.methodSet.add(value);
|
||||
this.methodSet.addeee(value);
|
||||
}
|
||||
} else if (/^v-/g.test(key) || /^:+/g.test(key)) {
|
||||
// 优先使Method消费，因为有的:也是method
|
||||
if (this.options.checkIsMethodDirectives && this.options.checkIsMethodDirectives(key)) {
|
||||
value = getVarName(value);
|
||||
value && this.methodSet.add(value);
|
||||
value && this.methodSet.addeee(value);
|
||||
} else
|
||||
// 业务侧可能会全部消费/^:+/g.test(key)
|
||||
if (this.options.checkIsDataDirectives && this.options.checkIsDataDirectives(key)) {
|
||||
value = getVarName(value);
|
||||
value && this.dataSet.add(value);
|
||||
value && this.dataSet.addeee(value);
|
||||
} else {
|
||||
this.options.unSupportedKey && this.options.unSupportedKey(key, value);
|
||||
}
|
||||
@ -655,7 +648,7 @@ class CodeGenerator {
|
||||
// 用于匹配v-text {{}}
|
||||
const temp = findVarFormExpression(value);
|
||||
temp.forEach((element) => {
|
||||
this.dataSet.add(element);
|
||||
this.dataSet.addeee(element);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
@ -693,4 +686,15 @@ class CodeGenerator {
|
||||
}
|
||||
}
|
||||
|
||||
export { CodeGenerator };
|
||||
|
||||
const rawAdd = Set.prototype.add;
|
||||
try {
|
||||
//为何不能给add赋值？且没有报错？
|
||||
Set.prototype.addeee = function (value) {
|
||||
if (typeof value === "string" && checkKeyword(value))
|
||||
rawAdd.apply(this, arguments);
|
||||
};
|
||||
// 经验证可以赋值，而代码会直接跳转至最后一行
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
@ -1,6 +1,5 @@
|
||||
//该文件用于解析HTML，输出为Object对象
|
||||
|
||||
const htmlparser2 = require("htmlparser2");
|
||||
import { Parser } from "htmlparser2"
|
||||
|
||||
function getNodeContent(node) {
|
||||
return node[Object.keys(node)[0]];
|
||||
@ -36,7 +35,7 @@ function parseHtml(htmlData) {
|
||||
let lastAccessStack = [root];
|
||||
|
||||
// options docment: https://github.com/fb55/htmlparser2/wiki/Parser-options
|
||||
const parser = new htmlparser2.Parser({
|
||||
const parser = new Parser({
|
||||
onopentag(tagname, attributes) {
|
||||
const newNode = generateNewNode(tagname, attributes);
|
||||
lastAccessStack.push(newNode);
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
// 代码生成对象工厂，每次初始化需要获取一个新的实例，所以工厂方法模式最为适用
|
||||
import { CodeGenerator } from "./bundle-core-esm";
|
||||
import { checkIsDataDirectives, checkIsMethodDirectives } from '@/libs/directiveCheck';
|
||||
|
||||
const stringifyObject = require("stringify-object");
|
||||
import stringifyObject from '@/libs/stringify-object'
|
||||
|
||||
export function createNewCodeGenerator() {
|
||||
return new CodeGenerator({
|
||||
|
||||
@ -9,8 +9,9 @@ import { parseComponent } from 'vue-template-compiler/browser';
|
||||
import { merge, insertPresetAttribute, getSplitTag, replaceRowID, updateLinkTree, findCodeElemNode, findRawVueInfo, removeAllID } from "@/utils/forCode";
|
||||
import { getRawComponentContent, getRawComponentKey, isObject } from '@/utils/common';
|
||||
import { createNewCodeGenerator } from "@/libs/code-generator-factory";
|
||||
const EventEmitter = require('eventemitter3');
|
||||
const { cloneDeep } = require('lodash');
|
||||
import EventEmitter from 'eventemitter3'
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import scope from 'css-scoped';
|
||||
|
||||
/**
|
||||
* 主控制面板辅助类，用于代码的生成与绘制
|
||||
@ -44,8 +45,6 @@ export class MainPanelProvider {
|
||||
|
||||
console.groupCollapsed('---> for code generator warn <---');
|
||||
|
||||
const readyForMoutedElement = this.createMountedElement();
|
||||
|
||||
// 生成原始代码
|
||||
let code = this.codeGenerator.outputVueCodeWithJsonObj(rawDataStructure);
|
||||
|
||||
@ -61,26 +60,28 @@ export class MainPanelProvider {
|
||||
|
||||
const { template, script, styles, customBlocks } = parseComponent(code);
|
||||
|
||||
this.loadStyle(styles);
|
||||
|
||||
let newScript = script.content.replace(/\s*export default\s*/, "")
|
||||
|
||||
const componentOptions = (new Function(`return ${newScript}`))();
|
||||
|
||||
const res = Vue.compile(template.content);
|
||||
|
||||
componentOptions.render = function () {
|
||||
const rootVNode = res.render.apply(this, arguments);
|
||||
return rootVNode;
|
||||
};
|
||||
componentOptions.staticRenderFns = res.staticRenderFns;
|
||||
|
||||
// 渲染当前代码
|
||||
new Vue(componentOptions).$mount(readyForMoutedElement);
|
||||
|
||||
// 拍平数据结构
|
||||
this.editMode && this.flatDataStructure(rawDataStructure);
|
||||
|
||||
// 开启编辑模式
|
||||
this.editMode && this.enableEditMode();
|
||||
componentOptions.template = template.content;
|
||||
|
||||
if (this.editMode) {
|
||||
// 渲染当前代码
|
||||
const readyForMoutedElement = this.createMountedElement();
|
||||
createBaseApp(componentOptions).mount(readyForMoutedElement);
|
||||
|
||||
// 拍平数据结构
|
||||
this.flatDataStructure(rawDataStructure);
|
||||
|
||||
// 开启编辑模式
|
||||
this.enableEditMode();
|
||||
} else {
|
||||
// 渲染当前代码
|
||||
createBaseApp(componentOptions).mount(this.mountedEle);
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
@ -94,11 +95,27 @@ export class MainPanelProvider {
|
||||
return this;
|
||||
}
|
||||
|
||||
setEditMode(editMode) {
|
||||
setEditMode(editMode, mountedEle) {
|
||||
this.editMode = editMode;
|
||||
this.mountedEle = mountedEle;
|
||||
this.reRender();
|
||||
}
|
||||
|
||||
loadStyle(styles) {
|
||||
if (styles.length > 0) {
|
||||
const scopedStyle = styles[0];
|
||||
|
||||
this.styleNodeName = `cssScoped${Date.now()}`;
|
||||
|
||||
const scopedCss = scope(scopedStyle.content.replace(/::v-deep/g, ''), this.styleNodeName);
|
||||
const styleNode = document.createElement('style');
|
||||
styleNode.innerText = scopedCss;
|
||||
|
||||
// 这个会导致越来越卡
|
||||
document.head.appendChild(styleNode);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化代码编译
|
||||
*/
|
||||
@ -122,16 +139,11 @@ export class MainPanelProvider {
|
||||
*/
|
||||
createMountedElement() {
|
||||
const renderControlPanel = this.getControlPanelRoot();
|
||||
const child = document.createElement('div');
|
||||
|
||||
// 清空子节点
|
||||
while (renderControlPanel.firstChild) {
|
||||
renderControlPanel.removeChild(renderControlPanel.firstChild)
|
||||
if (this.styleNodeName) {
|
||||
renderControlPanel.setAttribute('class', this.styleNodeName);
|
||||
}
|
||||
|
||||
renderControlPanel.appendChild(child);
|
||||
|
||||
return child;
|
||||
return renderControlPanel;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
24
src/libs/store.js
Normal file
24
src/libs/store.js
Normal file
@ -0,0 +1,24 @@
|
||||
import { createStore } from 'vuex'
|
||||
|
||||
const store = createStore({
|
||||
state() {
|
||||
return {
|
||||
count: 0,
|
||||
currentEditComp: null,
|
||||
renderCount: 0
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
increment(state) {
|
||||
state.count++
|
||||
},
|
||||
storeCurrentEditComp(state, newComp) {
|
||||
state.currentEditComp = newComp;
|
||||
},
|
||||
onDragEnd(state) {
|
||||
state.renderCount++;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
globalApp.use(store);
|
||||
139
src/libs/stringify-object.js
Normal file
139
src/libs/stringify-object.js
Normal file
@ -0,0 +1,139 @@
|
||||
import isRegexp from 'is-regexp';
|
||||
import isObject from 'is-obj';
|
||||
|
||||
const getOwnEnumPropSymbols = (object) => Object
|
||||
.getOwnPropertySymbols(object)
|
||||
.filter((keySymbol) => Object.prototype.propertyIsEnumerable.call(object, keySymbol));
|
||||
|
||||
export default function stringifyObject(input, options, pad) {
|
||||
const seen = [];
|
||||
|
||||
return (function stringify(input, options = {}, pad = '') {
|
||||
const indent = options.indent || '\t';
|
||||
|
||||
let tokens;
|
||||
if (options.inlineCharacterLimit === undefined) {
|
||||
tokens = {
|
||||
newline: '\n',
|
||||
newlineOrSpace: '\n',
|
||||
pad,
|
||||
indent: pad + indent,
|
||||
};
|
||||
} else {
|
||||
tokens = {
|
||||
newline: '@@__STRINGIFY_OBJECT_NEW_LINE__@@',
|
||||
newlineOrSpace: '@@__STRINGIFY_OBJECT_NEW_LINE_OR_SPACE__@@',
|
||||
pad: '@@__STRINGIFY_OBJECT_PAD__@@',
|
||||
indent: '@@__STRINGIFY_OBJECT_INDENT__@@',
|
||||
};
|
||||
}
|
||||
|
||||
const expandWhiteSpace = string => {
|
||||
if (options.inlineCharacterLimit === undefined) {
|
||||
return string;
|
||||
}
|
||||
|
||||
const oneLined = string
|
||||
.replace(new RegExp(tokens.newline, 'g'), '')
|
||||
.replace(new RegExp(tokens.newlineOrSpace, 'g'), ' ')
|
||||
.replace(new RegExp(tokens.pad + '|' + tokens.indent, 'g'), '');
|
||||
|
||||
if (oneLined.length <= options.inlineCharacterLimit) {
|
||||
return oneLined;
|
||||
}
|
||||
|
||||
return string
|
||||
.replace(new RegExp(tokens.newline + '|' + tokens.newlineOrSpace, 'g'), '\n')
|
||||
.replace(new RegExp(tokens.pad, 'g'), pad)
|
||||
.replace(new RegExp(tokens.indent, 'g'), pad + indent);
|
||||
};
|
||||
|
||||
if (seen.includes(input)) {
|
||||
return '"[Circular]"';
|
||||
}
|
||||
|
||||
if (
|
||||
input === null
|
||||
|| input === undefined
|
||||
|| typeof input === 'number'
|
||||
|| typeof input === 'boolean'
|
||||
|| typeof input === 'function'
|
||||
|| typeof input === 'symbol'
|
||||
|| isRegexp(input)
|
||||
) {
|
||||
return String(input);
|
||||
}
|
||||
|
||||
if (input instanceof Date) {
|
||||
return `new Date('${input.toISOString()}')`;
|
||||
}
|
||||
|
||||
if (Array.isArray(input)) {
|
||||
if (input.length === 0) {
|
||||
return '[]';
|
||||
}
|
||||
|
||||
seen.push(input);
|
||||
|
||||
const returnValue = '[' + tokens.newline + input.map((element, i) => {
|
||||
const eol = input.length - 1 === i ? tokens.newline : ',' + tokens.newlineOrSpace;
|
||||
|
||||
let value = stringify(element, options, pad + indent);
|
||||
if (options.transform) {
|
||||
value = options.transform(input, i, value);
|
||||
}
|
||||
|
||||
return tokens.indent + value + eol;
|
||||
}).join('') + tokens.pad + ']';
|
||||
|
||||
seen.pop();
|
||||
|
||||
return expandWhiteSpace(returnValue);
|
||||
}
|
||||
|
||||
if (isObject(input)) {
|
||||
let objectKeys = [
|
||||
...Object.keys(input),
|
||||
...getOwnEnumPropSymbols(input),
|
||||
];
|
||||
|
||||
if (options.filter) {
|
||||
objectKeys = objectKeys.filter(element => options.filter(input, element));
|
||||
}
|
||||
|
||||
if (objectKeys.length === 0) {
|
||||
return '{}';
|
||||
}
|
||||
|
||||
seen.push(input);
|
||||
|
||||
const returnValue = '{' + tokens.newline + objectKeys.map((element, i) => {
|
||||
const eol = objectKeys.length - 1 === i ? tokens.newline : ',' + tokens.newlineOrSpace;
|
||||
const isSymbol = typeof element === 'symbol';
|
||||
const isClassic = !isSymbol && /^[a-z$_][$\w]*$/i.test(element);
|
||||
const key = isSymbol || isClassic ? element : stringify(element, options);
|
||||
|
||||
let value = stringify(input[element], options, pad + indent);
|
||||
if (options.transform) {
|
||||
value = options.transform(input, element, value);
|
||||
}
|
||||
|
||||
return tokens.indent + String(key) + ': ' + value + eol;
|
||||
}).join('') + tokens.pad + '}';
|
||||
|
||||
seen.pop();
|
||||
|
||||
return expandWhiteSpace(returnValue);
|
||||
}
|
||||
|
||||
input = String(input).replace(/[\r\n]/g, x => x === '\n' ? '\\n' : '\\r');
|
||||
|
||||
if (options.singleQuotes === false) {
|
||||
input = input.replace(/"/g, '\\"');
|
||||
return `"${input}"`;
|
||||
}
|
||||
|
||||
input = input.replace(/\\?'/g, '\\\'');
|
||||
return `'${input}'`;
|
||||
})(input, options, pad);
|
||||
}
|
||||
37
src/main.js
37
src/main.js
@ -1,19 +1,30 @@
|
||||
import Vue from "vue";
|
||||
import ElementUI from "element-ui";
|
||||
import "element-ui/lib/theme-chalk/index.css";
|
||||
import { createApp } from "vue";
|
||||
import ElementPlus from "element-plus";
|
||||
import { QuestionFilled, CirclePlus, DocumentCopy, Delete, Refresh, Minus } from "@element-plus/icons";
|
||||
|
||||
import AntdUI from "ant-design-vue";
|
||||
import "ant-design-vue/dist/antd.css";
|
||||
import "element-plus/dist/index.css";
|
||||
import APP from "./App.vue";
|
||||
|
||||
Vue.use(ElementUI);
|
||||
Vue.use(AntdUI);
|
||||
function createBaseApp(renderComponent = {}) {
|
||||
const app = createApp(renderComponent);
|
||||
app.use(ElementPlus);
|
||||
|
||||
app.component("question-filled", QuestionFilled);
|
||||
app.component("circle-plus", CirclePlus);
|
||||
app.component("refresh", Refresh);
|
||||
app.component("delete", Delete);
|
||||
app.component("document-copy", DocumentCopy);
|
||||
app.component("minus", Minus);
|
||||
|
||||
return app;
|
||||
}
|
||||
|
||||
const globalApp = createBaseApp(APP)
|
||||
globalApp.mount("#app");
|
||||
|
||||
// 内部需要同样配置的全局Vue
|
||||
self.Vue = Vue;
|
||||
self.createBaseApp = createBaseApp;
|
||||
self.globalApp = globalApp; // 内部需要使用Vuex
|
||||
|
||||
new Vue({
|
||||
el: "#app",
|
||||
render: (h) => h(APP),
|
||||
});
|
||||
|
||||
|
||||
import("@/libs/store.js");
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
export default {".container":"",".row":"margin-bottom: 10px;",".icon":"margin-right: 10px; margin-left: 10px; font-size: 18px;",".el-header":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-footer":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-aside":"background-color: #d3dce6; color: #333; text-align: center; line-height: 200px;",".el-main":"background-color: #e9eef3; color: #333; text-align: center; line-height: 160px;","body > .el-container":"margin-bottom: 40px;",".el-container:nth-child(5) .el-aside":"line-height: 260px;",".el-container:nth-child(6) .el-aside":"line-height: 260px;",".el-container:nth-child(7) .el-aside":"line-height: 320px;",".avatar-uploader ::v-deep .el-upload":"border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden;",".avatar-uploader .el-upload:hover":"border-color: #409eff;",".avatar-uploader-icon":"font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center;",".avatar":"width: 178px; height: 178px; display: block;",".demo-border":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","[label-lc-mark]":"display: inline-block; width: 200px; border: 1px grey dashed; min-height: 1rem; border-radius: 5px;",".item":"margin-top: 10px; margin-right: 40px;",".el-carousel__item h3":"color: #475669; font-size: 14px; opacity: 0.75; line-height: 150px; margin: 0;",".el-carousel__item:nth-child(2n)":"background-color: #99a9bf;",".el-carousel__item:nth-child(2n + 1)":"background-color: #d3dce6;",".el-row":"margin-bottom: 20px;",".el-row:last-child":"margin-bottom: 0;",".el-col":"border-radius: 4px;",".bg-purple-dark":"background: #99a9bf;",".bg-purple":"background: #d3dce6 !important;",".bg-purple-light":"background: #e5e9f2;",".grid-content":"border-radius: 4px; min-height: 36px;",".row-bg":"padding: 10px 0; background-color: #f9fafc;",".icon1":"margin-left: 10px; margin-right: 10px;",".layout":"border: 1px solid #d7dde4; background: #f5f7f9; position: relative; border-radius: 4px; overflow: hidden;",".layout-logo":"width: 100px; height: 30px; background: #5b6270; border-radius: 3px; float: left; position: relative; top: 15px; left: 20px;",".layout-nav":"width: 420px; margin: 0 auto; margin-right: 20px;",".demonstration":"font-size: 12px; color: #1f2f3d; padding: 10px 0 0 0;",".title":"width: 120px;",".demonstration-raw":"padding: 10px 0;","[div-lc-mark]":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","button + button":"margin-top: 10px;",".colon":"display: inline-block; margin: 0 4px; color: #ee0a24;",".block":"display: inline-block; width: 22px; color: #fff; font-size: 12px; text-align: center; background-color: #ee0a24;",".my-swipe .van-swipe-item":"color: #fff; font-size: 20px; line-height: 150px; text-align: center; background-color: #39a9ed;",".icon-c":"margin-left: 10px; margin-right: 10px;","::v-deep .van-tabbar--fixed":"position: initial;","::v-deep .van-address-list__bottom":"position: initial;","::v-deep .van-goods-action":"position: initial;","::v-deep .van-submit-bar":"position: initial;"}
|
||||
export default {".container":"",".row":"margin-bottom: 10px;",".icon":"margin-right: 10px; margin-left: 10px; font-size: 18px;",".el-header":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-footer":"background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;",".el-aside":"background-color: #d3dce6; color: #333; text-align: center; line-height: 200px;",".el-main":"background-color: #e9eef3; color: #333; text-align: center; line-height: 160px;","body > .el-container":"margin-bottom: 40px;",".el-container:nth-child(5) .el-aside":"line-height: 260px;",".el-container:nth-child(6) .el-aside":"line-height: 260px;",".el-container:nth-child(7) .el-aside":"line-height: 320px;",".avatar-uploader ::v-deep .el-upload":"border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden;",".avatar-uploader .el-upload:hover":"border-color: #409eff;",".avatar-uploader-icon":"font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center;",".avatar":"width: 178px; height: 178px; display: block;",".demo-border":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","[label-lc-mark]":"display: inline-block; width: 200px; border: 1px grey dashed; min-height: 1rem; border-radius: 5px;",".item":"margin-top: 10px; margin-right: 40px;",".el-carousel__item h3":"color: #475669; font-size: 14px; opacity: 0.75; line-height: 150px; margin: 0;",".el-carousel__item:nth-child(2n)":"background-color: #99a9bf;",".el-carousel__item:nth-child(2n + 1)":"background-color: #d3dce6;",".el-row":"margin-bottom: 20px;",".el-row:last-child":"margin-bottom: 0;",".el-col":"border-radius: 4px;",".bg-purple-dark":"background: #99a9bf;",".bg-purple":"background: #d3dce6 !important;",".bg-purple-light":"background: #e5e9f2;",".grid-content":"border-radius: 4px; min-height: 36px;",".row-bg":"padding: 10px 0; background-color: #f9fafc;",".icon1":"margin-left: 10px; margin-right: 10px;",".layout":"border: 1px solid #d7dde4; background: #f5f7f9; position: relative; border-radius: 4px; overflow: hidden;",".layout-logo":"width: 100px; height: 30px; background: #5b6270; border-radius: 3px; float: left; position: relative; top: 15px; left: 20px;",".layout-nav":"width: 420px; margin: 0 auto; margin-right: 20px;",".demonstration":"font-size: 12px; color: #1f2f3d; padding: 10px 0 0 0;",".title":"width: 120px;",".demonstration-raw":"padding: 10px 0;","[div-lc-mark]":"border: 1px grey dashed; min-height: 1rem; border-radius: 5px;","button + button":"margin-top: 10px;",".colon":"display: inline-block; margin: 0 4px; color: #ee0a24;",".block":"display: inline-block; width: 22px; color: #fff; font-size: 12px; text-align: center; background-color: #ee0a24;",".my-swipe .van-swipe-item":"color: #fff; font-size: 20px; line-height: 150px; text-align: center; background-color: #39a9ed;",".icon-c":"margin-left: 10px; margin-right: 10px;","::v-deep .van-tabbar--fixed":"position: initial;","::v-deep .van-address-list__bottom":"position: initial;","::v-deep .van-goods-action":"position: initial;","::v-deep .van-submit-bar":"position: initial;"}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,94 +1,72 @@
|
||||
<template lc_id="31lOXuZFW0">
|
||||
<div lc_id="Sqe/e9T+dn">
|
||||
<div lc_id="pzMg3o1GpZ">
|
||||
<div class="demonstration-element" lc_id="CSFGeU2yIh">Button 默认按钮</div>
|
||||
<el-button lc-mark lc_id="It6s7MEKEj">默认按钮</el-button>
|
||||
<el-button lc-mark type="primary" lc_id="gySZODvPq4">主要按钮</el-button>
|
||||
<el-button lc-mark type="success" lc_id="C8H4RxH9J4">成功按钮</el-button>
|
||||
<el-button lc-mark type="info" lc_id="hyRMogHx7g">信息按钮</el-button>
|
||||
<el-button lc-mark type="warning" lc_id="+1ZoY42NKV">警告按钮</el-button>
|
||||
<el-button lc-mark type="danger" lc_id="//OdfFfDNy">危险按钮</el-button>
|
||||
<template lc_id="h951btrjIz">
|
||||
<div lc_id="Wys3+gAG6o">
|
||||
<div lc_id="xz+q4JsE0H">
|
||||
<div class="demonstration-element" lc_id="QOAgJcuNgl">Button 默认按钮</div>
|
||||
<el-button lc-mark lc_id="CsCNd5VsAG">默认按钮</el-button>
|
||||
<el-button lc-mark type="primary" lc_id="86aZgUKBRW">主要按钮</el-button>
|
||||
<el-button lc-mark type="success" lc_id="i9rRR1vGUu">成功按钮</el-button>
|
||||
<el-button lc-mark type="info" lc_id="KNdblHt7v/">信息按钮</el-button>
|
||||
<el-button lc-mark type="warning" lc_id="6xzwRUzCpX">警告按钮</el-button>
|
||||
<el-button lc-mark type="danger" lc_id="n/gRbf1hnb">危险按钮</el-button>
|
||||
</div>
|
||||
<div lc_id="dXKZZTSE6f">
|
||||
<div class="demonstration-element" lc_id="AEqE9Y2JJx">Button 朴素按钮</div>
|
||||
<el-button lc-mark plain lc_id="xpIy9dyoLu">朴素按钮</el-button>
|
||||
<el-button lc-mark type="primary" plain lc_id="uuXSeas9Rn">主要按钮</el-button>
|
||||
<el-button lc-mark type="success" plain lc_id="yT/mnDTNZC">成功按钮</el-button>
|
||||
<el-button lc-mark type="info" plain lc_id="MkQKv/edLT">信息按钮</el-button>
|
||||
<el-button lc-mark type="warning" plain lc_id="1nay6UmyQn">警告按钮</el-button>
|
||||
<el-button lc-mark type="danger" plain lc_id="4dXLsK63dR">危险按钮</el-button>
|
||||
<div lc_id="aS+4+fs63u">
|
||||
<div class="demonstration-element" lc_id="eZqzsVXDsz">Button 朴素按钮</div>
|
||||
<el-button lc-mark plain lc_id="BC7OoDacJj">朴素按钮</el-button>
|
||||
<el-button lc-mark type="primary" plain lc_id="bWC9CeWjjY">主要按钮</el-button>
|
||||
<el-button lc-mark type="success" plain lc_id="sVBJspZDuU">成功按钮</el-button>
|
||||
<el-button lc-mark type="info" plain lc_id="YUbh6jGrjF">信息按钮</el-button>
|
||||
<el-button lc-mark type="warning" plain lc_id="LOykTx4Sf0">警告按钮</el-button>
|
||||
<el-button lc-mark type="danger" plain lc_id="0hBjU/hwbY">危险按钮</el-button>
|
||||
</div>
|
||||
<div lc_id="BrDirV0DiW">
|
||||
<div class="demonstration-element" lc_id="Ibx7/Oljm1">Button 圆角按钮</div>
|
||||
<el-button lc-mark round lc_id="vnhZCSYTKi">圆角按钮</el-button>
|
||||
<el-button lc-mark type="primary" round lc_id="4G/Xt4oA/W">主要按钮</el-button>
|
||||
<el-button lc-mark type="success" round lc_id="21dRU+4EP6">成功按钮</el-button>
|
||||
<el-button lc-mark type="info" round lc_id="t/e3BMImqQ">信息按钮</el-button>
|
||||
<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 lc_id="TIyAo1YWH2">
|
||||
<div class="demonstration-element" lc_id="ci4hr/TXbi">Button 圆角按钮</div>
|
||||
<el-button lc-mark round lc_id="JGOxzRnIcl">圆角按钮</el-button>
|
||||
<el-button lc-mark type="primary" round lc_id="GOolXgPQ8i">主要按钮</el-button>
|
||||
<el-button lc-mark type="success" round lc_id="QpK7RbxSP1">成功按钮</el-button>
|
||||
<el-button lc-mark type="info" round lc_id="rPNRcyrUBY">信息按钮</el-button>
|
||||
<el-button lc-mark type="warning" round lc_id="MCBR6sxh+2">警告按钮</el-button>
|
||||
<el-button lc-mark type="danger" round lc_id="KCAVqthQwo">危险按钮</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 lc_id="RdvVbD8tRt">
|
||||
<div class="demonstration-element" lc_id="MCe1tz7lec">Button 文字按钮</div>
|
||||
<el-button lc-mark type="text" lc_id="VzeBeEyMRU">文字按钮</el-button>
|
||||
<el-button lc-mark type="text" disabled lc_id="gGBAHuLrE2">文字按钮</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>
|
||||
<el-button lc-mark type="text" disabled lc_id="5YRlNpmVjb">文字按钮</el-button>
|
||||
</div>
|
||||
<div lc_id="80RD4YeUsn">
|
||||
<div class="demonstration-element" lc_id="5MhACg2EuC">Button 按钮组</div>
|
||||
<el-button-group lc-mark lc_id="xEZPfVC0Vk">
|
||||
<el-button type="primary" icon="el-icon-arrow-left" lc_id="SAyGGlazMe">上一页</el-button>
|
||||
<el-button type="primary" lc_id="xOLpFj/kpi">
|
||||
下一页 <i class="el-icon-arrow-right el-icon--right" lc_id="SMXHxa2XXa"></i>
|
||||
<div lc_id="fiJ0b+a2C7">
|
||||
<div class="demonstration-element" lc_id="NadQOxXAQD">Button 按钮组</div>
|
||||
<el-button-group lc-mark lc_id="zPylslsF8c">
|
||||
<el-button type="primary" icon="el-icon-arrow-left" lc_id="YcgENB34wv">上一页</el-button>
|
||||
<el-button type="primary" lc_id="7ZtWxMoRg5">
|
||||
下一页 <i class="el-icon-arrow-right el-icon--right" lc_id="nhJ1UtAuzb"></i>
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
<el-button-group lc-mark lc_id="bgUv4uEWun">
|
||||
<el-button type="primary" icon="el-icon-edit" lc_id="ZZsmy9U270"></el-button>
|
||||
<el-button type="primary" icon="el-icon-share" lc_id="ufr8jjdziC"></el-button>
|
||||
<el-button type="primary" icon="el-icon-delete" lc_id="rp+8TRHMji"></el-button>
|
||||
<el-button-group lc-mark lc_id="8NQc5ZELeT">
|
||||
<el-button type="primary" icon="el-icon-edit" lc_id="rBWkIADCIC"></el-button>
|
||||
<el-button type="primary" icon="el-icon-share" lc_id="aZ8b7GZRtx"></el-button>
|
||||
<el-button type="primary" icon="el-icon-delete" lc_id="6htBQsITGM"></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 lc_id="x1oSPpUpOu">
|
||||
<div class="demonstration-element" lc_id="uVL6JgP+Au">Link 文字链接</div>
|
||||
<el-link lc-mark lc_id="dsEhJ0nNvP">默认链接</el-link>
|
||||
<el-link lc-mark type="primary" lc_id="b0ksqSWND7">主要链接</el-link>
|
||||
<el-link lc-mark type="success" lc_id="n0JFscE5rV">成功链接</el-link>
|
||||
<el-link lc-mark type="warning" lc_id="xZ3qu7QdEE">警告链接</el-link>
|
||||
<el-link lc-mark type="danger" lc_id="DxB6pyqUDJ">危险链接</el-link>
|
||||
<el-link lc-mark type="info" lc_id="oWXSle5p3a">信息链接</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>
|
||||
<el-link lc-mark type="primary" lc_id="qk6VNOTl/3">主要链接</el-link>
|
||||
<el-link lc-mark type="success" lc_id="q91ZwmwpjV">成功链接</el-link>
|
||||
<el-link lc-mark type="warning" lc_id="EJaR3vy19z">警告链接</el-link>
|
||||
<el-link lc-mark type="danger" lc_id="2ixn7o9E7E">危险链接</el-link>
|
||||
<el-link lc-mark type="info" lc_id="FWgv1C2y/2">信息链接</el-link>
|
||||
<div lc_id="XE215BO7ZG">
|
||||
<div class="demonstration-element" lc_id="dIss2fOIh1">Tag 标签</div>
|
||||
<el-tag lc-mark lc_id="srSB/cYw2J">标签一</el-tag>
|
||||
<el-tag lc-mark type="success" lc_id="LRJZ1ZP4ZH">标签二</el-tag>
|
||||
<el-tag lc-mark type="info" lc_id="B+b33TM6FV">标签三</el-tag>
|
||||
<el-tag lc-mark type="warning" lc_id="VRus6unUUj">标签四</el-tag>
|
||||
<el-tag lc-mark type="danger" lc_id="7MofqTTFPE">标签五</el-tag>
|
||||
</div>
|
||||
<div lc_id="/barCioNfE">
|
||||
<div class="demonstration-element" lc_id="PLG2KvKH8y">Tag 标签</div>
|
||||
<el-tag lc-mark lc_id="U/u261/Smt">标签一</el-tag>
|
||||
<el-tag lc-mark type="success" lc_id="IDATiLqGk9">标签二</el-tag>
|
||||
<el-tag lc-mark type="info" lc_id="0D0MewaqKv">标签三</el-tag>
|
||||
<el-tag lc-mark type="warning" lc_id="vAdw0BIcX+">标签四</el-tag>
|
||||
<el-tag lc-mark type="danger" lc_id="nbAcfgii7o">标签五</el-tag>
|
||||
</div>
|
||||
<div lc_id="saMTK5tD7X">
|
||||
<div class="demonstration-element" lc_id="BXSBwotgSp">Avatar 头像</div>
|
||||
<el-avatar lc-mark :size="50" :src="circleUrl" lc_id="T5mj8odU47"></el-avatar>
|
||||
<el-avatar lc-mark shape="square" :size="50" :src="squareUrl" lc_id="CGR8yckrEF"></el-avatar>
|
||||
<div lc_id="MWF8TZpYmQ">
|
||||
<div class="demonstration-element" lc_id="ILdDu9StTB">Avatar 头像</div>
|
||||
<el-avatar lc-mark :size="50" :src="circleUrl" lc_id="fRttsgKaqk"></el-avatar>
|
||||
<el-avatar lc-mark shape="square" :size="50" :src="squareUrl" lc_id="m8hK+IsKji"></el-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,89 +1,89 @@
|
||||
<template lc_id="XJkKzJ06tv">
|
||||
<div lc_id="/CF1zqlrKa">
|
||||
<div lc_id="4DOfKCgatF">
|
||||
<div class="demonstration-element" lc_id="xweUl0tEeN">Container 布局容器</div>
|
||||
<el-container lc-mark lc_id="1VXObrdd7N">
|
||||
<el-header lc_id="QKfTRdpP9t">Header</el-header>
|
||||
<el-main lc_id="CEww9LuokJ">Main</el-main>
|
||||
<template lc_id="pF5ZSBfZwR">
|
||||
<div lc_id="svh5gymRbT">
|
||||
<div lc_id="aklN6TcgSi">
|
||||
<div class="demonstration-element" lc_id="H9Bt++Jp23">Container 布局容器</div>
|
||||
<el-container lc-mark lc_id="skVZmFc8Z0">
|
||||
<el-header lc_id="ReeksChIDL">Header</el-header>
|
||||
<el-main lc_id="RhO3CzVON+">Main</el-main>
|
||||
</el-container>
|
||||
<el-container lc-mark lc_id="Cepn7MKmdS">
|
||||
<el-header lc_id="dtyUqSajiv">Header</el-header>
|
||||
<el-main lc_id="NWEju0XOHJ">Main</el-main>
|
||||
<el-footer lc_id="1LcIZWBTV/">Footer</el-footer>
|
||||
<el-container lc-mark lc_id="OiFYUhn3lV">
|
||||
<el-header lc_id="+FKCmp4cKF">Header</el-header>
|
||||
<el-main lc_id="YpteesQGLz">Main</el-main>
|
||||
<el-footer lc_id="KXY8exJPcM">Footer</el-footer>
|
||||
</el-container>
|
||||
<el-container lc-mark lc_id="birpu7Uiq1">
|
||||
<el-aside width="200px" lc_id="1Lf7a0a0ph">Aside</el-aside>
|
||||
<el-main lc_id="9KptQSz3+u">Main</el-main>
|
||||
<el-container lc-mark lc_id="wk/2g93ahS">
|
||||
<el-aside width="200px" lc_id="l9E3pIb+2h">Aside</el-aside>
|
||||
<el-main lc_id="bBKBRWXDOx">Main</el-main>
|
||||
</el-container>
|
||||
<el-container lc-mark lc_id="eaV4iGUz96">
|
||||
<el-header lc_id="TaCD08NSSP">Header</el-header>
|
||||
<el-container lc_id="5J+gD0iEvI">
|
||||
<el-aside width="200px" lc_id="FRRvlM/Cfr">Aside</el-aside>
|
||||
<el-main lc_id="lcw3QuiEZe">Main</el-main>
|
||||
<el-container lc-mark lc_id="gbNSQP45GT">
|
||||
<el-header lc_id="HF1qQoD4PL">Header</el-header>
|
||||
<el-container lc_id="ASkvJKvxcV">
|
||||
<el-aside width="200px" lc_id="9KXTLE0CeH">Aside</el-aside>
|
||||
<el-main lc_id="7daXKj/Gvs">Main</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
<el-container lc-mark lc_id="PLqrqKhgA7">
|
||||
<el-header lc_id="tmHiJevIsa">Header</el-header>
|
||||
<el-container lc_id="qS1KC1cfri">
|
||||
<el-aside width="200px" lc_id="CzDDLIlPIB">Aside</el-aside>
|
||||
<el-container lc_id="fSXNZUdZ/f">
|
||||
<el-main lc_id="wc1jD3bDoT">Main</el-main>
|
||||
<el-footer lc_id="SjJpHf6a7g">Footer</el-footer>
|
||||
<el-container lc-mark lc_id="36KOMxGIdH">
|
||||
<el-header lc_id="Sw6GvGV0eS">Header</el-header>
|
||||
<el-container lc_id="GHVYjFrX+h">
|
||||
<el-aside width="200px" lc_id="uw9FF7J6aL">Aside</el-aside>
|
||||
<el-container lc_id="KvwMo2IxFx">
|
||||
<el-main lc_id="Fk+eYCCPV2">Main</el-main>
|
||||
<el-footer lc_id="dUWCQrWVeT">Footer</el-footer>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</el-container>
|
||||
<el-container lc-mark lc_id="ycgi9Z8Kny">
|
||||
<el-aside width="200px" lc_id="r/EjWyjczJ">Aside</el-aside>
|
||||
<el-container lc_id="NqJ8JL820i">
|
||||
<el-header lc_id="XxixXzG8a2">Header</el-header>
|
||||
<el-main lc_id="s39II6LC/4">Main</el-main>
|
||||
<el-container lc-mark lc_id="tL2ICEso4A">
|
||||
<el-aside width="200px" lc_id="csjsUzA+9Y">Aside</el-aside>
|
||||
<el-container lc_id="iZYbDNFziC">
|
||||
<el-header lc_id="vpuQLdTE6A">Header</el-header>
|
||||
<el-main lc_id="mgPG8ueRqA">Main</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
<el-container lc-mark lc_id="JYPHz0bZMF">
|
||||
<el-aside width="200px" lc_id="qRJK56Q74V">Aside</el-aside>
|
||||
<el-container lc_id="c3KN/J7Yi2">
|
||||
<el-header lc_id="GDfxqJ0R3d">Header</el-header>
|
||||
<el-main lc_id="Zx/63VU8p0">Main</el-main>
|
||||
<el-footer lc_id="BLY1vTH5li">Footer</el-footer>
|
||||
<el-container lc-mark lc_id="SycDYJbUh8">
|
||||
<el-aside width="200px" lc_id="eCOdbsua/g">Aside</el-aside>
|
||||
<el-container lc_id="RUKLeBxhhi">
|
||||
<el-header lc_id="82WGwD/cl3">Header</el-header>
|
||||
<el-main lc_id="CtffCo/8Cy">Main</el-main>
|
||||
<el-footer lc_id="g0Jcmm2r+P">Footer</el-footer>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
<div lc_id="fFXoD13StH">
|
||||
<div class="demonstration-element" lc_id="qzSnnCsiiY">Skeleton 骨架屏</div>
|
||||
<el-skeleton lc-mark :rows="6" animated lc_id="pMz9OoTtuO"></el-skeleton>
|
||||
<div lc_id="Lg787FEsDw">
|
||||
<div class="demonstration-element" lc_id="jlEgJZCE+i">Skeleton 骨架屏</div>
|
||||
<el-skeleton lc-mark :rows="6" animated lc_id="4O9hfMet5s"></el-skeleton>
|
||||
</div>
|
||||
<div lc_id="/+eytuLsMO">
|
||||
<div class="demonstration-element" lc_id="q2Xgt807d0">Empty 空状态</div>
|
||||
<el-empty lc-mark description="描述文字" lc_id="GhNJigV87p"></el-empty>
|
||||
<div lc_id="D3MK6Iq3TG">
|
||||
<div class="demonstration-element" lc_id="D6xQ5qpO4B">Empty 空状态</div>
|
||||
<el-empty lc-mark description="描述文字" lc_id="sFeXbcNwIE"></el-empty>
|
||||
</div>
|
||||
<div lc_id="pR02CCkeLy">
|
||||
<div class="demonstration-element" lc_id="CrH218ZZHh">Result 结果</div>
|
||||
<el-row lc_id="B0lJgeMQgq">
|
||||
<el-col :sm="12" :lg="6" lc_id="aj5rgx9gtC">
|
||||
<el-result icon="success" lc-mark title="成功提示" subtitle="请根据提示进行操作" lc_id="TkxmLNdH1k">
|
||||
<template slot="extra" lc_id="eKy+B81uWz">
|
||||
<el-button type="primary" size="medium" lc_id="mjvsUigHYK">返回</el-button>
|
||||
<div lc_id="tpbaaOn5XS">
|
||||
<div class="demonstration-element" lc_id="6Mnu6i7QPx">Result 结果</div>
|
||||
<el-row lc_id="FMdEXTrYSx">
|
||||
<el-col :sm="12" :lg="6" lc_id="deKtOM/g2K">
|
||||
<el-result icon="success" lc-mark title="成功提示" subtitle="请根据提示进行操作" lc_id="iF6n6EUcmn">
|
||||
<template #extra lc_id="iJQp/8XeSP">
|
||||
<el-button type="primary" size="medium" lc_id="UCFmR9EP+q">返回</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6" lc_id="t8NFAo4Rh9">
|
||||
<el-result icon="warning" lc-mark title="警告提示" subtitle="请根据提示进行操作" lc_id="H66rtRO+l7">
|
||||
<template slot="extra" lc_id="NZlnnaHVpe">
|
||||
<el-button type="primary" size="medium" lc_id="8+A/PdJlL/">返回</el-button>
|
||||
<el-col :sm="12" :lg="6" lc_id="1smWMRRuZr">
|
||||
<el-result icon="warning" lc-mark title="警告提示" subtitle="请根据提示进行操作" lc_id="NIEZCy3gG0">
|
||||
<template #extra lc_id="c6Unj7eQIv">
|
||||
<el-button type="primary" size="medium" lc_id="MDEtfbmEZd">返回</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6" lc_id="UqNiIqJz/1">
|
||||
<el-result icon="error" lc-mark title="错误提示" subtitle="请根据提示进行操作" lc_id="g7rPSUMWcM">
|
||||
<template slot="extra" lc_id="04xPYOz/ON">
|
||||
<el-button type="primary" size="medium" lc_id="7MAezDvKx5">返回</el-button>
|
||||
<el-col :sm="12" :lg="6" lc_id="2zio5J9ljq">
|
||||
<el-result icon="error" lc-mark title="错误提示" subtitle="请根据提示进行操作" lc_id="kLASzKidTD">
|
||||
<template #extra lc_id="rnIhJqKRjQ">
|
||||
<el-button type="primary" size="medium" lc_id="MhrCBFBHlN">返回</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6" lc_id="+ix6hlAfDe">
|
||||
<el-result icon="info" lc-mark title="信息提示" subtitle="请根据提示进行操作" lc_id="/vmCqxMpho">
|
||||
<template slot="extra" lc_id="b1LfBHu9OM">
|
||||
<el-button type="primary" size="medium" lc_id="ke499n5dzw">返回</el-button>
|
||||
<el-col :sm="12" :lg="6" lc_id="h7xNXozZ0s">
|
||||
<el-result icon="info" lc-mark title="信息提示" subtitle="请根据提示进行操作" lc_id="aDXqAjXsST">
|
||||
<template #extra lc_id="nHgp3LGSea">
|
||||
<el-button type="primary" size="medium" lc_id="VURe3Zlhq0">返回</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template lc_id="BQq7/HDDE/">
|
||||
<div lc_id="YUxWjuPyzo">
|
||||
<div lc_id="G+CBCq3DYP">
|
||||
<div class="demonstration-element" lc_id="tr6tZHyaax" @click="dialogVisible = true">Dialog 对话框</div>
|
||||
<div lc-mark lc_id="KqRoagSJYH">
|
||||
<el-button type="text" lc_id="IbBWKHUvQx">直接拖我看结果</el-button>
|
||||
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" lc_id="kl38EP183o">
|
||||
<span lc_id="o7tyPWHtXQ">这是一段信息</span>
|
||||
<span slot="footer" class="dialog-footer" lc_id="4xYQZAAk6B">
|
||||
<el-button @click="dialogVisible = false" lc_id="nlc9K6Rhcp">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false" lc_id="mgZZJ553WQ">确 定</el-button>
|
||||
<template lc_id="4TgPahC6u5">
|
||||
<div lc_id="vxLzr2xqjb">
|
||||
<div lc_id="tWzGb0zt3I">
|
||||
<div class="demonstration-element" @click="dialogVisible = true" lc_id="cjFRJjmxCw">Dialog 对话框</div>
|
||||
<div lc-mark lc_id="dIDt4KsNEb">
|
||||
<el-button type="text" lc_id="cmG1+fI232">直接拖我看结果</el-button>
|
||||
<el-dialog title="提示" v-model="dialogVisible" width="30%" :before-close="handleClose" lc_id="W4ORswcE/n">
|
||||
<span lc_id="8Sb2dnGlHq">这是一段信息</span>
|
||||
<span footer class="dialog-footer" lc_id="To3nLHp/kA">
|
||||
<el-button @click="dialogVisible = false" lc_id="gd7Fps6eIs">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false" lc_id="fXoFbUbf9l">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
@ -1,48 +1,52 @@
|
||||
<template lc_id="T4QTBulnfw">
|
||||
<div lc_id="51vNFGmvh3">
|
||||
<div lc_id="65mfinsz9a">
|
||||
<div class="demonstration-element" lc_id="trHvmrS793">Drawer 抽屉</div>
|
||||
<div lc-mark lc_id="GT58r4P5Wk">
|
||||
<el-radio-group v-model="direction" lc_id="A9TjD47V/m">
|
||||
<el-radio label="ltr" lc_id="3JnIViDWTD">从左往右开</el-radio>
|
||||
<el-radio label="rtl" lc_id="//V9WuHsrh">从右往左开</el-radio>
|
||||
<el-radio label="ttb" lc_id="QiPEQRv+sx">从上往下开</el-radio>
|
||||
<el-radio label="btt" lc_id="iP/9XjMVBe">从下往上开</el-radio>
|
||||
<template lc_id="tcjDDP7Fub">
|
||||
<div lc_id="qEWQVtO4HV">
|
||||
<div lc_id="ryB2czrr/o">
|
||||
<div class="demonstration-element" lc_id="1XMeUcBuC6">Drawer 抽屉</div>
|
||||
<div lc-mark lc_id="iopQBcTsL/">
|
||||
<el-radio-group v-model="direction" lc_id="oBXOGHBjIr">
|
||||
<el-radio label="ltr" lc_id="sOtBkShpnA">从左往右开</el-radio>
|
||||
<el-radio label="rtl" lc_id="npclPhSAAr">从右往左开</el-radio>
|
||||
<el-radio label="ttb" lc_id="r21dYPRqlH">从上往下开</el-radio>
|
||||
<el-radio label="btt" lc_id="eNbrmYhimD">从下往上开</el-radio>
|
||||
</el-radio-group>
|
||||
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;" disabled lc_id="hrOAKkng+k">点我打开</el-button>
|
||||
<el-drawer title="我是标题" :visible.sync="drawer" :direction="direction" :before-close="handleDrawerClose" lc_id="rXvMMLyeYl">
|
||||
<span lc_id="mc44ZyLRo7">我来啦!</span>
|
||||
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;" disabled lc_id="LKDidefo88">点我打开</el-button>
|
||||
<el-drawer title="我是标题" v-model="drawer" :direction="direction" :before-close="handleDrawerClose" lc_id="QMf8/82LI6">
|
||||
<span lc_id="wtfxsNwyPw">我来啦!</span>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</div>
|
||||
<div lc_id="YR/wK0bfUo">
|
||||
<div class="demonstration-element" lc_id="E3WQ46Qh+3">Popconfirm 气泡确认框</div>
|
||||
<div lc-mark lc_id="BV2HA7n4nF">
|
||||
<el-popconfirm title="这是一段内容确定删除吗？" lc_id="7E1QCXlcDx">
|
||||
<el-button slot="reference" lc_id="L3NACLWO2F">删除</el-button>
|
||||
<div lc_id="VsANkPibgZ">
|
||||
<div class="demonstration-element" lc_id="61ILio7Yfy">Popconfirm 气泡确认框</div>
|
||||
<div lc-mark lc_id="tipD3v4v0E">
|
||||
<el-popconfirm title="这是一段内容确定删除吗？" lc_id="8wIQQ5fsm0">
|
||||
<template #reference lc_id="VRks4FGAp4">
|
||||
<el-button lc_id="UfoVVwFlH8">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
<div lc_id="N4IfEZ7Epi">
|
||||
<div class="demonstration-element" lc_id="IKCjwiwx+W">Popover 弹出框</div>
|
||||
<div lc-mark lc_id="HNyqxKw9lC">
|
||||
<el-popover placement="bottom" title="标题" width="200" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。" lc_id="hZL/Yh0bMe">
|
||||
<el-button slot="reference" lc_id="1pN5tai2mM">click 激活</el-button>
|
||||
<div lc_id="wLPA+POQar">
|
||||
<div class="demonstration-element" lc_id="ViuBm3mn/O">Popover 弹出框</div>
|
||||
<div lc-mark lc_id="tk2qy+nwU2">
|
||||
<el-popover placement="bottom" title="标题" width="200" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。" lc_id="E3FQnEvqcg">
|
||||
<template #reference lc_id="w1CDln4qFc">
|
||||
<el-button lc_id="fuAYnHW69Y">click 激活</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
<div lc_id="/Cu2Xq/CwH">
|
||||
<div class="demonstration-element" lc_id="HgnHrhiDVx">Tooltip 文字提示</div>
|
||||
<div lc-mark lc_id="Zucoe7eh64">
|
||||
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start" lc_id="wk1LWx4f2K">
|
||||
<el-button lc_id="njQ+Vlz5uK">上左</el-button>
|
||||
<div lc_id="0PvfhG+ZYr">
|
||||
<div class="demonstration-element" lc_id="4K55zxXUgL">Tooltip 文字提示</div>
|
||||
<div lc-mark lc_id="hxejw7uzbB">
|
||||
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start" lc_id="XXoofblsAn">
|
||||
<el-button lc_id="C27qPtyTjp">上左</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div lc_id="EkQH0AzvZs">
|
||||
<div class="demonstration-element" lc_id="qV+/Ma51v8">Transfer 穿梭框</div>
|
||||
<div lc-mark lc_id="mNxdbVDp7U">
|
||||
<el-transfer v-model="transferValue" :data="transferData" lc_id="8RAvvEZGCO"></el-transfer>
|
||||
<div lc_id="kDLIM+qGMq">
|
||||
<div class="demonstration-element" lc_id="9LXwSf1r1p">Transfer 穿梭框</div>
|
||||
<div lc-mark lc_id="Mfn7m1Nz4k">
|
||||
<el-transfer v-model="transferValue" :data="transferData" lc_id="FIK2q2sQGP"></el-transfer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,98 +1,104 @@
|
||||
<template lc_id="1FrH/bXxoo">
|
||||
<div lc_id="jhcqX3j75w">
|
||||
<div lc_id="Tu4in0CaIW">
|
||||
<div class="demonstration-element" lc_id="oxVsd4rXLl">Radio 单选框</div>
|
||||
<el-radio-group v-model="radio" lc-mark lc_id="0vrFpPvU4H">
|
||||
<el-radio :label="3" lc_id="7sB/IHgMEP">备选项</el-radio>
|
||||
<el-radio :label="6" lc_id="iUKVuE/8U4">备选项</el-radio>
|
||||
<el-radio :label="9" lc-mark lc_id="YKnWJ/dyc+">备选项</el-radio>
|
||||
<template lc_id="6qRH3lc1dt">
|
||||
<div lc_id="nqlS2COw0N">
|
||||
<div lc_id="D9kF2S4UlD">
|
||||
<div class="demonstration-element" lc_id="DH8WXyx5Hd">Radio 单选框</div>
|
||||
<el-radio-group v-model="radio" lc-mark lc_id="f0v5GqbM8W">
|
||||
<el-radio :label="3" lc_id="iS/l/lS7uE">备选项</el-radio>
|
||||
<el-radio :label="6" lc_id="PwMXXlWapK">备选项</el-radio>
|
||||
<el-radio :label="9" lc-mark lc_id="kgp2vfR6ti">备选项</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div lc_id="XIuuMTW+0j">
|
||||
<div class="demonstration-element" lc_id="UJkx2Yas25">Checkbox 多选框</div>
|
||||
<el-checkbox-group lc-mark v-model="checkList" lc_id="5Ej1enwgPV">
|
||||
<el-checkbox label="复选框 A" lc_id="UjSwDuUvwN"></el-checkbox>
|
||||
<el-checkbox label="复选框 B" lc_id="Lh5ruzddpf"></el-checkbox>
|
||||
<el-checkbox lc-mark label="复选框 C" lc_id="9I+2SXunYS"></el-checkbox>
|
||||
<div lc_id="wwgDyr1OR2">
|
||||
<div class="demonstration-element" lc_id="6KW/uZOTEM">Checkbox 多选框</div>
|
||||
<el-checkbox-group lc-mark v-model="checkList" lc_id="Uen92zl/6G">
|
||||
<el-checkbox label="复选框 A" lc_id="FgCPjGEWNa"></el-checkbox>
|
||||
<el-checkbox label="复选框 B" lc_id="FAGQbE5NjH"></el-checkbox>
|
||||
<el-checkbox lc-mark label="复选框 C" lc_id="vp/RVl8A/3"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div lc_id="t5nTZdVOYh">
|
||||
<el-input v-model="input" placeholder="请输入内容" lc-mark lc_id="oQTDIZ45WD"></el-input>
|
||||
<el-input type="textarea" lc-mark :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea2" lc_id="0Lb1i+lJ+e"></el-input>
|
||||
<div lc_id="VEDRtauvNm">
|
||||
<el-input v-model="input" placeholder="请输入内容" lc-mark lc_id="ffFxjUysQl"></el-input>
|
||||
<el-input type="textarea" lc-mark :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea2" lc_id="l7XPAnIanl"></el-input>
|
||||
</div>
|
||||
<div lc_id="5XvABKZyMr">
|
||||
<div class="demonstration-element" lc_id="P4RAkEgdAX">InputNumber 计数器</div>
|
||||
<div style="display:inline-block;width:200px;" lc-mark lc_id="33vSscOdJg">
|
||||
<el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字" lc_id="ok2OSKYUlS"></el-input-number>
|
||||
<div lc_id="4JbZ+JNrQw">
|
||||
<div class="demonstration-element" lc_id="qBSKct8boj">InputNumber 计数器</div>
|
||||
<div style="display:inline-block;width:200px;" lc-mark lc_id="xBXsSYROtm">
|
||||
<el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字" lc_id="6UG1vTaWBN"></el-input-number>
|
||||
</div>
|
||||
<div style="display:inline-block;width:200px;" lc-mark lc_id="kZfDuqPsUe">
|
||||
<el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10" lc_id="ZLZ2cuIsQX"></el-input-number>
|
||||
<div style="display:inline-block;width:200px;" lc-mark lc_id="ma8NcOpTT7">
|
||||
<el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10" lc_id="UBHeHrcbVw"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div lc_id="zexMdT18+i">
|
||||
<div class="demonstration-element" lc_id="RUghSMgJOW">Select 选择器</div>
|
||||
<el-select v-model="value" lc-mark placeholder="请选择" lc_id="H9t9iMrAPl">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" lc_id="GF42PHtHg8"></el-option>
|
||||
<div lc_id="cug4WVKxu9">
|
||||
<div class="demonstration-element" lc_id="BkPeGYgetZ">Select 选择器</div>
|
||||
<el-select v-model="value" lc-mark placeholder="请选择" lc_id="qB59tUf6Gc">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" lc_id="whLrgIdezr"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div lc_id="V4l/IYxRw8">
|
||||
<div class="demonstration-element" lc_id="ASIXtb8VYa">Cascader 级联选择器</div>
|
||||
<el-cascader lc-mark v-model="value2" :options="options2" @change="handleChange" lc_id="pPI4GNJgyK"></el-cascader>
|
||||
<div lc_id="nDNR0MoKZA">
|
||||
<div class="demonstration-element" lc_id="p4yqbL8QdC">Cascader 级联选择器</div>
|
||||
<el-cascader lc-mark v-model="value2" :options="options2" @change="handleChange" lc_id="nMEiBnay+d"></el-cascader>
|
||||
</div>
|
||||
<div lc_id="nP4qIv2zGf">
|
||||
<div class="demonstration-element" lc_id="CLnpHQZ3Cb">Switch 开关</div>
|
||||
<el-switch lc-mark v-model="value3" active-text="按月付费" inactive-text="按年付费" lc_id="QS2PN4VAu6"></el-switch>
|
||||
<div lc_id="H/A6J6KXiY">
|
||||
<div class="demonstration-element" lc_id="1ly5rIkWVS">Switch 开关</div>
|
||||
<el-switch lc-mark v-model="value3" active-text="按月付费" inactive-text="按年付费" lc_id="xKdVt8uBzg"></el-switch>
|
||||
</div>
|
||||
<div lc_id="+X3HFNOUDN">
|
||||
<div class="demonstration-element" lc_id="duxYsm2Bqk">Slider 滑块</div>
|
||||
<el-slider lc-mark v-model="value4" lc_id="pZrnjv27e0"></el-slider>
|
||||
<div lc_id="PnI1SUBtFH">
|
||||
<div class="demonstration-element" lc_id="xEukfWny/6">Slider 滑块</div>
|
||||
<el-slider lc-mark v-model="value4" lc_id="6y/Uiwq0ZN"></el-slider>
|
||||
</div>
|
||||
<div lc_id="0CqPUH7Loi">
|
||||
<div class="demonstration-element" lc_id="Kn94f+Qtq6">TimePicker 时间选择器</div>
|
||||
<el-time-select v-model="value5" lc-mark :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="选择时间" lc_id="ocidZ8kNvi"></el-time-select>
|
||||
<el-time-picker lc-mark is-range v-model="value1" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" lc_id="ul4df4BXqL"></el-time-picker>
|
||||
<div lc_id="5dyMzD3j06">
|
||||
<div class="demonstration-element" lc_id="ERiurnsreT">TimePicker 时间选择器</div>
|
||||
<el-time-select v-model="value5" lc-mark :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="选择时间" lc_id="Sz3vn5DAbX"></el-time-select>
|
||||
<el-time-picker lc-mark is-range v-model="value1" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" lc_id="o2nM93CmIm"></el-time-picker>
|
||||
</div>
|
||||
<div lc_id="vIkUj/Mdx4">
|
||||
<div class="demonstration-element" lc_id="9BXiYtOw1H">DatePicker 日期选择器</div>
|
||||
<el-date-picker v-model="value6" lc-mark type="date" placeholder="选择日期" lc_id="aF5L+DvW8P"></el-date-picker>
|
||||
<el-date-picker v-model="dateValue1" lc-mark type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" lc_id="KsspMcw+vf"></el-date-picker>
|
||||
<div lc_id="xWW1lIgrLe">
|
||||
<div class="demonstration-element" lc_id="Sm6zFTno79">DatePicker 日期选择器</div>
|
||||
<el-date-picker v-model="value6" lc-mark type="date" placeholder="选择日期" lc_id="5S5Yzx2fXs"></el-date-picker>
|
||||
<el-date-picker v-model="dateValue1" lc-mark type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" lc_id="3D+CY23B2Q"></el-date-picker>
|
||||
</div>
|
||||
<div lc_id="z/NsnEmneM">
|
||||
<div class="demonstration-element" lc_id="31TQ4nvcpw">Upload 上传</div>
|
||||
<div lc_id="XTNxQoBU4c">
|
||||
<el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple lc-mark :limit="3" :on-exceed="handleExceed" :file-list="fileList" lc_id="koVshztGXe">
|
||||
<el-button size="small" type="primary" lc_id="8K/MngdcDq">点击上传</el-button>
|
||||
<div slot="tip" class="el-upload__tip" lc_id="JhGGSZvOOw">只能上传jpg/png文件，且不超过500kb</div>
|
||||
<div lc_id="SFEe1Ua3f3">
|
||||
<div class="demonstration-element" lc_id="EDwU3s0SZ6">Upload 上传</div>
|
||||
<div lc_id="Cco/MVefy1">
|
||||
<el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple lc-mark :limit="3" :on-exceed="handleExceed" :file-list="fileList" lc_id="7frE/pSrYE">
|
||||
<el-button size="small" type="primary" lc_id="c/5KHeT+LU">点击上传</el-button>
|
||||
<template #tip lc_id="cEzrM0eEXc">
|
||||
<div class="el-upload__tip" lc_id="Vh2iLMvT2c">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div lc-mark style="max-width:400px;font-size:12px;" lc_id="uVTyfuZHcZ">
|
||||
用户头像上传: <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" lc_id="ggkspVsxtO">
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar" lc_id="Xq6mKxhmD2"/> <i v-else class="el-icon-plus avatar-uploader-icon" lc_id="yMQJeTHV0Q"></i>
|
||||
<div lc-mark style="max-width:400px;font-size:12px;" lc_id="KzLuue+H7z">
|
||||
用户头像上传: <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" lc_id="1eXpUahgcu">
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar" lc_id="6Ax8qNsE2Z"/> <i v-else class="el-icon-plus avatar-uploader-icon" lc_id="lqybUMnnYf"></i>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div lc-mark style="max-width:400px;font-size:12px;" lc_id="oLOYzhC3OV">
|
||||
图片列表缩略图: <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture" lc_id="q2XrT8yeX0">
|
||||
<el-button size="small" type="primary" lc_id="5u/ST0LLg3">点击上传</el-button>
|
||||
<div slot="tip" class="el-upload__tip" lc_id="jtqWimxhcH">只能上传jpg/png文件，且不超过500kb</div>
|
||||
<div lc-mark style="max-width:400px;font-size:12px;" lc_id="NwHRrU2JEM">
|
||||
图片列表缩略图: <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture" lc_id="+hJ7DSkPgT">
|
||||
<el-button size="small" type="primary" lc_id="y3uZKsl9b/">点击上传</el-button>
|
||||
<template #tip lc_id="0JB5ZbGk3I">
|
||||
<div class="el-upload__tip" lc_id="esyAhLLNGI">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div lc_id="+p5NODNW9x">
|
||||
<el-upload class="upload-demo" lc-mark drag action="https://jsonplaceholder.typicode.com/posts/" multiple lc_id="xBGaLT6/i0">
|
||||
<i class="el-icon-upload" lc_id="IYJxHubhoK"></i>
|
||||
<div class="el-upload__text" lc_id="XlmNpvTMq9">
|
||||
将文件拖到此处，或 <em lc_id="F1wzfewKQd">点击上传</em>
|
||||
<div lc_id="g/E9ZNwP9E">
|
||||
<el-upload class="upload-demo" lc-mark drag action="https://jsonplaceholder.typicode.com/posts/" multiple lc_id="ADzwW/1hsX">
|
||||
<i class="el-icon-upload" lc_id="FsQAFizcWf"></i>
|
||||
<div class="el-upload__text" lc_id="CCys4DMWDP">
|
||||
将文件拖到此处，或 <em lc_id="TbbfPE9Hu+">点击上传</em>
|
||||
</div>
|
||||
<div class="el-upload__tip" slot="tip" lc_id="kLNHsmuBIJ">只能上传jpg/png文件，且不超过500kb</div>
|
||||
<template #tip lc_id="K65M529P0Z">
|
||||
<div class="el-upload__tip" lc_id="4GA0T+3HDL">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
<div lc_id="rmSgFvvDvt">
|
||||
<div class="demonstration-element" lc_id="h5uo8CrShR">Rate 评分</div>
|
||||
<el-rate v-model="value7" lc-mark show-text lc_id="UK81nB7671"></el-rate>
|
||||
<div lc_id="X/f9Q6XT+l">
|
||||
<div class="demonstration-element" lc_id="7NKyW9NxNM">Rate 评分</div>
|
||||
<el-rate v-model="value7" lc-mark show-text lc_id="gWm2+ckHWm"></el-rate>
|
||||
</div>
|
||||
<div lc_id="G7LuObrLMZ">
|
||||
<div class="demonstration-element" lc_id="HeOPHNf8Ew">ColorPicker 颜色选择器</div>
|
||||
<el-color-picker lc-mark v-model="color1" lc_id="1pcEEM5BsF"></el-color-picker>
|
||||
<div lc_id="unZHE/lFYS">
|
||||
<div class="demonstration-element" lc_id="9gDxl8XOEm">ColorPicker 颜色选择器</div>
|
||||
<el-color-picker lc-mark v-model="color1" lc_id="V+9zRMsjFK"></el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -451,7 +457,7 @@ export default {
|
||||
},
|
||||
},
|
||||
}; </script>
|
||||
<style scoped>.avatar-uploader ::v-deep .el-upload {
|
||||
<style scoped>.avatar-uploader :v-deep(.el-upload) {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
|
||||
@ -1,94 +1,94 @@
|
||||
<template lc_id="dONI+eltfy">
|
||||
<div lc_id="pYW7lbQNBm">
|
||||
<div lc_id="Q9ouPvVCDr">
|
||||
<div class="demonstration-element" lc_id="QS2gym2BZJ">Form 行内表单</div>
|
||||
<el-form inline lc-mark :model="formInline" class="demo-form-inline" lc_id="WsfIP160bw">
|
||||
<el-form-item label="审批人" lc_id="nwnVQASGS0" lc-mark>
|
||||
<el-input v-model="formInline.user" placeholder="审批人" lc_id="fyTWqa6xR3"></el-input>
|
||||
<template lc_id="03KSNQZ/MV">
|
||||
<div lc_id="JoW6e9bEi+">
|
||||
<div lc_id="VGGG5BzJK+">
|
||||
<div class="demonstration-element" lc_id="LgRs8iauTY">Form 行内表单</div>
|
||||
<el-form inline lc-mark :model="formInline" class="demo-form-inline" lc_id="1WJLzNIqg/">
|
||||
<el-form-item label="审批人" lc-mark lc_id="9iLdD7vRhd">
|
||||
<el-input v-model="formInline.user" placeholder="审批人" lc_id="2N8NbmX1qy"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域" lc_id="eofsdbRMjx" lc-mark>
|
||||
<el-select v-model="formInline.region" placeholder="活动区域" lc_id="+2rUZ3W3aC">
|
||||
<el-option label="区域一" value="shanghai" lc_id="IHvRkwasBm"></el-option>
|
||||
<el-option label="区域二" value="beijing" lc_id="TR+GgYcJ6L"></el-option>
|
||||
<el-form-item label="活动区域" lc-mark lc_id="cuShpTy+7P">
|
||||
<el-select v-model="formInline.region" placeholder="活动区域" lc_id="fblnBhXD33">
|
||||
<el-option label="区域一" value="shanghai" lc_id="xEcFlTO5pD"></el-option>
|
||||
<el-option label="区域二" value="beijing" lc_id="PjVhPT7HZa"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div lc_id="RDjCjjhD6t">
|
||||
<div class="demonstration-element" lc_id="rfAmqnOfPE">Form 表单</div>
|
||||
<span lc-mark lc_id="RAHdW2D6Om">
|
||||
<span lc_id="c4he125BD/">Key:</span>
|
||||
<span lc_id="XQkdV8NCZs">Value</span>
|
||||
<div lc_id="tY5UywhfnK">
|
||||
<div class="demonstration-element" lc_id="Efto0Pndua">Form 表单</div>
|
||||
<span lc-mark lc_id="hqHTBq8YqG">
|
||||
<span lc_id="EF8c2VPZRA">Key:</span>
|
||||
<span lc_id="lWbqzj2kHH">Value</span>
|
||||
</span>
|
||||
<span lc-mark lc_id="7aLYLrp+/S">
|
||||
<b lc_id="rO/kiINZrQ">Key:</b>
|
||||
<span lc_id="6hy1WShna9">Value</span>
|
||||
<span lc-mark lc_id="cjIUIdSSsS">
|
||||
<b lc_id="ADps8bfr5O">Key:</b>
|
||||
<span lc_id="beSG8unZWU">Value</span>
|
||||
</span>
|
||||
<span lc-mark lc_id="PJogpEwg0Q">
|
||||
<b lc_id="BVD6vZZXln">Key:</b>
|
||||
<div lc_id="9PkvdAl5Pg" label-lc-mark></div>
|
||||
<span lc-mark lc_id="y29nZqQNoJ">
|
||||
<b lc_id="N9wWIaXqzx">Key:</b>
|
||||
<div label-lc-mark lc_id="/ZBycQe5p/"></div>
|
||||
</span>
|
||||
</div>
|
||||
<div lc_id="mL5ltGQ2+1">
|
||||
<div class="demonstration-element" lc_id="2ckgf6ruBF">Form 容器</div>
|
||||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" lc-mark label-width="100px" class="demo-border" lc_id="gUzm9BtYBr"></el-form>
|
||||
<div lc_id="PzuXdsu6kd">
|
||||
<div class="demonstration-element" lc_id="LdGjb6Df9M">Form 容器</div>
|
||||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" lc-mark label-width="100px" class="demo-border" lc_id="Zzz06+mzkO"></el-form>
|
||||
</div>
|
||||
<div lc_id="4tNJzbfZpl">
|
||||
<div class="demonstration-element" lc_id="q2A/v0bGPa">Form 典型表单</div>
|
||||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" lc-mark label-width="100px" class="demo-border" lc_id="+J7wuw2kfG">
|
||||
<el-form-item label="活动名称" prop="name" lc_id="8zJ3QynhGf" lc-mark>
|
||||
<el-input v-model="ruleForm.name" lc_id="+0z/Usri5w"></el-input>
|
||||
<div lc_id="8ZewsTbRuD">
|
||||
<div class="demonstration-element" lc_id="cX5zh7f+RV">Form 典型表单</div>
|
||||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" lc-mark label-width="100px" class="demo-border" lc_id="gx5EBJU9WS">
|
||||
<el-form-item label="活动名称" prop="name" lc-mark lc_id="6md1kDs8qa">
|
||||
<el-input v-model="ruleForm.name" lc_id="QG5eYYTCSB"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域" prop="region" lc_id="BQknWoGJD1" lc-mark>
|
||||
<el-select v-model="ruleForm.region" placeholder="请选择活动区域" lc_id="BsYEO5rf2i">
|
||||
<el-option label="区域一" value="shanghai" lc_id="WZgkAhC9vv"></el-option>
|
||||
<el-option label="区域二" value="beijing" lc_id="q96ygTFk/B"></el-option>
|
||||
<el-form-item label="活动区域" prop="region" lc-mark lc_id="tnJTgI76Kp">
|
||||
<el-select v-model="ruleForm.region" placeholder="请选择活动区域" lc_id="nrTlsTbxPM">
|
||||
<el-option label="区域一" value="shanghai" lc_id="mXsEEs0/z0"></el-option>
|
||||
<el-option label="区域二" value="beijing" lc_id="2GzfZP1Cbx"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动时间" required lc_id="3hYK5tYClq" lc-mark>
|
||||
<el-col :span="11" lc_id="2/zvr1UBRS">
|
||||
<el-form-item prop="date1" lc_id="SRsyrJFuY7">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%" lc_id="ut4BH5tRjv"></el-date-picker>
|
||||
<el-form-item label="活动时间" required lc-mark lc_id="fz4dTVUbEb">
|
||||
<el-col :span="11" lc_id="mmEYR54uQF">
|
||||
<el-form-item prop="date1" lc_id="QkTT/2WWLK">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%" lc_id="G3lxZTQsw5"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col class="line" :span="2" lc_id="cYnewYwc7x">-</el-col>
|
||||
<el-col :span="11" lc_id="CDem+Jbdu6">
|
||||
<el-form-item prop="date2" lc_id="mU9tDRBd+N">
|
||||
<el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%" lc_id="IgAhjz/1Sa"></el-time-picker>
|
||||
<el-col class="line" :span="2" lc_id="R2NmSO2FCi">-</el-col>
|
||||
<el-col :span="11" lc_id="eOACIzQ+Dq">
|
||||
<el-form-item prop="date2" lc_id="Ub+QEqDUGN">
|
||||
<el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%" lc_id="+tkG6VmYdM"></el-time-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="即时配送" prop="delivery" lc_id="BSjAgD4RBz" lc-mark>
|
||||
<el-switch v-model="ruleForm.delivery" lc_id="dHzXy9Kd9/"></el-switch>
|
||||
<el-form-item label="即时配送" prop="delivery" lc-mark lc_id="Lz8oPy38nU">
|
||||
<el-switch v-model="ruleForm.delivery" lc_id="COO1BlBrjF"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="文件上传" prop="delivery" lc_id="bO0otoJGdo" lc-mark>
|
||||
<el-button type="primary" size="small" lc_id="be1qikAvG/">
|
||||
上传 <i class="el-icon-upload el-icon--right" lc_id="7wBx/Um7eK"></i>
|
||||
<el-form-item label="文件上传" prop="delivery" lc-mark lc_id="eFNZ7B9jgX">
|
||||
<el-button type="primary" size="small" lc_id="7ZjOmdz3Ur">
|
||||
上传 <i class="el-icon-upload el-icon--right" lc_id="IOumsfqV0c"></i>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="自定义form-item" prop="delivery" lc_id="QJ3NN+wUEW" lc-mark>
|
||||
<div class="demo-border" lc_id="gWcKKmRXlJ"></div>
|
||||
<el-form-item label="自定义form-item" prop="delivery" lc-mark lc_id="g9ZQTRZogP">
|
||||
<div class="demo-border" lc_id="bICnUogCxE"></div>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动性质" prop="type" lc_id="oLunX/GRuH" lc-mark>
|
||||
<el-checkbox-group v-model="ruleForm.type" lc_id="++4Bda/NVN">
|
||||
<el-checkbox label="美食/餐厅线上活动" name="type" lc_id="+wC1g9MHna"></el-checkbox>
|
||||
<el-checkbox label="地推活动" name="type" lc_id="sdCzrXAT2y"></el-checkbox>
|
||||
<el-checkbox label="线下主题活动" name="type" lc_id="gTsBARyLOu"></el-checkbox>
|
||||
<el-checkbox label="单纯品牌曝光" name="type" lc_id="TDBRWL+ui/"></el-checkbox>
|
||||
<el-form-item label="活动性质" prop="type" lc-mark lc_id="u5e4jMDa0Z">
|
||||
<el-checkbox-group v-model="ruleForm.type" lc_id="4odzSgDoVc">
|
||||
<el-checkbox label="美食/餐厅线上活动" name="type" lc_id="qRZK4l23q9"></el-checkbox>
|
||||
<el-checkbox label="地推活动" name="type" lc_id="WbtFV7IdQ0"></el-checkbox>
|
||||
<el-checkbox label="线下主题活动" name="type" lc_id="/fBZC9Wz76"></el-checkbox>
|
||||
<el-checkbox label="单纯品牌曝光" name="type" lc_id="V+qui3Km7r"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="特殊资源" prop="resource" lc_id="AIVW6a+WMo" lc-mark>
|
||||
<el-radio-group v-model="ruleForm.resource" lc_id="arM0Xl8Ow8">
|
||||
<el-radio label="线上品牌商赞助" lc_id="kFYdyqdoNE"></el-radio>
|
||||
<el-radio label="线下场地免费" lc_id="9NfIeEmiWw"></el-radio>
|
||||
<el-form-item label="特殊资源" prop="resource" lc-mark lc_id="EfEJRxIgMc">
|
||||
<el-radio-group v-model="ruleForm.resource" lc_id="UaAE0hW4YD">
|
||||
<el-radio label="线上品牌商赞助" lc_id="eVUn2fPBO0"></el-radio>
|
||||
<el-radio label="线下场地免费" lc_id="OhNxMXrfFs"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动形式" prop="desc" lc_id="b5oLJSA9VW" lc-mark>
|
||||
<el-input type="textarea" v-model="ruleForm.desc" lc_id="Kjz00qg2bm"></el-input>
|
||||
<el-form-item label="活动形式" prop="desc" lc-mark lc_id="1J3SXxTQjA">
|
||||
<el-input type="textarea" v-model="ruleForm.desc" lc_id="KndAAF/3Mu"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item lc_id="8uphY++lpC">
|
||||
<el-button type="primary" @click="submitForm" lc_id="iaY/zpWjSS">立即创建</el-button>
|
||||
<el-button @click="resetForm" lc_id="KxBu2mPKhs">重置</el-button>
|
||||
<el-form-item lc_id="wSyCEJYjUD">
|
||||
<el-button type="primary" @click="submitForm" lc_id="wp2oC1qxYN">立即创建</el-button>
|
||||
<el-button @click="resetForm" lc_id="nWgxJ6a9v+">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
@ -101,16 +101,16 @@
|
||||
<el-descriptions-item label="备注" lc_id="MpLSTs1V1a">
|
||||
<el-tag size="small" lc_id="x+3JGPZLjM">学校</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="联系地址" lc_id="OoN2WiOmV9">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
||||
<el-descriptions-item label="联系地址" lc_id="P7eacW7mxC">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions title="垂直带边框列表" direction="vertical" :column="4" border lc-mark lc_id="szloMrlo+J">
|
||||
> <el-descriptions-item label="用户名" lc_id="eiu+5s736W">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="手机号" lc_id="5jN1FMg0JM">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="居住地" :span="2" lc_id="0kqZ2EOUJ/">苏州市</el-descriptions-item>
|
||||
<el-descriptions-item label="备注" lc_id="iSiDebVpZg">
|
||||
<el-tag size="small" lc_id="gy68yv4szb">学校</el-tag>
|
||||
<el-descriptions title="垂直带边框列表" direction="vertical" :column="4" border lc-mark lc_id="k4Y9MNzVZb">
|
||||
> <el-descriptions-item label="用户名" lc_id="YTqOj5iy95">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="手机号" lc_id="qx7ONklayE">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="居住地" :span="2" lc_id="Gip/4MIafd">苏州市</el-descriptions-item>
|
||||
<el-descriptions-item label="备注" lc_id="4wYkIRcdbX">
|
||||
<el-tag size="small" lc_id="9iHUBLDbHY">学校</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="联系地址" lc_id="FOfDHeKGh6">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
||||
<el-descriptions-item label="联系地址" lc_id="zfJtvesctl">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,158 +1,162 @@
|
||||
<template lc_id="NEXOf/rfSM">
|
||||
<div lc_id="fsSLs868ck">
|
||||
<div lc_id="jnWZjBCN55">
|
||||
<div class="demonstration-element" lc_id="PZC8UwVIRd">Progress 进度条</div>
|
||||
<el-progress lc-mark :percentage="50" lc_id="GnymMLJ5C6"></el-progress>
|
||||
<el-progress lc-mark :percentage="100" :format="format" lc_id="8XsOow/7Xd"></el-progress>
|
||||
<el-progress lc-mark :percentage="100" status="success" lc_id="BtIbOuqpzF"></el-progress>
|
||||
<el-progress lc-mark :percentage="100" status="warning" lc_id="+CJ7f9MY/b"></el-progress>
|
||||
<el-progress lc-mark :percentage="50" status="exception" lc_id="nFfSplTrKn"></el-progress>
|
||||
<template lc_id="GWGSFjvJGS">
|
||||
<div lc_id="mhJfF7mAeh">
|
||||
<div lc_id="OyEvjlhxKG">
|
||||
<div class="demonstration-element" lc_id="jS8CODuZ8w">Progress 进度条</div>
|
||||
<el-progress lc-mark :percentage="50" lc_id="5KIZ/gMvgA"></el-progress>
|
||||
<el-progress lc-mark :percentage="100" :format="format" lc_id="andEKznPJm"></el-progress>
|
||||
<el-progress lc-mark :percentage="100" status="success" lc_id="+c55Mhr6qb"></el-progress>
|
||||
<el-progress lc-mark :percentage="100" status="warning" lc_id="aVjnu79qzU"></el-progress>
|
||||
<el-progress lc-mark :percentage="50" status="exception" lc_id="BxPH8oVBkr"></el-progress>
|
||||
</div>
|
||||
<div lc_id="y2hj6UPfBT">
|
||||
<div class="demonstration-element" lc_id="DQOP05V0ui">Tree 树形控件</div>
|
||||
<el-tree lc-mark :data="data" :props="defaultProps" @node-click="handleNodeClick" lc_id="PXooTPaGg5"></el-tree>
|
||||
<div lc_id="NZyu36Hfnv">
|
||||
<div class="demonstration-element" lc_id="KlaxLO85mW">Tree 树形控件</div>
|
||||
<el-tree lc-mark :data="data" :props="defaultProps" @node-click="handleNodeClick" lc_id="6tm3Um6sZv"></el-tree>
|
||||
</div>
|
||||
<div lc_id="5aKl6Rld80">
|
||||
<div class="demonstration-element" lc_id="APtM1RDdZm">Badge 标记</div>
|
||||
<el-badge lc-mark :value="12" class="item" lc_id="bflHMoagaW">
|
||||
<el-button size="small" lc_id="tZgMa+7DS4">评论</el-button>
|
||||
<div lc_id="EvD0rnh0sk">
|
||||
<div class="demonstration-element" lc_id="gunUjt4svK">Badge 标记</div>
|
||||
<el-badge lc-mark :value="12" class="item" lc_id="64M0gaQZnd">
|
||||
<el-button size="small" lc_id="EwFjRB81yT">评论</el-button>
|
||||
</el-badge>
|
||||
<el-badge lc-mark :value="3" class="item" lc_id="4PZTLM5+e6">
|
||||
<el-button size="small" lc_id="iqXfaLj3WQ">回复</el-button>
|
||||
<el-badge lc-mark :value="3" class="item" lc_id="haDOmCEsNH">
|
||||
<el-button size="small" lc_id="iZtMs8mOnw">回复</el-button>
|
||||
</el-badge>
|
||||
<el-badge lc-mark :value="1" class="item" type="primary" lc_id="Q7RwbWdiDV">
|
||||
<el-button size="small" lc_id="r3WfzbZasR">评论</el-button>
|
||||
<el-badge lc-mark :value="1" class="item" type="primary" lc_id="yraq608Lcr">
|
||||
<el-button size="small" lc_id="B1N0ns/Uyn">评论</el-button>
|
||||
</el-badge>
|
||||
<el-badge lc-mark :value="2" class="item" type="warning" lc_id="TtCe3s6ksj">
|
||||
<el-button size="small" lc_id="cf1h5bzriK">回复</el-button>
|
||||
<el-badge lc-mark :value="2" class="item" type="warning" lc_id="h8tv/EwcbE">
|
||||
<el-button size="small" lc_id="8NG966mGav">回复</el-button>
|
||||
</el-badge>
|
||||
</div>
|
||||
<div lc_id="SSxseq47LR">
|
||||
<div class="demonstration-element" lc_id="HJm06h80jc">Alert 警告</div>
|
||||
<el-alert lc-mark title="成功提示的文案" type="success" lc_id="wqO+8uwuWX"></el-alert>
|
||||
<el-alert lc-mark title="消息提示的文案" type="info" lc_id="iYuvHuINE3"></el-alert>
|
||||
<el-alert lc-mark title="警告提示的文案" type="warning" lc_id="u4WeAw1AlU"></el-alert>
|
||||
<el-alert lc-mark title="错误提示的文案" type="error" lc_id="815zGBQ9hH"></el-alert>
|
||||
<div lc_id="sTqskem3tG">
|
||||
<div class="demonstration-element" lc_id="WP+GGVOxkS">Alert 警告</div>
|
||||
<el-alert lc-mark title="成功提示的文案" type="success" lc_id="x1p2XMUWDM"></el-alert>
|
||||
<el-alert lc-mark title="消息提示的文案" type="info" lc_id="gA2WmaOkII"></el-alert>
|
||||
<el-alert lc-mark title="警告提示的文案" type="warning" lc_id="0oa8HxAIjm"></el-alert>
|
||||
<el-alert lc-mark title="错误提示的文案" type="error" lc_id="okpJNZagox"></el-alert>
|
||||
</div>
|
||||
<div lc_id="mF0TvIdV4V">
|
||||
<div class="demonstration-element" lc_id="mFVki7ZkHC">NavMenu 导航菜单</div>
|
||||
<el-menu lc-mark :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" lc_id="Q6iodKSeyA">
|
||||
<el-menu-item index="1" lc_id="eiJtp9/zyQ">处理中心</el-menu-item>
|
||||
<el-menu-item index="4" lc_id="GLfqTcPgMW">
|
||||
<a target="_blank" lc_id="dil67qSs86">订单管理</a>
|
||||
<div lc_id="U4YG27qq4s">
|
||||
<div class="demonstration-element" lc_id="tI02wMGVyX">NavMenu 导航菜单</div>
|
||||
<el-menu lc-mark :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" lc_id="m4VKXvGyLa">
|
||||
<el-menu-item index="1" lc_id="5Rt63GCCjB">处理中心</el-menu-item>
|
||||
<el-menu-item index="4" lc_id="TDeTJ2Uw0j">
|
||||
<a target="_blank" lc_id="zY0ygk/pmh">订单管理</a>
|
||||
</el-menu-item>
|
||||
<el-submenu index="2" lc_id="NY1ULa4P2Q">
|
||||
<template slot="title" lc_id="EwUd4efWhm">我的工作台</template>
|
||||
<el-menu-item index="2-1" lc_id="zafhDPI5vE">选项1</el-menu-item>
|
||||
<el-menu-item index="2-2" lc_id="WlfqjAfsIa">选项2</el-menu-item>
|
||||
<el-menu-item index="2-3" lc_id="BA4wuaM6Zg">选项3</el-menu-item>
|
||||
<el-submenu index="2-4" lc_id="/iWebaFsQq">
|
||||
<template slot="title" lc_id="V8UUKlvHnc">选项4</template>
|
||||
<el-menu-item index="2-4-1" lc_id="hlaLFAfE7r">选项1</el-menu-item>
|
||||
<el-menu-item index="2-4-2" lc_id="DJomhSf824">选项2</el-menu-item>
|
||||
<el-menu-item index="2-4-3" lc_id="PoxAKU6k+S">选项3</el-menu-item>
|
||||
<el-submenu index="2" lc_id="9HfPjJr/VE">
|
||||
<template #title lc_id="dvfriNTe67">我的工作台</template>
|
||||
<el-menu-item index="2-1" lc_id="6fDR/35Dcb">选项1</el-menu-item>
|
||||
<el-menu-item index="2-2" lc_id="inF9AUVbOa">选项2</el-menu-item>
|
||||
<el-menu-item index="2-3" lc_id="ox0EdtlU3E">选项3</el-menu-item>
|
||||
<el-submenu index="2-4" lc_id="QjzqxCifDT">
|
||||
<template #title lc_id="NIvxdQ77F4">选项4</template>
|
||||
<el-menu-item index="2-4-1" lc_id="mpWID+cqPv">选项1</el-menu-item>
|
||||
<el-menu-item index="2-4-2" lc_id="zdDrVca5k3">选项2</el-menu-item>
|
||||
<el-menu-item index="2-4-3" lc_id="BD0q7ZSrK5">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</div>
|
||||
<div lc_id="RG6XjsgnsE">
|
||||
<div class="demonstration-element" lc_id="gEZK3ogh8S">Tabs 标签页</div>
|
||||
<el-tabs lc-mark v-model="activeName" @tab-click="handleClick" lc_id="tuf2/9+j/e">
|
||||
<el-tab-pane label="用户管理" name="first" lc_id="v/FOTtwlL9">用户管理</el-tab-pane>
|
||||
<el-tab-pane label="配置管理" name="second" lc_id="FrknB8ZWZ2">配置管理</el-tab-pane>
|
||||
<el-tab-pane label="角色管理" name="third" lc_id="YUREDANeTC">角色管理</el-tab-pane>
|
||||
<el-tab-pane label="定时任务补偿" name="fourth" lc_id="txrrEJikwC">定时任务补偿</el-tab-pane>
|
||||
<div lc_id="Hr+gUUgFTD">
|
||||
<div class="demonstration-element" lc_id="EAnxv9IwcJ">Tabs 标签页</div>
|
||||
<el-tabs lc-mark v-model="activeName" @tab-click="handleClick" lc_id="7TSxFc1h/T">
|
||||
<el-tab-pane label="用户管理" name="first" lc_id="nESAhjJD5+">用户管理</el-tab-pane>
|
||||
<el-tab-pane label="配置管理" name="second" lc_id="GS8HXVlmCM">配置管理</el-tab-pane>
|
||||
<el-tab-pane label="角色管理" name="third" lc_id="/jr8Mrluge">角色管理</el-tab-pane>
|
||||
<el-tab-pane label="定时任务补偿" name="fourth" lc_id="CYHnAsRUdX">定时任务补偿</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div lc_id="ZNvwIyI0Gj">
|
||||
<div class="demonstration-element" lc_id="94nfjvP9P7">Breadcrumb 面包屑</div>
|
||||
<el-breadcrumb separator="/" lc-mark lc_id="IXjFDSAAbN">
|
||||
<el-breadcrumb-item :to="{ path: '/' }" lc_id="+fglUCnnjc">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item lc_id="p3a/Mymfnm">
|
||||
<a href="/" lc_id="JDk4WTNeok">活动管理</a>
|
||||
<div lc_id="0MpXv/hB5o">
|
||||
<div class="demonstration-element" lc_id="cXJHcFnFGI">Breadcrumb 面包屑</div>
|
||||
<el-breadcrumb separator="/" lc-mark lc_id="2kbMFsaBlw">
|
||||
<el-breadcrumb-item :to="{ path: '/' }" lc_id="Y24a1lsayw">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item lc_id="e7mudUt3T2">
|
||||
<a href="/" lc_id="2fk4blwWt1">活动管理</a>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item lc_id="c0pBs9wfpq">活动列表</el-breadcrumb-item>
|
||||
<el-breadcrumb-item lc_id="puOnAeoiUr">活动详情</el-breadcrumb-item>
|
||||
<el-breadcrumb-item lc_id="0uAUe0LS1k">活动列表</el-breadcrumb-item>
|
||||
<el-breadcrumb-item lc_id="vTAj15QynT">活动详情</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div lc_id="5x1yyr+pUS">
|
||||
<div class="demonstration-element" lc_id="oqU11GHCqz">PageHeader 页头</div>
|
||||
<el-page-header lc-mark @back="goBack2" content="详情页面" lc_id="bmCKcTmef6"></el-page-header>
|
||||
<div lc_id="VliPzBWiIr">
|
||||
<div class="demonstration-element" lc_id="URE6411ToF">PageHeader 页头</div>
|
||||
<el-page-header lc-mark @back="goBack2" content="详情页面" lc_id="VeIIrZpasX"></el-page-header>
|
||||
</div>
|
||||
<div lc_id="Ef/GYGM9Cn">
|
||||
<div class="demonstration-element" lc_id="XiK2EHOXSu">Dropdown 下拉菜单</div>
|
||||
<el-dropdown lc-mark lc_id="0pRExJy5Rd">
|
||||
<span class="el-dropdown-link" lc_id="hOjhZVZGbR">
|
||||
下拉菜单 <i class="el-icon-arrow-down el-icon--right" lc_id="87SkUBPdnB"></i>
|
||||
<div lc_id="q1K7UjfQRh">
|
||||
<div class="demonstration-element" lc_id="QRo+LiBcqY">Dropdown 下拉菜单</div>
|
||||
<el-dropdown lc-mark lc_id="eEugqtt2Ed">
|
||||
<span class="el-dropdown-link" lc_id="T9RXOuEAsg">
|
||||
下拉菜单 <i class="el-icon-arrow-down el-icon--right" lc_id="CptOnFiM0H"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown" lc_id="Fi6Q4IfNSE">
|
||||
<el-dropdown-item lc_id="l8vkCE/8VH">黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item lc_id="gbNMkf9GXr">狮子头</el-dropdown-item>
|
||||
<el-dropdown-item lc_id="uwaDtykZaN">螺蛳粉</el-dropdown-item>
|
||||
<el-dropdown-item disabled lc_id="rI2d1vErJ+">双皮奶</el-dropdown-item>
|
||||
<el-dropdown-item divided lc_id="6tbTs4xG9T">蚵仔煎</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
<template #dropdown lc_id="Jgi+BtUZkP">
|
||||
<el-dropdown-menu lc_id="fyNKB1+0hw">
|
||||
<el-dropdown-item lc_id="nCNWPghXw7">黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item lc_id="3moaMHtIVR">狮子头</el-dropdown-item>
|
||||
<el-dropdown-item lc_id="zeDetbgzeN">螺蛳粉</el-dropdown-item>
|
||||
<el-dropdown-item disabled lc_id="590JIX3HSV">双皮奶</el-dropdown-item>
|
||||
<el-dropdown-item divided lc_id="Svb2tOdBg/">蚵仔煎</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div lc_id="aZMbV9+94Y">
|
||||
<div class="demonstration-element" lc_id="WGB5x2VKOK">Steps 步骤条</div>
|
||||
<el-steps lc-mark :active="active" finish-status="success" lc_id="QWDOzkcFUw">
|
||||
<el-step title="步骤 1" lc_id="oFU9um/+li"></el-step>
|
||||
<el-step title="步骤 2" lc_id="+x6e7YMRDM"></el-step>
|
||||
<el-step lc-mark title="步骤 3" lc_id="AQTYrrbdjJ"></el-step>
|
||||
<div lc_id="qp0NNdlqXq">
|
||||
<div class="demonstration-element" lc_id="RGehF229fc">Steps 步骤条</div>
|
||||
<el-steps lc-mark :active="active" finish-status="success" lc_id="2yxeEC6GkQ">
|
||||
<el-step title="步骤 1" lc_id="IA1KW5Gwpv"></el-step>
|
||||
<el-step title="步骤 2" lc_id="sGjhJUaXCP"></el-step>
|
||||
<el-step lc-mark title="步骤 3" lc_id="gS1/xHiigS"></el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
<div lc_id="IiSr5DQBar">
|
||||
<div class="demonstration-element" lc_id="9vmJpfJXls">Card 卡片</div>
|
||||
<el-card lc-mark class="box-card" lc_id="JZ/f90Eao5">
|
||||
<div slot="header" class="clearfix" lc_id="SvmakA0ZV4">
|
||||
<span lc_id="DEDjfa97FG">卡片名称</span>
|
||||
<el-button style="float: right; padding: 3px 0" type="text" lc_id="cCyRGdP1cA">操作按钮</el-button>
|
||||
</div>
|
||||
<div v-for="o in 4" :key="o" class="text item" lc_id="LA6GOdkvYg">{{ "列表内容 " + o }}</div>
|
||||
<div lc_id="EduDP6YT5B">
|
||||
<div class="demonstration-element" lc_id="5Ryo1lT9Ri">Card 卡片</div>
|
||||
<el-card lc-mark class="box-card" lc_id="f7u3JZOXiY">
|
||||
<template #header lc_id="fcNx1E9u+l">
|
||||
<div class="clearfix" lc_id="JjiI6DiLa8">
|
||||
<span lc_id="HyznGRyy1o">卡片名称</span>
|
||||
<el-button style="float: right; padding: 3px 0" type="text" lc_id="2BV+GEiJPf">操作按钮</el-button>
|
||||
</div>
|
||||
<div v-for="o in 4" :key="o" class="text item" lc_id="WrqZOeR62/">{{ "列表内容 " + o }}</div>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
<div lc_id="ee7f8zuUHN">
|
||||
<div class="demonstration-element" lc_id="qFhGdZydOI">Carousel 走马灯</div>
|
||||
<el-carousel height="150px" lc-mark lc_id="HveY4zRKm+">
|
||||
<el-carousel-item v-for="item in 4" :key="item" lc_id="I/ur+JXX58">
|
||||
<h3 class="small" lc_id="S84XIuqocQ">{{ item }}</h3>
|
||||
<div lc_id="Ac3U6soq4v">
|
||||
<div class="demonstration-element" lc_id="yHQSJ5j0qr">Carousel 走马灯</div>
|
||||
<el-carousel height="150px" lc-mark lc_id="pf7cTX05Pe">
|
||||
<el-carousel-item v-for="item in 4" :key="item" lc_id="LWxEwOsKCc">
|
||||
<h3 class="small" lc_id="rY5AkL9779">{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<div lc_id="j/8ovh0QgR">
|
||||
<div class="demonstration-element" lc_id="L0tVuKxcoS">Collapse 折叠面板</div>
|
||||
<el-collapse lc-mark v-model="collapseActiveNames" @change="handleChange3" lc_id="+stqpbZFyN">
|
||||
<el-collapse-item title="一致性 Consistency" name="1" lc_id="EKpTUggLJB">
|
||||
<div lc_id="kNpJOEODiD">与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
|
||||
<div lc_id="4DFMNwSyQ0">在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
|
||||
<div lc_id="h98mxV67rm">
|
||||
<div class="demonstration-element" lc_id="YCdpR3F66X">Collapse 折叠面板</div>
|
||||
<el-collapse lc-mark v-model="collapseActiveNames" @change="handleChange3" lc_id="SxwGYgpIAH">
|
||||
<el-collapse-item title="一致性 Consistency" name="1" lc_id="9tnnQx3Q6z">
|
||||
<div lc_id="nEOQzKpL2r">与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
|
||||
<div lc_id="dAI8bwEYNq">在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="反馈 Feedback" name="2" lc_id="v1GKEI6eGp">
|
||||
<div lc_id="WCUf4+uzX+">控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
|
||||
<div lc_id="fC7dq5C7Iq">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
|
||||
<el-collapse-item title="反馈 Feedback" name="2" lc_id="B1Egey2IgT">
|
||||
<div lc_id="XNb772hFlA">控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
|
||||
<div lc_id="p/6OnJUnHn">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="效率 Efficiency" name="3" lc_id="dfv++aEQZC">
|
||||
<div lc_id="QOHvDd/wc2">简化流程：设计简洁直观的操作流程；</div>
|
||||
<div lc_id="1oggmSCvHj">清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
|
||||
<div lc_id="5cDwsEzcNt">帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
|
||||
<el-collapse-item title="效率 Efficiency" name="3" lc_id="Xq2hL9btvR">
|
||||
<div lc_id="fCqY57GW+o">简化流程：设计简洁直观的操作流程；</div>
|
||||
<div lc_id="O1v1vIbqMk">清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
|
||||
<div lc_id="oXshK9bC/I">帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="可控 Controllability" name="4" lc_id="1f8rwpll8a">
|
||||
<div lc_id="Cf3MSfNKcp">用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
|
||||
<div lc_id="8n+IxORrVY">结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
|
||||
<el-collapse-item title="可控 Controllability" name="4" lc_id="POyL7FoSe4">
|
||||
<div lc_id="DR+xM6f78t">用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
|
||||
<div lc_id="2g+ldln/84">结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
<div lc_id="9+vkQKnoU9">
|
||||
<div class="demonstration-element" lc_id="wOG8h/0Mkn">Timeline 时间线</div>
|
||||
<el-timeline :reverse="reverse" lc-mark lc_id="0w+R8i3YSH">
|
||||
<el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp" lc_id="1F6u/VeFjn">{{ activity.content }}</el-timeline-item>
|
||||
<div lc_id="0kee2BlFsA">
|
||||
<div class="demonstration-element" lc_id="0EBCjFbCyA">Timeline 时间线</div>
|
||||
<el-timeline :reverse="reverse" lc-mark lc_id="HcDb8BgA1w">
|
||||
<el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp" lc_id="lqCmZ7Zw9R">{{ activity.content }}</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<div lc_id="fIuGfE2t7Z">
|
||||
<div class="demonstration-element" lc_id="4RZBWs5HDh">Calendar 日历</div>
|
||||
<el-calendar lc-mark v-model="calendarValue" lc_id="GEH/lf9pJX"></el-calendar>
|
||||
<div lc_id="G64C6Q7euE">
|
||||
<div class="demonstration-element" lc_id="DnbJwJg18E">Calendar 日历</div>
|
||||
<el-calendar lc-mark v-model="calendarValue" lc_id="yd4ddVWJ69"></el-calendar>
|
||||
</div>
|
||||
<div lc_id="0OT80VaZz/"></div>
|
||||
<div lc_id="BHDMhfXQP4"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
<template lc_id="0sygtaZzzK">
|
||||
<div lc_id="ALTsXkmIGE">
|
||||
<div lc_id="IyBLXIo0O0">
|
||||
<div class="demonstration-element" lc_id="Nq2fzK+TO2">Image 图片</div>
|
||||
<div style="display: inline-block;" lc-mark lc_id="IXLvop//zD">
|
||||
<el-image style="width: 100px; height: 100px;" :src="url4" fit="fill" lc_id="JhLOV9CpES"></el-image>
|
||||
<template lc_id="PH+yAXBdg0">
|
||||
<div lc_id="sH9KziXOZQ">
|
||||
<div lc_id="utFsoBQhKe">
|
||||
<div class="demonstration-element" lc_id="OWDlcZd3tn">Image 图片</div>
|
||||
<div style="display: inline-block;" lc-mark lc_id="w68Klpv8Wr">
|
||||
<el-image style="width: 100px; height: 100px;" :src="url4" fit="fill" lc_id="RvayJfco9G"></el-image>
|
||||
</div>
|
||||
<div style="display: inline-block;" lc-mark lc_id="OfDbH48Dqd">
|
||||
<el-image style="width: 100px; height: 100px;" :src="url4" fit="contain" lc_id="f+p3OK5//3"></el-image>
|
||||
<div style="display: inline-block;" lc-mark lc_id="8L+gABRzhW">
|
||||
<el-image style="width: 100px; height: 100px;" :src="url4" fit="contain" lc_id="dInTMVYtvm"></el-image>
|
||||
</div>
|
||||
<div style="display: inline-block;" lc-mark lc_id="c7PkXHn46B">
|
||||
<el-image style="width: 100px; height: 100px;" :src="url4" fit="cover" lc_id="xpJHMNhDHQ"></el-image>
|
||||
<div style="display: inline-block;" lc-mark lc_id="YKNPD/ANjR">
|
||||
<el-image style="width: 100px; height: 100px;" :src="url4" fit="cover" lc_id="PNKy3Vw9/D"></el-image>
|
||||
</div>
|
||||
<div style="display: inline-block;" lc-mark lc_id="FHnrBwj71E">
|
||||
<el-image style="width: 100px; height: 100px;" :src="url4" fit="none" lc_id="pUzae4LDfZ"></el-image>
|
||||
<div style="display: inline-block;" lc-mark lc_id="/MMOV+luD/">
|
||||
<el-image style="width: 100px; height: 100px;" :src="url4" fit="none" lc_id="gvi3/VnpMI"></el-image>
|
||||
</div>
|
||||
<div style="display: inline-block;" lc-mark lc_id="yQL0FP2cM4">
|
||||
<el-image style="width: 100px; height: 100px;" :src="url4" fit="scale-down" lc_id="uXwV+xiW2H"></el-image>
|
||||
<div style="display: inline-block;" lc-mark lc_id="xyur7jxP1x">
|
||||
<el-image style="width: 100px; height: 100px;" :src="url4" fit="scale-down" lc_id="7G2nDtcr5y"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
<template lc_id="RBFHni4iTs">
|
||||
<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>
|
||||
<template >
|
||||
<div class="element-class">
|
||||
<lc-button></lc-button>
|
||||
<lc-table></lc-table>
|
||||
<lc-form ></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-icon ></lc-icon>
|
||||
<lc-layout ></lc-layout>
|
||||
<lc-container ></lc-container>
|
||||
<lc-final></lc-final>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import button from "./button";
|
||||
import button from "./button.vue";
|
||||
import table from "./table";
|
||||
import icon from "./icon";
|
||||
import layout from "./layout";
|
||||
import container from "./container";
|
||||
import form from "./form";
|
||||
import table from "./table";
|
||||
import formBase from "./form-base";
|
||||
import dialog from "./dialog";
|
||||
import image from "./image";
|
||||
@ -33,19 +33,17 @@ export default {
|
||||
mounted() {
|
||||
this.$emit('mounted');
|
||||
// 对所有拥有lc-mark的元素进行初始化
|
||||
let countComponentCount = 0;
|
||||
deepLCEle(document.querySelector('.element-class'), () => {
|
||||
countComponentCount++;
|
||||
});
|
||||
},
|
||||
methods: {},
|
||||
components: {
|
||||
"lc-button": button,
|
||||
"lc-table": table,
|
||||
"lc-icon": icon,
|
||||
"lc-form": form,
|
||||
"lc-layout": layout,
|
||||
"lc-container": container,
|
||||
"lc-table": table,
|
||||
"lc-form-base": formBase,
|
||||
"lc-dialog": dialog,
|
||||
"lc-image": image,
|
||||
|
||||
@ -1,116 +1,116 @@
|
||||
<template lc_id="KCiR9cYJ8P">
|
||||
<div lc_id="Quld4HtbiZ">
|
||||
<div lc_id="JpTYTNBzEe">
|
||||
<div class="demonstration-element" lc_id="5yst4mGOV4">Layout 布局</div>
|
||||
<el-row lc_id="RDMHdYfJZT" lc-mark>
|
||||
<el-col :span="24" lc_id="XCXYpAliTH">
|
||||
<div class="grid-content bg-purple-dark" lc_id="Q3pyBv0yQL"></div>
|
||||
<template lc_id="na2zPOL4fY">
|
||||
<div lc_id="7QLt3BTntD">
|
||||
<div lc_id="MoDIFD9beY">
|
||||
<div class="demonstration-element" lc_id="P3YgnZ+f9L">Layout 布局</div>
|
||||
<el-row lc-mark lc_id="NezszKss/U">
|
||||
<el-col :span="24" lc_id="TW/BDkcZrB">
|
||||
<div class="grid-content bg-purple-dark" lc_id="1Lsg2uMePE"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row lc_id="NNsSl/0P/J" lc-mark>
|
||||
<el-col :span="12" lc_id="ik3y978rcp">
|
||||
<div class="grid-content bg-purple" lc_id="m3rjlW975n"></div>
|
||||
<el-row lc-mark lc_id="TPZKAPgQp1">
|
||||
<el-col :span="12" lc_id="iNHSLalTdq">
|
||||
<div class="grid-content bg-purple" lc_id="euyIZziPqv"></div>
|
||||
</el-col>
|
||||
<el-col :span="12" lc_id="wmew/CNtQO">
|
||||
<div class="grid-content bg-purple-light" lc_id="q9JDM10/IT"></div>
|
||||
<el-col :span="12" lc_id="OVZhfCLYXt">
|
||||
<div class="grid-content bg-purple-light" lc_id="c7AXrVMer2"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row lc_id="GFwwG6ghFo" lc-mark>
|
||||
<el-col :span="8" lc_id="0YT4QBLtTF">
|
||||
<div class="grid-content bg-purple" lc_id="hpH8XVnCDp"></div>
|
||||
<el-row lc-mark lc_id="tzvFqToSIx">
|
||||
<el-col :span="8" lc_id="gqZj2TfLb8">
|
||||
<div class="grid-content bg-purple" lc_id="hU+oUAIchh"></div>
|
||||
</el-col>
|
||||
<el-col :span="8" lc_id="75j4FQBj12">
|
||||
<div class="grid-content bg-purple-light" lc_id="C/i2L9sIfj"></div>
|
||||
<el-col :span="8" lc_id="Ce0iiKHF1D">
|
||||
<div class="grid-content bg-purple-light" lc_id="dYm8Ds+7GU"></div>
|
||||
</el-col>
|
||||
<el-col :span="8" lc_id="r9Q5Xv5maF">
|
||||
<div class="grid-content bg-purple" lc_id="ewyMhNwR6d"></div>
|
||||
<el-col :span="8" lc_id="jJwg57nJyc">
|
||||
<div class="grid-content bg-purple" lc_id="WgFRKki5iV"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row lc_id="TGg1ilWwDC" lc-mark>
|
||||
<el-col :span="6" lc_id="zhlSX3rR1s">
|
||||
<div class="grid-content bg-purple" lc_id="i72CkFCaxP"></div>
|
||||
<el-row lc-mark lc_id="DISqSQIRuT">
|
||||
<el-col :span="6" lc_id="YzZ2AwSW6G">
|
||||
<div class="grid-content bg-purple" lc_id="u5xd9+dh9V"></div>
|
||||
</el-col>
|
||||
<el-col :span="6" lc_id="NGEEvGtT6b">
|
||||
<div class="grid-content bg-purple-light" lc_id="1wPVHPytz5"></div>
|
||||
<el-col :span="6" lc_id="LEPFDf8YYH">
|
||||
<div class="grid-content bg-purple-light" lc_id="D05FS4uRjs"></div>
|
||||
</el-col>
|
||||
<el-col :span="6" lc_id="5B66ihgyQV">
|
||||
<div class="grid-content bg-purple" lc_id="nGJUxZOYaY"></div>
|
||||
<el-col :span="6" lc_id="BBCqvPJv/X">
|
||||
<div class="grid-content bg-purple" lc_id="S42KNtBQFZ"></div>
|
||||
</el-col>
|
||||
<el-col :span="6" lc_id="Jnh3LKyyBk">
|
||||
<div class="grid-content bg-purple-light" lc_id="C3mr7GCJCp"></div>
|
||||
<el-col :span="6" lc_id="DHblSwi+L7">
|
||||
<div class="grid-content bg-purple-light" lc_id="ivjjPVjjnr"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row lc_id="FfE34D+quR" lc-mark>
|
||||
<el-col :span="4" lc_id="HqC4QfXfTK">
|
||||
<div class="grid-content bg-purple" lc_id="NRyP+QJeKT"></div>
|
||||
<el-row lc-mark lc_id="9mPg3N+4Qw">
|
||||
<el-col :span="4" lc_id="T8HazUYEOt">
|
||||
<div class="grid-content bg-purple" lc_id="meZQqlUbyc"></div>
|
||||
</el-col>
|
||||
<el-col :span="4" lc_id="0/hMidvlgB">
|
||||
<div class="grid-content bg-purple-light" lc_id="ni6mKUYv9J"></div>
|
||||
<el-col :span="4" lc_id="us0lyJqF9u">
|
||||
<div class="grid-content bg-purple-light" lc_id="Dg7zC5FRWM"></div>
|
||||
</el-col>
|
||||
<el-col :span="4" lc_id="/1mTPqxtpo">
|
||||
<div class="grid-content bg-purple" lc_id="y62SKNzieE"></div>
|
||||
<el-col :span="4" lc_id="Jg2zamD3Pm">
|
||||
<div class="grid-content bg-purple" lc_id="pTHu7SCFdf"></div>
|
||||
</el-col>
|
||||
<el-col :span="4" lc_id="LjWQqmPTg/">
|
||||
<div class="grid-content bg-purple-light" lc_id="yGYelo1dP7"></div>
|
||||
<el-col :span="4" lc_id="uFfJtyu3lO">
|
||||
<div class="grid-content bg-purple-light" lc_id="4Y1h471JWS"></div>
|
||||
</el-col>
|
||||
<el-col :span="4" lc_id="Vu2aVQiqIx">
|
||||
<div class="grid-content bg-purple" lc_id="b054Y4DJeB"></div>
|
||||
<el-col :span="4" lc_id="n2nFYPBVOv">
|
||||
<div class="grid-content bg-purple" lc_id="oZwq90Bi+e"></div>
|
||||
</el-col>
|
||||
<el-col :span="4" lc_id="E2rYxtm/qD">
|
||||
<div class="grid-content bg-purple-light" lc_id="KOOA8s6rOL"></div>
|
||||
<el-col :span="4" lc_id="5+xwb7Y6SI">
|
||||
<div class="grid-content bg-purple-light" lc_id="bh/aoF+9ya"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div lc_id="zXc6Fq0841">
|
||||
<div class="demonstration-element" lc_id="SBZzIUSzTK">Layout 分栏间隔布局</div>
|
||||
<el-row :gutter="20" lc-mark lc_id="VZsac7yKoo">
|
||||
<el-col :span="6" lc_id="WNvXYnn1Jh">
|
||||
<div class="grid-content bg-purple" lc_id="ZTJoF+cmoa"></div>
|
||||
<div lc_id="TYy/bOUMNr">
|
||||
<div class="demonstration-element" lc_id="trBMz5blKg">Layout 分栏间隔布局</div>
|
||||
<el-row :gutter="20" lc-mark lc_id="gFfya4TxDk">
|
||||
<el-col :span="6" lc_id="ws0L3MK/Zd">
|
||||
<div class="grid-content bg-purple" lc_id="Ubsbv5h8rG"></div>
|
||||
</el-col>
|
||||
<el-col :span="6" lc_id="U1LTx3WbXw">
|
||||
<div class="grid-content bg-purple" lc_id="UwNQIlRIzl"></div>
|
||||
<el-col :span="6" lc_id="JSzu5D9Sfk">
|
||||
<div class="grid-content bg-purple" lc_id="O0Rgdk3cKz"></div>
|
||||
</el-col>
|
||||
<el-col :span="6" lc_id="iMlxvMwEAH">
|
||||
<div class="grid-content bg-purple" lc_id="soX5vi3Iyo"></div>
|
||||
<el-col :span="6" lc_id="QEAC8l6awc">
|
||||
<div class="grid-content bg-purple" lc_id="N+YhMdOQVb"></div>
|
||||
</el-col>
|
||||
<el-col :span="6" lc_id="s5vO3hDAg9">
|
||||
<div class="grid-content bg-purple" lc_id="0y9r0LzJ4L"></div>
|
||||
<el-col :span="6" lc_id="ojGD7eUbaa">
|
||||
<div class="grid-content bg-purple" lc_id="cMouTO1yO7"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div lc_id="pCMW7dgNrQ">
|
||||
<div class="demonstration-element" lc_id="f8OXr3g1YW">Layout 混合布局</div>
|
||||
<el-row :gutter="20" lc-mark lc_id="Zq7py9AGsn">
|
||||
<el-col :span="16" lc_id="neOUpgtdVA">
|
||||
<div class="grid-content bg-purple" lc_id="qikR4Vzu0f"></div>
|
||||
<div lc_id="xbQPgKUBIy">
|
||||
<div class="demonstration-element" lc_id="Bc2PY/ZYiU">Layout 混合布局</div>
|
||||
<el-row :gutter="20" lc-mark lc_id="nYMpGdRSrq">
|
||||
<el-col :span="16" lc_id="eMrh2sYnKx">
|
||||
<div class="grid-content bg-purple" lc_id="IC5Wm1Hn9n"></div>
|
||||
</el-col>
|
||||
<el-col :span="8" lc_id="zlBPWg1V7a">
|
||||
<div class="grid-content bg-purple" lc_id="iLBVThoOoc"></div>
|
||||
<el-col :span="8" lc_id="Xs8VJkHelZ">
|
||||
<div class="grid-content bg-purple" lc_id="ypg8TKxYh5"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" lc-mark lc_id="YC+S7VupJs">
|
||||
<el-col :span="8" lc_id="ABLkZSuGPS">
|
||||
<div class="grid-content bg-purple" lc_id="nDJd5yM8Nr"></div>
|
||||
<el-row :gutter="20" lc-mark lc_id="Gm4zSQrKoN">
|
||||
<el-col :span="8" lc_id="HBbcLaIE9m">
|
||||
<div class="grid-content bg-purple" lc_id="BGPEKw0h4I"></div>
|
||||
</el-col>
|
||||
<el-col :span="8" lc_id="/Deo/nfRdM">
|
||||
<div class="grid-content bg-purple" lc_id="LnW2OQ2NVq"></div>
|
||||
<el-col :span="8" lc_id="pK9Tw20FRI">
|
||||
<div class="grid-content bg-purple" lc_id="ARxfz9lR3l"></div>
|
||||
</el-col>
|
||||
<el-col :span="4" lc_id="vf0CYfffSU">
|
||||
<div class="grid-content bg-purple" lc_id="Eibajf6Ar2"></div>
|
||||
<el-col :span="4" lc_id="dRZMyvJPRM">
|
||||
<div class="grid-content bg-purple" lc_id="XIKrToEQJd"></div>
|
||||
</el-col>
|
||||
<el-col :span="4" lc_id="XqrufGjyFK">
|
||||
<div class="grid-content bg-purple" lc_id="6CDgh9dRiB"></div>
|
||||
<el-col :span="4" lc_id="0pIE7zGZUg">
|
||||
<div class="grid-content bg-purple" lc_id="rW6P8kYrWR"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" lc-mark lc_id="v6mXva7Ifr">
|
||||
<el-col :span="4" lc_id="GrGSA1uKJv">
|
||||
<div class="grid-content bg-purple" lc_id="0x2kjflvjy"></div>
|
||||
<el-row :gutter="20" lc-mark lc_id="jgi7BKYF+0">
|
||||
<el-col :span="4" lc_id="EZF3aOWMra">
|
||||
<div class="grid-content bg-purple" lc_id="2HeQgzYeYn"></div>
|
||||
</el-col>
|
||||
<el-col :span="16" lc_id="9YsDY7Y6M4">
|
||||
<div class="grid-content bg-purple" lc_id="jy3k/ylVM5"></div>
|
||||
<el-col :span="16" lc_id="2AVcBud9PA">
|
||||
<div class="grid-content bg-purple" lc_id="6XvbIskPHD"></div>
|
||||
</el-col>
|
||||
<el-col :span="4" lc_id="vbEJZx5KlA">
|
||||
<div class="grid-content bg-purple" lc_id="JPRghBbcwh"></div>
|
||||
<el-col :span="4" lc_id="y4UEbmjim5">
|
||||
<div class="grid-content bg-purple" lc_id="m4yavM6CB5"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
@ -1,29 +1,29 @@
|
||||
<template lc_id="BHClb68uyL">
|
||||
<div lc_id="4wLY9fQl2E">
|
||||
<div lc_id="Ko17F4IQXP">
|
||||
<div class="demonstration-element" lc_id="vYOpmmF/R0">Table 表格</div>
|
||||
<el-table :data="tableData" style="width: 100%" lc-mark lc_id="T6T7c1p16B">
|
||||
<el-table-column prop="date" label="日期" width="180" lc_id="oG9cZ3BlCT"></el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="180" lc_id="LkLHx3aqOa"></el-table-column>
|
||||
<el-table-column prop="address" label="地址" lc_id="lsXfyqD4Er"></el-table-column>
|
||||
<template lc_id="f5Ag3iA9vi">
|
||||
<div lc_id="rC5FKIl93Q">
|
||||
<div lc_id="5hZQP7chtb">
|
||||
<div class="demonstration-element" lc_id="yKAcBIB8ML">Table 表格</div>
|
||||
<el-table :data="tableData" style="width: 100%" lc-mark lc_id="h1AxSuk1JX">
|
||||
<el-table-column prop="date" label="日期" width="180" lc_id="N5KOR7kGoN"></el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="180" lc_id="v3jApEZujz"></el-table-column>
|
||||
<el-table-column prop="address" label="地址" lc_id="Ryei21Kxoy"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div lc_id="taXbrp1lKH">
|
||||
<div class="demonstration-element" lc_id="l2+MLlmW8Y">Table 动态表格👍</div>
|
||||
<el-table :data="tableData" style="width: 100%" lc-mark lc_id="Pndn3Vp6Rx">
|
||||
<el-table-column :prop="propItem.prop" :label="propItem.label" v-for="propItem in propList" :key="propItem.prop" lc_id="neIrh92kHU">
|
||||
<template v-slot="{ row }" lc_id="sKUOEvY82H">
|
||||
<span v-if="!propItem.component" lc_id="8Jox7iwljY">{{
|
||||
<div lc_id="FoIEdS4sgT">
|
||||
<div class="demonstration-element" lc_id="9MFKGxfvJ5">Table 动态表格👍</div>
|
||||
<el-table :data="tableData" style="width: 100%" lc-mark lc_id="+5AJzAYChF">
|
||||
<el-table-column :prop="propItem.prop" :label="propItem.label" v-for="propItem in propList" :key="propItem.prop" lc_id="gfwgFzB3gO">
|
||||
<template v-slot="{ row }" lc_id="WHqNxzDsFe">
|
||||
<span v-if="!propItem.component" lc_id="isWGW9SLlm">{{
|
||||
row[propItem.prop]
|
||||
}}</span>
|
||||
<component v-else v-bind:is="propItem.component" :rowinfo="row" lc_id="aMR4DSYBZz"></component>
|
||||
<component v-else v-bind:is="propItem.component" :rowinfo="row" lc_id="DktA4JZ5fs"></component>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div lc_id="LSgcsWU12G">
|
||||
<div class="demonstration-element" lc_id="RW6uK0v/uQ">Pagination 分页</div>
|
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" lc-mark layout="prev, pager, next" :total="400" lc_id="r+K0+FJnu3"></el-pagination>
|
||||
<div lc_id="GHEnA/+R+x">
|
||||
<div class="demonstration-element" lc_id="LphVmiAWKZ">Pagination 分页</div>
|
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" lc-mark layout="prev, pager, next" :total="400" lc_id="V3nz0Q3sZA"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -17,14 +17,6 @@
|
||||
<span lc_id="m+Oy7pHzNT" lc-mark>Span Element</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr lc_id="xunAa9pXZZ">
|
||||
<td lc_id="m11Db3zz1r">
|
||||
<div class="title" lc_id="dSImHjC62W">center:</div>
|
||||
</td>
|
||||
<td lc_id="KrJXHbe0Y4">
|
||||
<center lc_id="CN8KOU6sKz" lc-mark>Center Element</center>
|
||||
</td>
|
||||
</tr>
|
||||
<tr lc_id="Ejan36KyM/">
|
||||
<td lc_id="ke9QDthYso">
|
||||
<div class="title" lc_id="V2t1JzpJnA">a（超链接）:</div>
|
||||
|
||||
@ -135,15 +135,15 @@ export default {
|
||||
onClickEditAddress(){}
|
||||
},
|
||||
}; </script>
|
||||
<style scoped>::v-deep .van-tabbar--fixed {
|
||||
<style scoped>:v-deep(.van-tabbar--fixed) {
|
||||
position: initial;
|
||||
}
|
||||
::v-deep .van-address-list__bottom {
|
||||
:v-deep(.van-address-list__bottom) {
|
||||
position: initial;
|
||||
}
|
||||
::v-deep .van-goods-action {
|
||||
:v-deep(.van-goods-action) {
|
||||
position: initial;
|
||||
}
|
||||
::v-deep .van-submit-bar {
|
||||
:v-deep(.van-submit-bar) {
|
||||
position: initial;
|
||||
}</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import isEqual from "lodash/isEqual";
|
||||
import cryptoRandomString from "crypto-random-string";
|
||||
import isEqual from "lodash-es/isEqual";
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,10 +13,7 @@ export function replaceRowID(codeObj, html) {
|
||||
const element = obj[key];
|
||||
if (key == "lc_id") {
|
||||
const oldID = obj[key];
|
||||
const newID = cryptoRandomString({
|
||||
length: 10,
|
||||
type: "base64",
|
||||
});
|
||||
const newID = createUniqueId();
|
||||
newHtml = newHtml.replace(oldID, newID);
|
||||
obj[key] = newID;
|
||||
} else if (isObject(element)) {
|
||||
@ -40,7 +36,7 @@ export function updateLinkTree(codeObj) {
|
||||
window.tree = {};
|
||||
}
|
||||
if (!window.treeWithID) {
|
||||
const innerObj = {};
|
||||
let innerObj = {};
|
||||
Object.defineProperty(window, 'treeWithID', {
|
||||
get: function () {
|
||||
return innerObj;
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
export default function(code, { imports }) {
|
||||
return {
|
||||
name: 'get-imports',
|
||||
|
||||
visitor: {
|
||||
ImportDeclaration(path) {
|
||||
imports.push({
|
||||
variables: path.node.specifiers.map(spec => ({
|
||||
local: spec.local.name,
|
||||
imported: spec.imported ? spec.imported.name : 'default'
|
||||
})),
|
||||
module: path.node.source.value
|
||||
});
|
||||
path.remove();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
import parsePackageName from 'parse-package-name';
|
||||
|
||||
export default async function(code, imports, scripts) {
|
||||
const replacements = [];
|
||||
|
||||
for (const [index, item] of imports.entries()) {
|
||||
const moduleName = `__npm_module_${index}`;
|
||||
const pkg = parsePackageName(item.module);
|
||||
const version = pkg.version || 'latest';
|
||||
scripts.push({
|
||||
path: pkg.path ? `/${pkg.path}` : '',
|
||||
name: moduleName,
|
||||
module:
|
||||
pkg.name === 'vue' && !pkg.path
|
||||
? `vue@${version}/dist/vue.esm.js`
|
||||
: `${pkg.name}@${version}`
|
||||
});
|
||||
let replacement = '\n';
|
||||
for (const variable of item.variables) {
|
||||
if (variable.imported === 'default') {
|
||||
replacement += `var ${
|
||||
variable.local
|
||||
} = ${moduleName}.default || ${moduleName};\n`;
|
||||
} else {
|
||||
replacement += `var ${variable.local} = ${moduleName}.${
|
||||
variable.imported
|
||||
};\n`;
|
||||
}
|
||||
}
|
||||
if (replacement) {
|
||||
replacements.push(replacement);
|
||||
}
|
||||
}
|
||||
|
||||
if (replacements.length > 0) {
|
||||
code = replacements.join('\n') + code;
|
||||
}
|
||||
|
||||
return code;
|
||||
}
|
||||
@ -1,59 +0,0 @@
|
||||
/**
|
||||
* From: https://github.com/egoist/codepan/blob/2c22bb3d7a7a4e31fd99fc640d320f7ec24d2951/src/utils/iframe.js
|
||||
*/
|
||||
import { Loading } from 'element-ui';
|
||||
class Iframe {
|
||||
constructor({ container, el, sandboxAttributes = [] }) {
|
||||
if (!el) {
|
||||
throw new Error('Expect "el" to mount iframe to!');
|
||||
}
|
||||
this.$container = container;
|
||||
this.$el = el;
|
||||
this.sandboxAttributes = sandboxAttributes;
|
||||
}
|
||||
|
||||
setHTML(obj) {
|
||||
let html;
|
||||
|
||||
if (typeof obj === 'string') {
|
||||
html = obj;
|
||||
} else {
|
||||
const { head = '', body = '' } = obj;
|
||||
html = `<!DOCTYPE html><html><head>${head}</head><body>${body}</body></html>`;
|
||||
}
|
||||
|
||||
// 关闭上一个实例引起的loading
|
||||
if (this.loadingInstance) {
|
||||
this.loadingInstance.close();
|
||||
}
|
||||
|
||||
this.loadingInstance = Loading.service({
|
||||
target: this.$container,
|
||||
text: '渲染中，请稍后...'
|
||||
});
|
||||
|
||||
const iframe = this.createIframe();
|
||||
iframe.addEventListener('load', () => {
|
||||
this.loadingInstance.close();
|
||||
})
|
||||
|
||||
this.$el.parentNode.replaceChild(iframe, this.$el);
|
||||
iframe.contentWindow.document.open();
|
||||
iframe.contentWindow.document.write(html);
|
||||
iframe.contentWindow.document.close();
|
||||
|
||||
this.$el = iframe;
|
||||
}
|
||||
|
||||
createIframe() {
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.setAttribute('sandbox', this.sandboxAttributes.join(' '));
|
||||
iframe.setAttribute('scrolling', 'yes');
|
||||
iframe.style.width = '100%';
|
||||
iframe.style.height = '100%';
|
||||
iframe.style.border = '0';
|
||||
return iframe;
|
||||
}
|
||||
}
|
||||
|
||||
export default (...args) => new Iframe(...args);
|
||||
@ -1,5 +1,4 @@
|
||||
import { generateRawInfo, getSplitTag } from './forCode';
|
||||
import { getRawComponentKey } from './common';
|
||||
|
||||
|
||||
// 遍历DOM树，初始化lc-mark标记的元素
|
||||
|
||||
@ -1,55 +0,0 @@
|
||||
import qs from 'query-string';
|
||||
import deepmerge from 'deepmerge';
|
||||
|
||||
const DEFAULT_PARAMS = {
|
||||
pkgs: ['https://static.imonkey.xueersi.com/vue-code-creater/resource/vue.js', 'https://static.imonkey.xueersi.com/vue-code-creater/resource/element-ui/index.js'],
|
||||
css: ['https://static.imonkey.xueersi.com/vue-code-creater/resource/element-ui/index.css'],
|
||||
};
|
||||
|
||||
let params = DEFAULT_PARAMS;
|
||||
|
||||
function getArr(str) {
|
||||
if (Array.isArray(str)) {
|
||||
return str;
|
||||
}
|
||||
if (typeof str === 'string') {
|
||||
return str.split(',');
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
export function clear() {
|
||||
params = DEFAULT_PARAMS;
|
||||
}
|
||||
|
||||
export function parse(str) {
|
||||
try {
|
||||
merge(JSON.parse(str));
|
||||
} catch (e) {
|
||||
console.error('error', e.message);
|
||||
}
|
||||
}
|
||||
|
||||
export function queryParse(str) {
|
||||
const query = qs.parse(str);
|
||||
const pkgs = getArr(query.pkg);
|
||||
const css = getArr(query.css);
|
||||
const options = { pkgs, css };
|
||||
|
||||
if (query.cdn) {
|
||||
options.cdn = query.cdn;
|
||||
}
|
||||
if (query.vue) {
|
||||
options.vue = query.vue;
|
||||
}
|
||||
|
||||
merge(options);
|
||||
}
|
||||
|
||||
export function get() {
|
||||
return deepmerge(DEFAULT_PARAMS, params);
|
||||
}
|
||||
|
||||
export function merge(opts) {
|
||||
params = deepmerge(params, opts);
|
||||
}
|
||||
30
vite.config.js
Normal file
30
vite.config.js
Normal file
@ -0,0 +1,30 @@
|
||||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
|
||||
import path from "path";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
],
|
||||
resolve: {
|
||||
alias: [
|
||||
{
|
||||
find: "@",
|
||||
replacement: path.resolve(__dirname, "src"),
|
||||
},
|
||||
{
|
||||
find: "vue",
|
||||
replacement: "vue/dist/vue.esm-bundler.js"
|
||||
}
|
||||
],
|
||||
extensions: [".vue", ".js"],
|
||||
},
|
||||
server: {
|
||||
fs: {
|
||||
// 可以为项目根目录的上一级提供服务
|
||||
allow: [".."],
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -3,7 +3,8 @@ const path = require("path");
|
||||
module.exports = {
|
||||
css: { extract: false },
|
||||
chainWebpack: (config) => {
|
||||
config.resolve.alias.set("vue$", "vue/dist/vue.esm.js");
|
||||
// config.resolve.alias.set("vue$", "vue/dist/vue.esm.js");
|
||||
// config.resolve.alias.set('vue', '@vue/compat/dist/vue.esm-browser.prod.js')
|
||||
},
|
||||
|
||||
publicPath: process.env.PUBLIC_PATH,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user