From b2afea9a0f50ea93208e52147418cc13fa6ad611 Mon Sep 17 00:00:00 2001 From: yanghi <191894349@qq.com> Date: Wed, 10 Aug 2022 22:13:43 +0800 Subject: [PATCH 1/2] update --- components.d.ts | 3 +- src/components/Components.vue | 3 +- src/components/DrawingBroad.vue | 63 +++++++++-- src/config/comp.config.ts | 12 -- src/config/component.config.json | 34 ++++++ src/config/data.json | 14 +++ src/config/editor.config.ts | 2 +- src/store/index.ts | 9 +- src/views/Panel.vue | 186 ++++++++++++++++++------------- src/views/main.vue | 17 +-- 10 files changed, 219 insertions(+), 124 deletions(-) delete mode 100644 src/config/comp.config.ts create mode 100644 src/config/component.config.json create mode 100644 src/config/data.json diff --git a/components.d.ts b/components.d.ts index 4ab1d79..7edf44a 100644 --- a/components.d.ts +++ b/components.d.ts @@ -9,8 +9,6 @@ declare module '@vue/runtime-core' { export interface GlobalComponents { Components: typeof import('./src/components/Components.vue')['default'] ComponentsOptions: typeof import('./src/components/ComponentsOptions.vue')['default'] - Componets: typeof import('./src/components/Componets.vue')['default'] - DrawingBoard: typeof import('./src/components/DrawingBoard.vue')['default'] DrawingBroad: typeof import('./src/components/DrawingBroad.vue')['default'] ElButton: typeof import('element-plus/es')['ElButton'] ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup'] @@ -21,6 +19,7 @@ declare module '@vue/runtime-core' { ElIcon: typeof import('element-plus/es')['ElIcon'] ElImage: typeof import('element-plus/es')['ElImage'] ElInput: typeof import('element-plus/es')['ElInput'] + ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] ElTabPane: typeof import('element-plus/es')['ElTabPane'] ElTabs: typeof import('element-plus/es')['ElTabs'] ElTooltip: typeof import('element-plus/es')['ElTooltip'] diff --git a/src/components/Components.vue b/src/components/Components.vue index 5af7818..8453cbe 100644 --- a/src/components/Components.vue +++ b/src/components/Components.vue @@ -35,6 +35,7 @@ let sortComponentByKey = ref(""); .box { width: 100%; box-sizing: border-box; + padding: 10px; &-top { margin-bottom: 20px; @@ -42,8 +43,6 @@ let sortComponentByKey = ref(""); &-content { width: 100%; - text-align: center; - .item { width: 97%; height: 120px; diff --git a/src/components/DrawingBroad.vue b/src/components/DrawingBroad.vue index 8864936..a80b2dc 100644 --- a/src/components/DrawingBroad.vue +++ b/src/components/DrawingBroad.vue @@ -1,20 +1,67 @@ - \ No newline at end of file diff --git a/src/config/comp.config.ts b/src/config/comp.config.ts deleted file mode 100644 index 6abb530..0000000 --- a/src/config/comp.config.ts +++ /dev/null @@ -1,12 +0,0 @@ -export default { - "container": { - "width": 900, - "height": 570 - }, - "blocks": [ - - ], - "style": [ - - ] -} \ No newline at end of file diff --git a/src/config/component.config.json b/src/config/component.config.json new file mode 100644 index 0000000..af5d994 --- /dev/null +++ b/src/config/component.config.json @@ -0,0 +1,34 @@ +// 组件的属性 写好的组件需要在这里填写 +{ + "button":{ + "content":"", + "layout":{ + "display":"", + "width":"", + "height":"" + }, + "styles":{ + + }, + "animates":{ + "show":{ + + }, + "hide":{ + + } + }, + "methods":{ + + }, + "data":{ + + }, + "slots":{ + + } + }, + "text":{ + + } +} \ No newline at end of file diff --git a/src/config/data.json b/src/config/data.json new file mode 100644 index 0000000..607ac6b --- /dev/null +++ b/src/config/data.json @@ -0,0 +1,14 @@ +{ + "mode":"PC", + "title":"", + "container": { + "width": "1436", + "height": "100%" + }, + "styles":{ + + }, + "components": [ + + ] +} \ No newline at end of file diff --git a/src/config/editor.config.ts b/src/config/editor.config.ts index f177506..cf43a3d 100644 --- a/src/config/editor.config.ts +++ b/src/config/editor.config.ts @@ -1,3 +1,4 @@ +//注册组件 interface componentType { label: string, preview: string, @@ -22,7 +23,6 @@ class createEditorConfig { const registerConfig = new createEditorConfig(); - registerConfig.register({ label: '按钮', preview: `ElButton`, diff --git a/src/store/index.ts b/src/store/index.ts index a772955..54ba93a 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,6 +1,7 @@ import { reactive } from 'vue'; import { defineStore } from 'pinia'; import config from "@/config/editor.config"; +import data from "@/config/data.json"; interface componentType { label: string, preview: string, @@ -12,11 +13,9 @@ interface componentType { export const userMainStore = defineStore('mainStore', () => { const list: Array = reactive(config.componentList); const tList: Array = reactive([]); - function increment() { //相当于 Actions - } - function doubleCount() { - } + //json schema + const tree = reactive(data); - return {list,tList,increment, doubleCount }; //暴露 + return {list,tList,tree}; //暴露 }); \ No newline at end of file diff --git a/src/views/Panel.vue b/src/views/Panel.vue index 308adae..18a7583 100644 --- a/src/views/Panel.vue +++ b/src/views/Panel.vue @@ -28,9 +28,10 @@
- - - + +
@@ -53,105 +54,119 @@
-
-
-
+
+
+
- - - +
+ + + +
-
-
- - - +
+ + + +
-
-
- - - +
+ + + +
-
-
-
+
- - - +
+ + + +
-
-
- - - +
+ + + +
+
+ +
+ 自定义组件 +
+
+ 页面结构 +
+
- +
- - - - - - - - 自定义组件 - - - - 页面结构 - + \ No newline at end of file -- Gitee From 8118d3716a773e328968b3a12f8394fe52efa4c1 Mon Sep 17 00:00:00 2001 From: yanghi <191894349@qq.com> Date: Wed, 10 Aug 2022 22:46:42 +0800 Subject: [PATCH 2/2] update --- src/components/DrawingBroad.vue | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/DrawingBroad.vue b/src/components/DrawingBroad.vue index a80b2dc..47af5e5 100644 --- a/src/components/DrawingBroad.vue +++ b/src/components/DrawingBroad.vue @@ -3,13 +3,14 @@ import draggable from 'vuedraggable'; import { storeToRefs } from "pinia"; import { userMainStore } from "@/store/index"; // 引入 -import { computed ,ref} from '@vue/reactivity'; +import { computed, ref } from '@vue/reactivity'; +import Grid from './Grid.vue'; const mainStore = userMainStore(); const { tList, tree } = storeToRefs(mainStore); // 解构并使数据动态化 -const containerStyle = computed(()=> ({ - width: tree.value.container.width+'px', - height: tree.value.mode == "PC" ? '100%':tree.value.container.height+'px', - 'marginTop':tree.value.mode == "PC" ? '':50+'px' +const containerStyle = computed(() => ({ + width: tree.value.container.width + 'px', + height: tree.value.mode == "PC" ? '100%' : tree.value.container.height + 'px', + 'marginTop': tree.value.mode == "PC" ? '' : 50 + 'px' })) @@ -33,6 +34,7 @@ const containerStyle = computed(()=> ({ height: 100%; margin: auto; overflow: auto; + position: relative; &::-webkit-scrollbar { width: 8px; -- Gitee