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

update: 完全升级Vue3过程中的记录

Browse Source
This commit is contained in:
shangbin
2021-11-30 19:17:29 +08:00
parent 23bb007b5b
commit d6f575c503
26 changed files with 1032 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/AttributeInput.vue
View File

@@ -1,11 +1,11 @@
<template>
<el-card class="attribute-container">
<center>
<div style="text-algin: 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">
@@ -44,8 +44,8 @@
</div>
</div>
<center style="margin-top: 10px;">
<el-tooltip class="item" effect="dark" content="新增属性 ctrl+a" placement="bottom">
<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>
</el-tooltip>
@@ -60,12 +60,11 @@
<el-button v-if="enableBroButton" type="primary" class="center" icon="el-icon-copy-document" @click="copyBro"
circle>
</el-button>
</el-tooltip>
<center>
</el-tooltip> -->
<div style="text-algin: center;">
<span class="shortcut-tip">支持快捷键操作</span>
</center>
</center>
</div>
</div>
</el-card>
</template>
@@ -73,7 +72,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 +116,6 @@ export default {
initShortcut() {
console.log(`init by mode: ${this.shortcutInitMode}`)
keymaster('⌘+a, ctrl+a', () => {
if (this.enable) {
this.createNew();

25
src/components/Code.vue
View File

@@ -1,22 +1,21 @@
<template>
<el-dialog title="代码预览" :visible.sync="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose"
:center=true>
<el-dialog title="代码预览" v-model="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 style="color: #666; font-size: 12px;text-align">使用代码前请确认相应的组件库已集成至项目</div>
</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>
<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>

12
src/components/CodeEditor.vue
View File

@@ -50,12 +50,12 @@ 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,
});
});
// require(['axios'], axios => {
// self.axios = axios.create({
// baseURL: '',
// timeout: 1000,
// });
// });
export default {
props: ['initCode', 'mode'],

14
src/components/CodeStructure.vue
View File

@@ -1,19 +1,19 @@
<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-algin: 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 }">
<template v-slot="{ item }">
<vue-nestable-handle :item="item">
<i class="el-icon-rank icon-s"></i>
</vue-nestable-handle>
@@ -21,9 +21,9 @@
<span @click="onNodeClick(item)">{{ item.text }}</span>
</template>
<div slot="placeholder">
<b>The editor is empty.</b>
</div>
<template v-slot:placeholder>
<div><b>The editor is empty.</b></div>
</template>
</vue-nestable>
</div>

10
src/components/JSCodeEditorDialog.vue
View File

@@ -1,7 +1,7 @@
<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>
<!-- <CodeEditor style="max-height: 65vh;" ref="codeEditor" :initCode="code" mode="text/javascript"></CodeEditor> -->
<div style="text-align:center;padding: 10px;">
<el-button type="primary" @click="onSave">确认修改</el-button>
@@ -14,12 +14,12 @@
<script>
import dedent from 'dedent'
import CodeEditor from './CodeEditor.vue'
// import CodeEditor from './CodeEditor.vue'
export default {
props: ['codeDialogVisible'],
components: {
CodeEditor
// CodeEditor
},
data() {
@@ -88,7 +88,7 @@ export default {
// 网络请求，可选
},
handleClose() {
this.$emit("update:codeDialogVisible", false);
// this.$emit("update:codeDialogVisible", false);
},
onSave() {
const code = this.$refs.codeEditor.getEditorCode();

10
src/components/RawComponents.vue
View File

@@ -34,11 +34,11 @@
</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)">
@@ -60,8 +60,8 @@
// import vant from "../rawComponents/vant";
// import iview from "../rawComponents/iview";
// import quasar from "../rawComponents/quasar";
import raw from "../rawComponents/raw";
import ele from "../rawComponents/element";
import raw from "../rawComponents/raw/index.vue";
import ele from "../rawComponents/element/index.vue";
export default {
data() {
@@ -94,7 +94,7 @@ export default {
enable: false
},],
currentIndex: 1
currentIndex: 0
};
},
methods: {

2
src/components/VueCodeParseDialog.vue
View File

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