study/vue-component-creater-ui
1
0
Fork 0
mirror of https://github.com/sahadev/vue-component-creater-ui.git synced 2025-06-06 13:04:05 +08:00
Code Issues Releases Wiki Activity

update: 移除所有不支持的el-icon图标

Browse Source
This commit is contained in:
shangbin 2022-01-28 17:39:54 +08:00
parent 5d6d7dbf5a
commit 13672363f0
23 changed files with 305 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -106,7 +106,7 @@ npm i
npm run dev
```
运行完成后，就可以访问[http://localhost:8008/](http://localhost:8008/)预览效果了.
运行完成后，就可以访问[http://localhost:9818/](http://localhost:9818/)预览效果了.
## 使用介绍

5
package-lock.json generated
View File

@ -1172,6 +1172,11 @@
"resolved": "https://rg.cnpmjs.org/@element-plus/icons/download/@element-plus/icons-0.0.11.tgz",
"integrity": "sha1-mxh8ACd0VIuRGFDRf6X8L5pRX1c="
},
"@element-plus/icons-vue": {
"version": "0.2.6",
"resolved": "https://r.cnpmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.6.tgz",
"integrity": "sha512-2gg7VCq4d2firgl7/aVym4Cx/wqKFwKybEQGJiiWJN4urW36+QdAEG1knqSD9qidbjhVp0Jnc9XdSTR1/4Whzw=="
},
"@hapi/address": {
"version": "2.1.4",
"resolved": "https://r.cnpmjs.org/@hapi/address/download/@hapi/address-2.1.4.tgz",

8
package.json
View File

@ -9,10 +9,10 @@
],
"main": "./dist/vcc.umd.min.js",
"scripts": {
"dev": "vite --port 8008",
"serve": "vite --port 8008",
"dev": "vite --port 9818",
"serve": "vite --port 9818",
"build:release": "vite build --base=https://static.imonkey.xueersi.com/vcc3/",
"build": "vue-cli-service build --report --target lib --name vcc './src/components-v2/VCC.vue' && node ./src/script/distClear.js",
"build": "vue-cli-service build --report --target lib --name vcc './src/components-v2/VCC.vue'",
"build:win": "vue-cli-service build --report --target lib --name vcc ./src/components-v2/VCC.vue && node ./src/script/distClear.js",
"compileAndbuild:dev": "npm run compileComponent && vue-cli-service build",
"lint": "vue-cli-service lint",
@ -22,7 +22,7 @@
"debugParser": "node ./src/test/parserJsCode.js"
},
"dependencies": {
"@element-plus/icons": "0.0.11",
"@element-plus/icons-vue": "^0.2.6",
"@vitejs/plugin-vue": "^1.10.0",
"@vue/compiler-sfc": "^3.2.22",
"ant-design-vue": "^3.0.0-alpha.14",

5
src/App.vue
View File

@ -1,5 +1,5 @@
<template>
<vcc :initCodeEntity="codeInfoEntity" @updateCodeEntity="onCodeUpdate"></vcc>
<vcc :initCodeEntity="codeInfoEntity" @updateCodeEntity="onCodeUpdate" @onLoadFinish="onLoadFinish"></vcc>
</template>
<script>
@ -39,6 +39,9 @@ export default {
// 编辑后新的代码结构
// codeRawVueInfo为template对象表示结构
// JSCode为显式输入的JS逻辑
},
onLoadFinish(){
}
}
}

31
src/components-v2/VCC.vue
View File

@ -37,7 +37,7 @@
<el-tooltip effect="dark" content="查看实时代码" placement="top-start">
<img class="round-icon" :src="iconCode" alt="" @click="codeDialogVisible = true">
</el-tooltip>
<el-popconfirm confirmButtonText="确认" cancelButtonText="点错了" icon="el-icon-info" iconColor="red"
<el-popconfirm confirmButtonText="确认" cancelButtonText="点错了" iconColor="red"
title="点我将清空所有编辑的内容, 确认吗?" @confirm="clear">
<template #reference>
<img class="round-icon" :src="iconClear" alt="">
@ -49,7 +49,7 @@
<lc-code :rawCode="code" v-model:codeDialogVisible="codeDialogVisible">
</lc-code>
<code-structure @save="onSaveAttr" @remove="onRemove" ref="codeStructure" v-model="structureVisible"
@reRender="render">
@reRender="render" :initStructure="codeRawVueInfo">
</code-structure>
<CodeEditor v-model:codeDialogVisible="jsDialogVisible" @saveJSCode="saveJSCode" ref="codeEditor"></CodeEditor>
<VueEditor v-model:vueDialogVisible="vueDialogVisible" @codeParseSucess="codeParseSucess"></VueEditor>
@ -85,7 +85,7 @@ export default {
}
}
},
emits: ['updateCodeEntity'],
emits: ['updateCodeEntity', 'onLoadFinish'],
components: {
RawComponents: defineAsyncComponent(() => import("@/components/RawComponents.vue")),
ToolsBar: defineAsyncComponent(() => import("./ToolsBar")),
@ -108,7 +108,7 @@ export default {
editMode: true,
codeRawVueInfo: "",
codeRawVueInfo: null,
JSCode: ""
};
},
@ -135,7 +135,8 @@ export default {
},
computed: {
},
beforeCreate() { },
beforeCreate() {
},
created() {
this.mainPanelProvider = new MainPanelProvider();
},
@ -155,16 +156,16 @@ export default {
methods: {
convertLogicCode(JSCode) {
try {
const JSCodeInfo = eval(`(function(){return ${JSCode.replace(/\s+/g, "")}})()`);
// 保留JS代码
this.JSCode = JSCode;
if (this.$refs.codeEditor) {
this.$refs.codeEditor.updateLogicCode(JSCode);
}
return JSCodeInfo;
} catch (e) {
console.warn(`外部逻辑代码解析出错，解析的逻辑代码为: ${JSCode}, Error: ${e}`);
const JSCodeInfo = eval(`(function(){return ${JSCode.replace(/\s+/g, "")}})()`);
// 保留JS代码
this.JSCode = JSCode;
if (this.$refs.codeEditor) {
this.$refs.codeEditor.updateLogicCode(JSCode);
}
return JSCodeInfo;
} catch (e) {
console.warn(`外部逻辑代码解析出错，解析的逻辑代码为: ${JSCode}, Error: ${e}`);
}
},
initShortcut() {
@ -209,7 +210,7 @@ export default {
}).onSelectElement(rawInfo => {
this.currentEditRawInfo = rawInfo;
}).saveJSCodeOnly(this.convertLogicCode(this.initCodeEntity.JSCode ? this.initCodeEntity.JSCode : ''))
.render(this.initCodeEntity.codeStructure ? this.initCodeEntity.codeStructure : this.getFakeData());
.render(this.initCodeEntity.codeStructure ? this.initCodeEntity.codeStructure : this.getFakeData());
},
// 通知父组件

15
src/components/AttributeInput.vue
View File

@ -14,23 +14,23 @@
<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" style="flex-grow: 3;"></el-input>
<el-icon @click="deleteItem(index)" style="margin-left: 5px;"><minus /></el-icon>
<el-icon @click="deleteItem(index)" style="margin-left: 5px;"><l-minus /></el-icon>
</div>
<div class="quick-add-root">
快速增加一些属性:
<div style="margin-top: 5px;">
<transition name="el-zoom-in-center">
<el-tag v-if="attributeKeys.indexOf('class') == -1" size="mini" type="success" @click="onClassClick"
<el-tag v-if="attributeKeys.indexOf('class') == -1" size="small" type="success" @click="onClassClick"
effect="dark">Class
</el-tag>
</transition>
<transition name="el-zoom-in-center">
<el-tag v-if="attributeKeys.indexOf('@click') == -1" size="mini" type="success" @click="onEventClick"
<el-tag v-if="attributeKeys.indexOf('@click') == -1" size="small" type="success" @click="onEventClick"
effect="dark">点击事件</el-tag>
</transition>
<transition name="el-zoom-in-center">
<el-tag v-if="!attributeKeys.includes('__text__')" size="mini" type="success" @click="onTextClick"
<el-tag v-if="!attributeKeys.includes('__text__')" size="small" type="success" @click="onTextClick"
effect="dark">文本内容</el-tag>
</transition>
</div>
@ -52,12 +52,12 @@
</el-tooltip>
<el-tooltip class="item" effect="dark" content="保存属性 ctrl+s" placement="bottom">
<el-button type="success" class="center" @click="save" circle>
<el-icon><refresh /></el-icon>
<el-icon><l-refresh /></el-icon>
</el-button>
</el-tooltip>
<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-icon><l-delete /></el-icon>
</el-button>
</el-tooltip>
<el-tooltip v-if="enableBroButton" class="item" effect="dark" content="复制一个兄弟组件 ctrl+c" placement="bottom">
@ -77,6 +77,7 @@
import { getRawComponentKey, getRawComponentContent } from "@/utils/common";
import { brotherEleEnum, copyBroCode } from "@/libs/bro-ele-config";
import keymaster from "keymaster"
import { store as _store } from "@/libs/store.js";
export default {
props: ['__rawVueInfo__', 'enableRemoveButton', 'shortcutInitMode'],// __rawVueInfo__为当前编辑的原始代码对象, shortcutInitMode快捷键的初始化方式
@ -197,7 +198,7 @@ export default {
},
copyBro() {
copyBroCode(this.__rawVueInfo__);
this.$store.commit('onDragEnd');
_store.commit('onDragEnd');
},
onShow() {
// 这种方式适用于常规模式下的初始化，因为这个实例初始化后不会被销毁，一直常驻内存。但又不能受到其它实例销毁时的影响，所以需要明确的再次初始化。

35
src/components/CodeStructure.vue
View File

@ -1,8 +1,8 @@
<template>
<el-drawer v-model="drawer" :with-header="false" size="70%" direction="btt">
<div class="container">
<div class="cs-container">
<div style="text-align: center;">组件结构检视图
<div class="center">组件结构检视图
<br>
<span style="font-size:12px;">Components
Structure</span>
@ -28,12 +28,13 @@
</template>
<script>
import { isObject, getRawComponentKey, getRawComponentContent } from "@/utils/common";
import { getRawComponentContent } from "@/utils/common";
import nestedDraggable from './nested.vue'
import { defineAsyncComponent } from 'vue'
import { store as _store } from "@/libs/store.js";
export default {
props: ['visible'],
props: ['visible', 'initStructure'],
emits: ['onLevelChange', 'remove', 'save', 'update:visible', 'reRender'],
components: {
AttributeInput: defineAsyncComponent(() => import("@/components/AttributeInput.vue")),
@ -50,6 +51,7 @@ export default {
created() { },
beforeMount() { },
mounted() {
this.updateCode(this.initStructure);
},
beforeUpdate() { },
updated() { },
@ -70,15 +72,17 @@ export default {
},
updateCode(codeRawInfo) {
this._codeRawInfo = codeRawInfo;
const content = getRawComponentContent(codeRawInfo);
const children = content.__children;
this.treeData = children;
if (codeRawInfo) {
this._codeRawInfo = codeRawInfo;
const content = getRawComponentContent(codeRawInfo);
const children = content.__children;
this.treeData = children;
}
},
},
watch: {
renderCount(){
renderCount() {
// 这里利用了vuedraggable v-model的特性，它会更改对象本身的引用
this.$emit('reRender', this._codeRawInfo);
}
@ -93,16 +97,16 @@ export default {
}
},
renderCount(){
return this.$store.state.renderCount;
renderCount() {
return _store.state.renderCount;
},
canInitShortcut() {
return this.currentEditRawInfo !== null && this.drawer;
},
currentEditRawInfo() {
if (this.$store.state.currentEditComp) {
const vccData = this.$store.state.currentEditComp.vccData;
if (_store.state.currentEditComp) {
const vccData = _store.state.currentEditComp.vccData;
return window.tree[vccData.lc_id];
} else {
return null;
@ -116,15 +120,16 @@ export default {
<style scoped>
/* 在此自动生成 */
center {
.center {
padding: 20px;
text-align: center;
}
:v-deep(.el-drawer__body) {
height: 100%;
}
.container {
.cs-container {
height: 100%;
display: flex;
flex-direction: column;

10
src/components/JSCodeEditorDialog.vue
View File

@ -1,6 +1,5 @@
<template>
<el-dialog title="JS逻辑编辑" v-model="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose"
:center=true>
<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>
<div style="padding: 10px; display:flex;justify-content: flex-end;align-items: center;">
@ -11,7 +10,12 @@
<div style="margin-left: 5px;">
<el-link href="https://vcc.sahadev.tech/doc/#/improve/logic?id=%e9%80%bb%e8%be%91%e6%a8%a1%e6%9d%bf"
target="_blank" icon="el-icon-question">帮助与说明</el-link>
target="_blank">
<el-icon>
<question-filled />
</el-icon>
帮助与说明
</el-link>
<div style="color: #6c6c6c; font-size:12px; margin-top:5px;">Tips: 建议看一下使用说明</div>
</div>
</div>

14
src/components/RawComponents.vue
View File

@ -4,7 +4,7 @@
<nav style="display:flex;">
<div :index="index + ''" v-for="(item, index) in iconArray" @click="onSelectElement(index)" :key="item.icon"
:class="{'active':currentIndex === index}" class="main-icon-container">
<img v-if="item.enable" :src="item.icon" class="icon">
<img v-if="item.enable" :src="item.icon" class="l-icon">
<el-tooltip v-else class="item" effect="dark" content="暂未开放，敬请期待" placement="right">
<img :src="item.icon" class="icon" style="width: 34px;height: 34px;">
</el-tooltip>
@ -23,11 +23,11 @@
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item icon="el-icon-circle-check">基础组件数: {{ componentUnitNum }}
<el-dropdown-item>基础组件数: {{ 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-item command="lcg">LCG平台</el-dropdown-item>
<el-dropdown-item command="help">说明文档</el-dropdown-item>
<el-dropdown-item command="chat">在线沟通</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@ -38,7 +38,7 @@
<nav v-if="currentSelectBrand.titleArray && currentSelectBrand.titleArray.length > 0">
<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"
<el-autocomplete class="inline-input" v-model="componentSearch" :fetch-suggestions="querySearch" size="small"
placeholder="请输入..." @select="handleSelect"></el-autocomplete>
</div>
<div class="dismiss-scroll">
@ -249,7 +249,7 @@ nav {
}
}
.icon {
.l-icon {
width: 34px;
height: 34px;
border-radius: 5px;

26
src/components/nested.vue
View File

@ -1,10 +1,10 @@
<template>
<draggable class="dragArea" tag="ul" :list="data" @start="onStartDrag" @choose="onClick" :group="{ name: 'g1' }"
@end="onEndDrag">
:item-key="getItemKey" @end="onEndDrag">
<template #item="{ element }">
<li class="itemArea">
<p>{{ getRawComponentKey(element) }}</p>
<nested-draggable :data="getRawComponentContent(element).__children" />
<nested-draggable :data="getChild(element)" />
</li>
</template>
</draggable>
@ -13,6 +13,8 @@
import draggable from "vuedraggable";
import { getRawComponentKey, getRawComponentContent } from "@/utils/common";
import { store as _store } from "@/libs/store.js";
export default {
props: {
data: {
@ -28,25 +30,37 @@ export default {
computed: {
},
methods: {
getItemKey(item) {
return getRawComponentContent(item).lc_id;
},
getChild(item) {
const content = getRawComponentContent(item);
// 适用于没有子节点的节点，例如div，通过这样的操作后可以往一个空的div中拖入内容
if (!content.__children) {
content.__children = [];
}
return content.__children;
},
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");
if (_store.state.currentEditComp) {
_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);
_store.commit('storeCurrentEditComp', event);
},
onEndDrag(event) {
event.item.classList.remove("is-dragging");
this.$store.commit('onDragEnd');
_store.commit('onDragEnd');
}
},

8
src/libs/main-panel.js
View File

@ -71,13 +71,15 @@ export class MainPanelProvider {
if (this.editMode) {
// 渲染当前代码
const readyForMoutedElement = this.createMountedElement();
createBaseAppAsync(componentOptions).then(app => app.mount(readyForMoutedElement));
createBaseAppAsync(componentOptions).then(app => {
app.mount(readyForMoutedElement)
// 开启编辑模式
this.enableEditMode();
});
// 拍平数据结构
this.flatDataStructure(rawDataStructure);
// 开启编辑模式
this.enableEditMode();
} else {
// 渲染当前代码
createBaseAppAsync(componentOptions).then(app => app.mount(this.mountedEle));

11
src/libs/store.js
View File

@ -1,17 +1,13 @@
import { createStore } from 'vuex'
const store = createStore({
export const store = createStore({
state() {
return {
count: 0,
currentEditComp: null,
renderCount: 0
}
},
mutations: {
increment(state) {
state.count++
},
storeCurrentEditComp(state, newComp) {
state.currentEditComp = newComp;
},
@ -20,8 +16,3 @@ const store = createStore({
}
}
})
export default function loadStore(app) {
app.use(store);
return app;
}

29
src/main.js
View File

@ -7,13 +7,18 @@ import {
Delete,
Refresh,
Minus,
} from "@element-plus/icons";
} from "@element-plus/icons-vue";
import "element-plus/dist/index.css";
import APP from "./App.vue";
import loadCompontents from "@/libs/UIComponentInit.js";
import loadStore from "@/libs/store.js";
/**
* 创建实例基础方法
* @param {*} renderComponent
* @param {*} loadFinished
* @returns
*/
function loadTemplate(renderComponent, loadFinished = () => {}) {
const app = createApp(renderComponent);
app.use(ElementPlus);
@ -27,10 +32,20 @@ function loadTemplate(renderComponent, loadFinished = () => {}) {
return app;
}
/**
* 同步创建实例
* @param {*} renderComponent
* @returns
*/
function createBaseAppSync(renderComponent = {}) {
return loadTemplate(renderComponent);
}
/**
* 异步创建实例
* @param {*} renderComponent
* @returns
*/
function createBaseAppAsync(renderComponent = {}) {
return new Promise((resolve, reject) => {
loadTemplate(renderComponent, (app) => {
@ -43,12 +58,12 @@ const app = createBaseAppSync(APP);
app.component("question-filled", QuestionFilled);
app.component("circle-plus", CirclePlus);
app.component("refresh", Refresh);
app.component("delete", Delete);
app.component("l-refresh", Refresh);
app.component("l-delete", Delete);
app.component("document-copy", DocumentCopy);
app.component("minus", Minus);
app.component("l-minus", Minus);
loadStore(app).mount("#app");
app.mount("#app");
// 内部需要同样配置的全局Vue
self.createBaseAppAsync = createBaseAppAsync;
self.createBaseAppAsync = createBaseAppAsync;

2
src/map/data.index.js
View File

File diff suppressed because one or more lines are too long

2
src/map/style.index.js
View File

@ -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;","#vant-button > *":"margin: 0 5px 5px 0;",".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: relative;",":v-deep(.van-submit-bar)":"position: initial;",".van-action-bar":"position: relative; padding-bottom: 0;"}
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;","#vant-button > *":"margin: 0 5px 5px 0;",".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: relative;",":v-deep(.van-submit-bar)":"position: initial;"}

2
src/map/template.index.js
View File

File diff suppressed because one or more lines are too long

11
src/rawComponents/element/button.vue
View File

@ -35,15 +35,8 @@
<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="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 type="primary" lc_id="YcgENB34wv">上一页</el-button>
<el-button type="primary" lc_id="7ZtWxMoRg5">下一页</el-button>
</el-button-group>
</div>
<div lc_id="x1oSPpUpOu">

5
src/rawComponents/element/form-base.vue
View File

@ -67,11 +67,6 @@
</template>
</el-upload>
</div>
<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="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>

45
src/rawComponents/element/icon.vue
View File

@ -36,23 +36,22 @@
</div>
<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="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 lc-mark :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" @select="handleSelect" lc_id="ihtDhkfBO3">
<el-menu-item index="1" lc_id="VejVEahyRO">Processing Center</el-menu-item>
<el-sub-menu index="2" lc_id="b9dDZDEyzu">
<template #title lc_id="EOLCWq1ax8">Workspace</template>
<el-menu-item index="2-1" lc_id="waSAqnTnUK">item one</el-menu-item>
<el-menu-item index="2-2" lc_id="x7OA9OoX9M">item two</el-menu-item>
<el-menu-item index="2-3" lc_id="XoUxBjhh8r">item three</el-menu-item>
<el-sub-menu index="2-4" lc_id="kVYGkptqy3">
<template #title lc_id="TZAoib4i41">item four</template>
<el-menu-item index="2-4-1" lc_id="KPPi+2aCzR">item one</el-menu-item>
<el-menu-item index="2-4-2" lc_id="9HsVuJIBXT">item two</el-menu-item>
<el-menu-item index="2-4-3" lc_id="pb1fYeVfpT">item three</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="3" disabled lc_id="OYs/KISq4y">Info</el-menu-item>
<el-menu-item index="4" lc_id="POtcpYxQZ9">Orders</el-menu-item>
</el-menu>
</div>
<div lc_id="Hr+gUUgFTD">
@ -82,9 +81,7 @@
<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>
<span class="el-dropdown-link" lc_id="T9RXOuEAsg">下拉菜单</span>
<template #dropdown lc_id="Jgi+BtUZkP">
<el-dropdown-menu lc_id="fyNKB1+0hw">
<el-dropdown-item lc_id="nCNWPghXw7">黄金糕</el-dropdown-item>
@ -252,10 +249,10 @@ export default {
format(percentage) {
return percentage === 100 ? "满" : `${percentage}%`;
},
handleNodeClick() {},
handleSelect() {},
handleClick() {},
goBack2() {},
handleNodeClick() { },
handleSelect() { },
handleClick() { },
goBack2() { },
handleChange3(val) {
console.log(val);
},

3
src/rawComponents/vant/button.vue
View File

@ -30,8 +30,7 @@
<van-cell title="单元格" value="内容" label="描述信息" lc_id="wCy+AFO6oA"></van-cell>
</van-cell>
</van-cell-group>
<br>
<van-cell-group inset lc-mark lc_id="GDUu8grqyq">
<br lc_id="Bc72f94saa"/> <van-cell-group inset lc-mark lc_id="GDUu8grqyq">
<van-cell title="单元格" value="内容" lc_id="R/yvDgWEzu">
<van-cell title="单元格" value="内容" label="描述信息" lc_id="nH8Z1dpWkB"></van-cell>
</van-cell>

200
src/rawComponents/vant/display.vue
View File

@ -1,104 +1,100 @@
<template lc_id="Q6tpxgu3Af">
<div lc_id="SUq1dM6mx7">
<div lc_id="bVMFhQWWZi">
<div class="demonstration-vant" lc_id="aksDVgfMhj">Collapse 折叠面板</div>
<van-collapse v-model="activeNames" lc-mark lc_id="npKi1y5bk5">
<van-collapse-item title="标题1" name="1" lc_id="wlqZiTcBQn">内容</van-collapse-item>
<van-collapse-item title="标题2" name="2" lc_id="lVEmjp4jgU">内容</van-collapse-item>
<van-collapse-item title="标题3" name="3" disabled lc_id="LJVFOApV8X">内容</van-collapse-item>
</van-collapse>
</div>
<div lc_id="C3lXrwAiNI">
<div class="demonstration-vant" lc_id="0boIDS47ol">CountDown 倒计时</div>
<van-count-down :time="time" lc-mark lc_id="/EaLzL88MM"></van-count-down>
<van-count-down :time="time" lc-mark format="DD 天 HH 时 mm 分 ss 秒" lc_id="lagIK/uwCC"></van-count-down>
<van-count-down :time="time" lc-mark lc_id="Xyg4NSoxBX">
<template #default="timeData" lc_id="tPDMWuGJW6">
<span class="block" lc_id="64ZZJDy0a/">{{ timeData.hours }}</span>
<span class="colon" lc_id="uOEZ/JgPc8">:</span>
<span class="block" lc_id="JqxW3i6P8w">{{ timeData.minutes }}</span>
<span class="colon" lc_id="S8yWEUqu8P">:</span>
<span class="block" lc_id="uCI9UGXbjM">{{ timeData.seconds }}</span>
</template>
</van-count-down>
</div>
<div lc_id="+TRSEJ64CC">
<div class="demonstration-vant" lc_id="uaaKUshda6">Divider 分割线</div>
<van-divider lc-mark lc_id="O+mmvHZU5g"></van-divider>
<van-divider lc-mark lc_id="ZFHen1KfO4">文字</van-divider>
<van-divider lc-mark content-position="left" lc_id="2YAd2q9KCC">文字</van-divider>
<van-divider lc-mark content-position="right" lc_id="07IIi1+FZz">文字</van-divider>
<van-divider lc-mark :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" lc_id="UtOxHb5Qfg">
文字</van-divider>
</div>
<div lc_id="T6tvspYttI">
<div class="demonstration-vant" lc_id="tQEA1/gYgR">Empty 空状态</div>
<van-empty image="error" lc-mark description="描述文字" lc_id="LT8YsAR9bR"></van-empty>
<van-empty image="network" lc-mark description="描述文字" lc_id="4Y26THSVSF"></van-empty>
<van-empty image="search" lc-mark description="描述文字" lc_id="XG4M0i9r7v"></van-empty>
</div>
<div lc_id="7cp54ntFq/">
<div class="demonstration-vant" lc_id="NlDW984NIX">List 列表</div>
<van-list v-model="loading" :finished="finished" lc-mark finished-text="没有更多了" @load="onLoad" lc_id="lPqQztunQp">
<van-cell v-for="item in list" :key="item" :title="item" lc_id="5KzyZuonQL"></van-cell>
</van-list>
</div>
<div lc_id="sl50gl586K">
<div class="demonstration-vant" lc_id="2fzVlX0csX">NoticeBar 通知栏</div>
<van-notice-bar left-icon="volume-o" lc-mark text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" lc_id="k61bYFFVQm">
</van-notice-bar>
<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" lc-mark lc_id="hVnGw6dGn5"></van-notice-bar>
<van-notice-bar :scrollable="false" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" lc-mark lc_id="xlMfxzUiEv">
</van-notice-bar>
</div>
<div lc_id="7E/zp4vYl5">
<div class="demonstration-vant" lc_id="Z0VWmNgtun">Progress 进度条</div>
<div style="margin: 20px 0" lc_id="ihlAnxtUTt">
<van-progress :percentage="50" lc-mark lc_id="iN1Pn4Vd84"></van-progress>
<div lc_id="SUq1dM6mx7">
<div lc_id="bVMFhQWWZi">
<div class="demonstration-vant" lc_id="aksDVgfMhj">Collapse 折叠面板</div>
<van-collapse v-model="activeNames" lc-mark lc_id="npKi1y5bk5">
<van-collapse-item title="标题1" name="1" lc_id="wlqZiTcBQn">内容</van-collapse-item>
<van-collapse-item title="标题2" name="2" lc_id="lVEmjp4jgU">内容</van-collapse-item>
<van-collapse-item title="标题3" name="3" disabled lc_id="LJVFOApV8X">内容</van-collapse-item>
</van-collapse>
</div>
<div lc_id="C3lXrwAiNI">
<div class="demonstration-vant" lc_id="0boIDS47ol">CountDown 倒计时</div>
<van-count-down :time="time" lc-mark lc_id="/EaLzL88MM"></van-count-down>
<van-count-down :time="time" lc-mark format="DD 天 HH 时 mm 分 ss 秒" lc_id="lagIK/uwCC"></van-count-down>
<van-count-down :time="time" lc-mark lc_id="Xyg4NSoxBX">
<template #default="timeData" lc_id="tPDMWuGJW6">
<span class="block" lc_id="64ZZJDy0a/">{{ timeData.hours }}</span>
<span class="colon" lc_id="uOEZ/JgPc8">:</span>
<span class="block" lc_id="JqxW3i6P8w">{{ timeData.minutes }}</span>
<span class="colon" lc_id="S8yWEUqu8P">:</span>
<span class="block" lc_id="uCI9UGXbjM">{{ timeData.seconds }}</span>
</template>
</van-count-down>
</div>
<div lc_id="+TRSEJ64CC">
<div class="demonstration-vant" lc_id="uaaKUshda6">Divider 分割线</div>
<van-divider lc-mark lc_id="O+mmvHZU5g"></van-divider>
<van-divider lc-mark lc_id="ZFHen1KfO4">文字</van-divider>
<van-divider lc-mark content-position="left" lc_id="2YAd2q9KCC">文字</van-divider>
<van-divider lc-mark content-position="right" lc_id="07IIi1+FZz">文字</van-divider>
<van-divider lc-mark :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" lc_id="UtOxHb5Qfg">文字</van-divider>
</div>
<div lc_id="T6tvspYttI">
<div class="demonstration-vant" lc_id="tQEA1/gYgR">Empty 空状态</div>
<van-empty image="error" lc-mark description="描述文字" lc_id="LT8YsAR9bR"></van-empty>
<van-empty image="network" lc-mark description="描述文字" lc_id="4Y26THSVSF"></van-empty>
<van-empty image="search" lc-mark description="描述文字" lc_id="XG4M0i9r7v"></van-empty>
</div>
<div lc_id="7cp54ntFq/">
<div class="demonstration-vant" lc_id="NlDW984NIX">List 列表</div>
<van-list v-model="loading" :finished="finished" lc-mark finished-text="没有更多了" @load="onLoad" lc_id="lPqQztunQp">
<van-cell v-for="item in list" :key="item" :title="item" lc_id="5KzyZuonQL"></van-cell>
</van-list>
</div>
<div lc_id="sl50gl586K">
<div class="demonstration-vant" lc_id="2fzVlX0csX">NoticeBar 通知栏</div>
<van-notice-bar left-icon="volume-o" lc-mark text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" lc_id="k61bYFFVQm"></van-notice-bar>
<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" lc-mark lc_id="hVnGw6dGn5"></van-notice-bar>
<van-notice-bar :scrollable="false" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" lc-mark lc_id="xlMfxzUiEv"></van-notice-bar>
</div>
<div lc_id="7E/zp4vYl5">
<div class="demonstration-vant" lc_id="Z0VWmNgtun">Progress 进度条</div>
<div style="margin: 20px 0" lc_id="ihlAnxtUTt">
<van-progress :percentage="50" lc-mark lc_id="iN1Pn4Vd84"></van-progress>
</div>
</div>
<div lc_id="mllWNtm7WD">
<div class="demonstration-vant" lc_id="XU1g37b7Bj">Skeleton 骨架屏</div>
<van-skeleton title :row="3" lc-mark lc_id="B9ypSupDLY"></van-skeleton>
<br lc_id="gJKqa1lhDD"/> <van-skeleton title avatar :row="3" lc-mark lc_id="LH6oqOei+U"></van-skeleton>
</div>
<div lc_id="H2zy4AGqzd">
<div class="demonstration-vant" lc_id="f2BUM74AC2">Steps 步骤条</div>
<van-steps :active="active" lc-mark lc_id="wIsGLQipbg">
<van-step lc_id="wDpEEfwDFg">买家下单</van-step>
<van-step lc_id="0uH+uG0y/J">商家接单</van-step>
<van-step lc_id="7MxYVitFqU">买家提货</van-step>
<van-step lc_id="zmTz+icNFP">交易完成</van-step>
</van-steps>
<van-steps direction="vertical" :active="0" lc-mark lc_id="wfouplCxlS">
<van-step lc_id="IzJ4DePPuF">
<h3 lc_id="fM4sXWg+61">【城市】物流状态1</h3>
<p lc_id="plNiYCktIK">2016-07-12 12:40</p>
</van-step>
<van-step lc_id="EHQFSQQ7XN">
<h3 lc_id="+coqZkw2U2">【城市】物流状态2</h3>
<p lc_id="lNLIsZhFdm">2016-07-11 10:00</p>
</van-step>
<van-step lc_id="6L725lSdnl">
<h3 lc_id="wYQrSnGkOm">快件已发货</h3>
<p lc_id="EAMHuHntXW">2016-07-10 09:30</p>
</van-step>
</van-steps>
</div>
<div lc_id="ag50o0J0rJ">
<div class="demonstration-vant" lc_id="ZKGeQcO9+f">Swipe 轮播</div>
<div lc_id="hGMjfspfr6">
<van-swipe lc-mark class="my-swipe" :autoplay="3000" indicator-color="white" lc_id="vAbfSeM0cO">
<van-swipe-item lc_id="kO0d+y55zE">1</van-swipe-item>
<van-swipe-item lc_id="WME2UWPHDF">2</van-swipe-item>
<van-swipe-item lc_id="ze6m85Fe/y">3</van-swipe-item>
<van-swipe-item lc_id="ugTofY2Spf">4</van-swipe-item>
</van-swipe>
</div>
</div>
</div>
</div>
<div lc_id="mllWNtm7WD">
<div class="demonstration-vant" lc_id="XU1g37b7Bj">Skeleton 骨架屏</div>
<van-skeleton title :row="3" lc-mark lc_id="B9ypSupDLY"></van-skeleton>
<br lc_id="gJKqa1lhDD" />
<van-skeleton title avatar :row="3" lc-mark lc_id="LH6oqOei+U"></van-skeleton>
</div>
<div lc_id="H2zy4AGqzd">
<div class="demonstration-vant" lc_id="f2BUM74AC2">Steps 步骤条</div>
<van-steps :active="active" lc-mark lc_id="wIsGLQipbg">
<van-step lc_id="wDpEEfwDFg">买家下单</van-step>
<van-step lc_id="0uH+uG0y/J">商家接单</van-step>
<van-step lc_id="7MxYVitFqU">买家提货</van-step>
<van-step lc_id="zmTz+icNFP">交易完成</van-step>
</van-steps>
<van-steps direction="vertical" :active="0" lc-mark lc_id="wfouplCxlS">
<van-step lc_id="IzJ4DePPuF">
<h3 lc_id="fM4sXWg+61">【城市】物流状态1</h3>
<p lc_id="plNiYCktIK">2016-07-12 12:40</p>
</van-step>
<van-step lc_id="EHQFSQQ7XN">
<h3 lc_id="+coqZkw2U2">【城市】物流状态2</h3>
<p lc_id="lNLIsZhFdm">2016-07-11 10:00</p>
</van-step>
<van-step lc_id="6L725lSdnl">
<h3 lc_id="wYQrSnGkOm">快件已发货</h3>
<p lc_id="EAMHuHntXW">2016-07-10 09:30</p>
</van-step>
</van-steps>
</div>
<div lc_id="ag50o0J0rJ">
<div class="demonstration-vant" lc_id="ZKGeQcO9+f">Swipe 轮播</div>
<div lc_id="hGMjfspfr6">
<van-swipe lc-mark class="my-swipe" :autoplay="3000" indicator-color="white" lc_id="vAbfSeM0cO">
<van-swipe-item lc_id="kO0d+y55zE">1</van-swipe-item>
<van-swipe-item lc_id="WME2UWPHDF">2</van-swipe-item>
<van-swipe-item lc_id="ze6m85Fe/y">3</van-swipe-item>
<van-swipe-item lc_id="ugTofY2Spf">4</van-swipe-item>
</van-swipe>
</div>
</div>
</div>
</template>
</template>
<script>
export default {
data() {
@ -120,8 +116,7 @@ export default {
onLoad() { },
},
}; </script>
<style scoped>
.colon {
<style scoped>.colon {
display: inline-block;
margin: 0 4px;
color: #ee0a24;
@ -140,5 +135,4 @@ export default {
line-height: 150px;
text-align: center;
background-color: #39a9ed;
}
</style>
}</style>

119
src/rawComponents/vant/layout.vue
View File

@ -1,66 +1,63 @@
<template lc_id="oV+qpNVI6k">
<div lc_id="m5KY8rTxt1">
<div lc_id="5CmAJnEb1P">
<div class="demonstration-vant" lc_id="SM70eEXO+9">Field 输入框</div>
<div lc-mark style="padding: 10px;" lc_id="f/reOjq1IJ">
<van-field lc-mark v-model="text" label="文本" lc_id="DIxZNSoiax"></van-field>
<van-field lc-mark v-model="tel" type="tel" label="手机号" lc_id="mmGmLLyGW5"></van-field>
<van-field lc-mark v-model="digit" type="digit" label="整数" lc_id="T+vzBFNZhS"></van-field>
<van-field lc-mark v-model="number" type="number" label="数字" lc_id="O36q2Fx7Xv"></van-field>
<van-field lc-mark v-model="password" type="password" label="密码" lc_id="dk6ah1vXDq"></van-field>
<div lc_id="m5KY8rTxt1">
<div lc_id="5CmAJnEb1P">
<div class="demonstration-vant" lc_id="SM70eEXO+9">Field 输入框</div>
<div lc-mark style="padding: 10px;" lc_id="f/reOjq1IJ">
<van-field lc-mark v-model="text" label="文本" lc_id="DIxZNSoiax"></van-field>
<van-field lc-mark v-model="tel" type="tel" label="手机号" lc_id="mmGmLLyGW5"></van-field>
<van-field lc-mark v-model="digit" type="digit" label="整数" lc_id="T+vzBFNZhS"></van-field>
<van-field lc-mark v-model="number" type="number" label="数字" lc_id="O36q2Fx7Xv"></van-field>
<van-field lc-mark v-model="password" type="password" label="密码" lc_id="dk6ah1vXDq"></van-field>
</div>
</div>
<div lc_id="L5fPGRqjYZ">
<div class="demonstration-vant" lc_id="3qMdltHE4i">DatetimePicker 时间选择 ❌</div>
<van-datetime-picker v-model="currentDate" type="date" title="选择年月日" lc-mark :min-date="minDate" :max-date="maxDate" lc_id="14vPN9ntBV"></van-datetime-picker>
</div>
<div lc_id="ODgqdaL6ED">
<div class="demonstration-vant" lc_id="hrPSBFZ6Hh">Checkbox 复选框</div>
<van-checkbox-group lc-mark v-model="result" lc_id="F2p5QIbo3W">
<van-checkbox name="a" lc_id="90jCPURt8o">复选框 a</van-checkbox>
<van-checkbox lc-mark name="b" lc_id="bvtnBJfQnk">复选框 b</van-checkbox>
</van-checkbox-group>
</div>
<div lc_id="V9/vkUb/HX">
<div class="demonstration-vant" lc_id="hnZi6s2mpt">Checkbox 复选框(全选与反选)</div>
<div lc-mark lc_id="JHg6xi7Ws5">
<van-checkbox-group v-model="result" ref="checkboxGroup" lc_id="8EUt8S6cIj">
<van-checkbox name="a" lc_id="vAZDx+cKaQ">复选框 a</van-checkbox>
<van-checkbox name="b" lc_id="lNhFITM1W/">复选框 b</van-checkbox>
<van-checkbox lc-mark name="c" lc_id="BVLbIHoPpi">复选框 c</van-checkbox>
</van-checkbox-group>
<br lc_id="lEi0tbIvkM"/> <van-button type="primary" size="small" @click="checkAll" lc_id="azfVg1jydO">全选</van-button>
<van-button plain size="small" @click="toggleAll" lc_id="FxjbFUMiWD">反选</van-button>
</div>
</div>
<div lc_id="jl0/Xq6pS6">
<div class="demonstration-vant" lc_id="5GzBrVy4XX">Radio 单选框</div>
<div lc_id="TT2Onqet2I">
<van-radio-group lc-mark v-model="radio10" lc_id="Fq7xqCU/Ul">
<van-radio name="1" lc_id="eX5Wd5A8M+">单选框 1</van-radio>
<van-radio lc-mark name="2" lc_id="QN9H1HdL7S">单选框 2</van-radio>
</van-radio-group>
<br lc_id="5uaRLSgQ+B"/> <van-radio-group lc-mark v-model="radio10" lc_id="p/WdWJotYb">
<van-cell-group lc_id="7SU7k9W/RI">
<van-cell title="单选框 1" clickable @click="radio10 = '1'" lc-mark lc_id="cu2BQ/D1Gt">
<template #right-icon lc_id="yLUfrpVFId">
<van-radio name="1" lc_id="9sKStrXAMF"></van-radio>
</template>
</van-cell>
<van-cell title="单选框 2" clickable @click="radio10 = '2'" lc_id="KnbWE2AKwX">
<template #right-icon lc_id="vSyCi55TWO">
<van-radio name="2" lc_id="gDzRZVWQxz"></van-radio>
</template>
</van-cell>
</van-cell-group>
</van-radio-group>
</div>
</div>
</div>
</div>
<div lc_id="L5fPGRqjYZ">
<div class="demonstration-vant" lc_id="3qMdltHE4i">DatetimePicker 时间选择 ❌</div>
<van-datetime-picker v-model="currentDate" type="date" title="选择年月日" lc-mark :min-date="minDate"
:max-date="maxDate" lc_id="14vPN9ntBV"></van-datetime-picker>
</div>
<div lc_id="ODgqdaL6ED">
<div class="demonstration-vant" lc_id="hrPSBFZ6Hh">Checkbox 复选框</div>
<van-checkbox-group lc-mark v-model="result" lc_id="F2p5QIbo3W">
<van-checkbox name="a" lc_id="90jCPURt8o">复选框 a</van-checkbox>
<van-checkbox lc-mark name="b" lc_id="bvtnBJfQnk">复选框 b</van-checkbox>
</van-checkbox-group>
</div>
<div lc_id="V9/vkUb/HX">
<div class="demonstration-vant" lc_id="hnZi6s2mpt">Checkbox 复选框(全选与反选)</div>
<div lc-mark lc_id="JHg6xi7Ws5">
<van-checkbox-group v-model="result" ref="checkboxGroup" lc_id="8EUt8S6cIj">
<van-checkbox name="a" lc_id="vAZDx+cKaQ">复选框 a</van-checkbox>
<van-checkbox name="b" lc_id="lNhFITM1W/">复选框 b</van-checkbox>
<van-checkbox lc-mark name="c" lc_id="BVLbIHoPpi">复选框 c</van-checkbox>
</van-checkbox-group>
<br lc_id="lEi0tbIvkM" />
<van-button type="primary" size="small" @click="checkAll" lc_id="azfVg1jydO">全选</van-button>
<van-button plain size="small" @click="toggleAll" lc_id="FxjbFUMiWD">反选</van-button>
</div>
</div>
<div lc_id="jl0/Xq6pS6">
<div class="demonstration-vant" lc_id="5GzBrVy4XX">Radio 单选框</div>
<div lc_id="TT2Onqet2I">
<van-radio-group lc-mark v-model="radio10" lc_id="Fq7xqCU/Ul">
<van-radio name="1" lc_id="eX5Wd5A8M+">单选框 1</van-radio>
<van-radio lc-mark name="2" lc_id="QN9H1HdL7S">单选框 2</van-radio>
</van-radio-group>
<br lc_id="5uaRLSgQ+B" />
<van-radio-group lc-mark v-model="radio10" lc_id="p/WdWJotYb">
<van-cell-group lc_id="7SU7k9W/RI">
<van-cell title="单选框 1" clickable @click="radio10 = '1'" lc-mark lc_id="cu2BQ/D1Gt">
<template #right-icon lc_id="yLUfrpVFId">
<van-radio name="1" lc_id="9sKStrXAMF"></van-radio>
</template>
</van-cell>
<van-cell title="单选框 2" clickable @click="radio10 = '2'" lc_id="KnbWE2AKwX">
<template #right-icon lc_id="vSyCi55TWO">
<van-radio name="2" lc_id="gDzRZVWQxz"></van-radio>
</template>
</van-cell>
</van-cell-group>
</van-radio-group>
</div>
</div>
</div>
</template>
</template>
<script>
export default {
data() {

9
src/rawComponents/vant/nav.vue
View File

@ -145,10 +145,8 @@ export default {
}
:v-deep(.van-submit-bar) {
position: initial;
}
</style>
<style>
}</style>
<style>
.van-action-bar {
position: relative;
padding-bottom: 0;
@ -156,5 +154,4 @@ export default {
.van-submit-bar {
z-index: 0;
}
</style>
} </style>