1
0
mirror of https://github.com/sahadev/vue-component-creater-ui.git synced 2025-09-12 14:03:29 +08:00

update: 属性编辑框调整

This commit is contained in:
shangbin 2021-12-06 15:52:28 +08:00
parent 9d5c44b694
commit d592b920e9
5 changed files with 32 additions and 22 deletions

View File

@ -13,8 +13,8 @@
<div class="item" v-for="(item, index) in localAttributes" :key="index"> <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> <el-input v-model="item.key" :placeholder="'key' + index" class="half-width"></el-input>
<div class="split">:</div> <div class="split">:</div>
<el-input v-model="item.value" :placeholder="'value' + index" class="half-width"></el-input> <el-input v-model="item.value" :placeholder="'value' + index" class="half-width" style="flex-grow: 3;"></el-input>
<i class="el-icon-minus" @click="deleteItem(index)"></i> <el-icon @click="deleteItem(index)" style="margin-left: 5px;"><minus /></el-icon>
</div> </div>
<div class="quick-add-root"> <div class="quick-add-root">
@ -45,22 +45,26 @@
</div> </div>
<div style="margin-top: 10px;text-align:center;"> <div style="margin-top: 10px;text-align:center;">
<!-- <el-tooltip class="item" effect="dark" content="新增属性 ctrl+a" placement="bottom"> <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-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="dark" content="保存属性 ctrl+s" placement="bottom"> <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-button type="success" class="center" @click="save" circle>
</el-tooltip> <el-icon><refresh /></el-icon>
<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> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="dark" content="复制一个兄弟组件 ctrl+c" placement="bottom"> <el-tooltip v-if="enableRemoveButton" class="item" effect="dark" content="移除该组件 ctrl+d" placement="bottom">
<el-button v-if="enableBroButton" type="primary" class="center" icon="el-icon-copy-document" @click="copyBro" <el-button type="danger" class="center" @click="remove" circle>
circle> <el-icon><delete /></el-icon>
</el-button> </el-button>
</el-tooltip> --> </el-tooltip>
<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;"> <div style="text-algin: center;">
<span class="shortcut-tip">支持快捷键操作</span> <span class="shortcut-tip">支持快捷键操作</span>
</div> </div>
@ -156,9 +160,7 @@ export default {
this.localAttributes.push({ key: "", value: "" }); this.localAttributes.push({ key: "", value: "" });
}, },
save() { save() {
try { try {
let resultList = []; let resultList = [];
if (!this.editMode) { if (!this.editMode) {
resultList = this.localAttributes.filter((item) => { resultList = this.localAttributes.filter((item) => {
@ -268,7 +270,7 @@ export default {
.half-width { .half-width {
width: 0%; width: 0%;
flex-grow: 1; flex-grow: 2;
} }
.center { .center {

View File

@ -15,7 +15,7 @@
<!-- <vue-nestable v-model="treeData" @change="onLevelChange"> <!-- <vue-nestable v-model="treeData" @change="onLevelChange">
<template v-slot="{ item }"> <template v-slot="{ item }">
<vue-nestable-handle :item="item"> <vue-nestable-handle :item="item">
<i class="el-icon-rank icon-s"></i> <el-icon class="icon-s"><rank /></el-icon>
</vue-nestable-handle> </vue-nestable-handle>
<span @click="onNodeClick(item)">{{ item.text }}</span> <span @click="onNodeClick(item)">{{ item.text }}</span>

View File

@ -8,8 +8,9 @@ import parserBabel from 'prettier/parser-babel.js';
// 导出组件模板文件 // 导出组件模板文件
function vueTemplate () { function vueTemplate () {
return ` return `<template>
<template> <!--在此自动生成--> </template> <!--在此自动生成-->
</template>
<script> <script>
export default // $script export default // $script

View File

@ -53,7 +53,7 @@ export class MainPanelProvider {
code = code.replace(/:\s*\(([\w\s]*)\)\s*=>/g,"\($1\)"); code = code.replace(/:\s*\(([\w\s]*)\)\s*=>/g,"\($1\)");
// 生成展示代码 // 生成展示代码
let codeForShow = code.replace(/\s{1}lc_id=".+"/g, ''); let codeForShow = code.replace(/\s{1}lc_id=".+?"/g, '');
codeForShow = codeForShow.replace(/\s{1}lc-mark/g, ""); codeForShow = codeForShow.replace(/\s{1}lc-mark/g, "");
this.eventEmitter.emit("codeCreated", codeForShow); this.eventEmitter.emit("codeCreated", codeForShow);

View File

@ -1,6 +1,6 @@
import { createApp, compile } from "vue"; import { createApp, compile } from "vue";
import ElementPlus from "element-plus"; import ElementPlus from "element-plus";
import { QuestionFilled } from "@element-plus/icons"; import { QuestionFilled, CirclePlus, DocumentCopy, Delete, Refresh, Minus } from "@element-plus/icons";
import "element-plus/dist/index.css"; import "element-plus/dist/index.css";
import APP from "./App.vue"; import APP from "./App.vue";
@ -8,7 +8,14 @@ import APP from "./App.vue";
function createBaseApp(renderComponent = {}) { function createBaseApp(renderComponent = {}) {
const app = createApp(renderComponent); const app = createApp(renderComponent);
app.use(ElementPlus); app.use(ElementPlus);
app.component("question-filled", QuestionFilled)
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; return app;
} }