From 32ccceb3384aacc1cab302b88e079866e9a52f74 Mon Sep 17 00:00:00 2001 From: bqy_fe <1743369777@qq.com> Date: Wed, 7 Jul 2021 22:21:59 +0800 Subject: [PATCH] feat: :sparkles:add component style config --- README.md | 4 + components.d.ts | 3 - package.json | 24 +- preview/views/comp-render.tsx | 6 +- src/packages/base-widgets/button/index.tsx | 13 +- src/packages/base-widgets/checkbox/index.tsx | 49 ++-- .../base-widgets/datetimePicker/index.tsx | 9 +- src/packages/base-widgets/divider/index.tsx | 17 +- src/packages/base-widgets/image/index.tsx | 10 +- src/packages/base-widgets/input/index.tsx | 27 ++- src/packages/base-widgets/nav-bar/index.tsx | 16 +- .../base-widgets/notice-bar/index.tsx | 10 +- src/packages/base-widgets/picker/index.tsx | 11 +- src/packages/base-widgets/process/index.tsx | 10 +- src/packages/base-widgets/radio/index.tsx | 49 ++-- src/packages/base-widgets/rate/index.tsx | 37 ++- src/packages/base-widgets/slider/index.tsx | 37 ++- src/packages/base-widgets/stepper/index.tsx | 37 ++- src/packages/base-widgets/swipe/index.tsx | 32 +-- src/packages/base-widgets/switch/index.tsx | 37 ++- src/packages/base-widgets/text/index.tsx | 7 +- .../container-component/form/index.tsx | 17 +- .../layout/index.module.scss | 1 + .../container-component/layout/index.tsx | 44 ++-- .../format-input-number/index.module.scss | 7 + .../common/format-input-number/index.tsx | 75 ++++++ src/visual-editor/components/header/index.vue | 2 +- .../components/base-widgets/index.tsx | 4 +- .../components/container-component/index.tsx | 2 +- .../components/data-source/data-fetch.vue | 11 +- .../components/data-source/data-model.vue | 17 +- .../components/data-source/index.vue | 19 +- .../left-aside/components/page-tree/index.vue | 114 +++++----- .../components/left-aside/index.vue | 3 +- .../components/animate/Animate.tsx | 4 +- .../components/attr-editor/AttrEditor.tsx | 93 +++++++- .../components/event-action/index.tsx | 29 +-- .../simulator-editor/comp-render.tsx | 4 +- .../simulator-editor/simulator-editor.vue | 8 +- src/visual-editor/types/index.d.ts | 17 +- src/visual-editor/utils/dropdown-service.tsx | 4 +- src/visual-editor/visual-editor.utils.ts | 169 ++++++++------ yarn.lock | 214 ++++++++++-------- 43 files changed, 766 insertions(+), 537 deletions(-) create mode 100644 src/visual-editor/components/common/format-input-number/index.module.scss create mode 100644 src/visual-editor/components/common/format-input-number/index.tsx diff --git a/README.md b/README.md index 959c6ba..91cb825 100644 --- a/README.md +++ b/README.md @@ -90,6 +90,10 @@ JSON.stringify( .replace(/\"/g, "'") ``` +## 部分功能演示 + +[![RHfBbn.gif](https://z3.ax1x.com/2021/07/07/RHfBbn.gif)](https://imgtu.com/i/RHfBbn) + ## 浏览器支持 本地开发推荐使用`Chrome 80+` 浏览器 diff --git a/components.d.ts b/components.d.ts index 12076a7..5fab99d 100644 --- a/components.d.ts +++ b/components.d.ts @@ -13,10 +13,7 @@ declare module 'vue' { ElDropdown: typeof import('element-plus/es/el-dropdown')['default'] ElDropdownItem: typeof import('element-plus/es/el-dropdown-item')['default'] ElDropdownMenu: typeof import('element-plus/es/el-dropdown-menu')['default'] - ElForm: typeof import('element-plus/es/el-form')['default'] - ElFormItem: typeof import('element-plus/es/el-form-item')['default'] ElHeader: typeof import('element-plus/es/el-header')['default'] - ElInput: typeof import('element-plus/es/el-input')['default'] ElMain: typeof import('element-plus/es/el-main')['default'] ElPopconfirm: typeof import('element-plus/es/el-popconfirm')['default'] ElPopover: typeof import('element-plus/es/el-popover')['default'] diff --git a/package.json b/package.json index 814fd10..f3be8a3 100644 --- a/package.json +++ b/package.json @@ -20,12 +20,12 @@ "prepare": "husky install" }, "dependencies": { - "@vant/touch-emulator": "^1.3.0", - "@vueuse/core": "^5.0.3", - "@vueuse/integrations": "^5.0.3", + "@vant/touch-emulator": "^1.3.1", + "@vueuse/core": "^5.1.3", + "@vueuse/integrations": "^5.1.3", "animate.css": "^4.1.1", "axios": "^0.21.1", - "dayjs": "^1.10.5", + "dayjs": "^1.10.6", "dexie": "^3.0.3", "element-plus": "1.0.2-beta.54", "lodash": "^4.17.21", @@ -44,8 +44,8 @@ "@commitlint/cli": "^12.1.4", "@commitlint/config-conventional": "^12.1.4", "@types/node": "^16.0.0", - "@typescript-eslint/eslint-plugin": "^4.28.1", - "@typescript-eslint/parser": "^4.28.1", + "@typescript-eslint/eslint-plugin": "^4.28.2", + "@typescript-eslint/parser": "^4.28.2", "@vitejs/plugin-legacy": "^1.4.3", "@vitejs/plugin-vue": "^1.2.4", "@vitejs/plugin-vue-jsx": "^1.1.6", @@ -58,9 +58,9 @@ "eslint-config-prettier": "^8.3.0", "eslint-plugin-import": "^2.23.4", "eslint-plugin-prettier": "^3.4.0", - "eslint-plugin-vue": "^7.12.1", + "eslint-plugin-vue": "^7.13.0", "gh-pages": "^3.2.3", - "husky": "^7.0.0", + "husky": "^7.0.1", "lint-staged": "^11.0.0", "prettier": "^2.3.2", "pretty-quick": "^3.1.1", @@ -70,11 +70,11 @@ "stylelint-config-standard": "^22.0.0", "stylelint-order": "^4.1.0", "typescript": "^4.3.5", - "vite": "2.3.8", - "vite-plugin-components": "^0.12.0", + "vite": "2.4.1", + "vite-plugin-components": "^0.12.2", "vite-plugin-style-import": "^1.0.1", - "vite-plugin-windicss": "^1.2.0", - "vue-eslint-parser": "^7.7.2", + "vite-plugin-windicss": "^1.2.4", + "vue-eslint-parser": "^7.8.0", "vue-tsc": "^0.2.0", "windicss": "^3.1.4" }, diff --git a/preview/views/comp-render.tsx b/preview/views/comp-render.tsx index 29bdde9..317431e 100644 --- a/preview/views/comp-render.tsx +++ b/preview/views/comp-render.tsx @@ -1,13 +1,13 @@ /* * @Author: 卜启缘 * @Date: 2021-05-04 05:36:58 - * @LastEditTime: 2021-07-04 17:21:34 + * @LastEditTime: 2021-07-06 23:51:26 * @LastEditors: 卜启缘 * @Description: * @FilePath: \vite-vue3-lowcode\preview\views\comp-render.tsx */ import { defineComponent, PropType } from 'vue' -import type { VisualEditorBlockData, VisualEditorConfig } from '@/visual-editor/visual-editor.utils' +import type { VisualEditorBlockData } from '@/visual-editor/visual-editor.utils' import { visualConfig } from '@/visual.config' export default defineComponent({ @@ -21,7 +21,7 @@ export default defineComponent({ setup(props) { return () => visualConfig.componentMap[props.element.componentKey].render({ - size: {}, + styles: props.element.styles || {}, props: props.element.props || {}, model: {}, block: props.element, diff --git a/src/packages/base-widgets/button/index.tsx b/src/packages/base-widgets/button/index.tsx index 5042e67..9f5afef 100644 --- a/src/packages/base-widgets/button/index.tsx +++ b/src/packages/base-widgets/button/index.tsx @@ -12,18 +12,13 @@ export default { moduleName: 'baseWidgets', label: '按钮', preview: () => , - render: ({ props, block, size }) => { + render: ({ props, block, styles }) => { const { registerRef } = useGlobalProperties() return ( - +
+ +
) }, resize: { diff --git a/src/packages/base-widgets/checkbox/index.tsx b/src/packages/base-widgets/checkbox/index.tsx index 4e5d11c..a18f628 100644 --- a/src/packages/base-widgets/checkbox/index.tsx +++ b/src/packages/base-widgets/checkbox/index.tsx @@ -1,7 +1,7 @@ /* * @Author: 卜启缘 * @Date: 2021-06-01 09:45:21 - * @LastEditTime: 2021-07-04 16:50:19 + * @LastEditTime: 2021-07-07 10:54:50 * @LastEditors: 卜启缘 * @Description: 表单项类型 - 复选框 * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\checkbox\index.tsx @@ -32,7 +32,7 @@ export default { ), - render: ({ size, block, props }) => { + render: ({ styles, block, props }) => { const { registerRef } = useGlobalProperties() const state = reactive({ @@ -41,29 +41,28 @@ export default { }) return ( - ( - registerRef(el, block._vid)} - {...props} - v-model={state.checkList} - > - {props.options?.map((item) => ( - - {item.label} - - ))} - - ) - }} - /> +
+ ( + registerRef(el, block._vid)} + {...props} + v-model={state.checkList} + > + {props.options?.map((item) => ( + + {item.label} + + ))} + + ) + }} + /> +
) }, props: { diff --git a/src/packages/base-widgets/datetimePicker/index.tsx b/src/packages/base-widgets/datetimePicker/index.tsx index 9308cec..463a58e 100644 --- a/src/packages/base-widgets/datetimePicker/index.tsx +++ b/src/packages/base-widgets/datetimePicker/index.tsx @@ -26,7 +26,7 @@ export default { moduleName: 'baseWidgets', label: '表单项类型 - 时间选择器', preview: () => , - render: ({ size, block, props }) => { + render: ({ styles, block, props }) => { const { registerRef } = useGlobalProperties() const { attrs } = getCurrentInstance()! @@ -46,16 +46,13 @@ export default { } const PopupPicker = () => ( - <> +
(state.showPicker = true)} - style={{ - width: size.width ? `${size.width}px` : null - }} name={Array.isArray(props.name) ? [...props.name].pop() : props.name} v-slots={{ input: () => @@ -76,7 +73,7 @@ export default { onCancel={() => (state.showPicker = false)} /> - +
) return diff --git a/src/packages/base-widgets/divider/index.tsx b/src/packages/base-widgets/divider/index.tsx index 7648c86..6ccce6c 100644 --- a/src/packages/base-widgets/divider/index.tsx +++ b/src/packages/base-widgets/divider/index.tsx @@ -1,7 +1,7 @@ /* * @Author: 卜启缘 * @Date: 2021-06-01 09:45:21 - * @LastEditTime: 2021-06-25 08:49:31 + * @LastEditTime: 2021-07-07 21:10:10 * @LastEditors: 卜启缘 * @Description: 分割线 * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\divider\index.tsx @@ -21,20 +21,23 @@ export default { moduleName: 'baseWidgets', label: '分割线', preview: () => 文本, - render: ({ props, block }) => { + render: ({ props, block, styles }) => { const { registerRef } = useGlobalProperties() const style = { + width: '100%', color: props['text-color'], borderColor: props['divider-color'] } return ( - registerRef(el, block._vid)} {...props} style={style}> - {{ - default: () => props.text - }} - +
+ registerRef(el, block._vid)} {...props} style={style}> + {{ + default: () => props.text + }} + +
) }, props: { diff --git a/src/packages/base-widgets/image/index.tsx b/src/packages/base-widgets/image/index.tsx index 01d613c..c05ec40 100644 --- a/src/packages/base-widgets/image/index.tsx +++ b/src/packages/base-widgets/image/index.tsx @@ -1,7 +1,7 @@ /* * @Author: 卜启缘 * @Date: 2021-06-01 09:45:21 - * @LastEditTime: 2021-07-04 16:53:22 + * @LastEditTime: 2021-07-07 10:56:20 * @LastEditors: 卜启缘 * @Description: 图片组件 * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\image\index.tsx @@ -30,10 +30,14 @@ export default { ), - render: ({ props, block }) => { + render: ({ props, block, styles }) => { const { registerRef } = useGlobalProperties() - return registerRef(el, block._vid)} {...props} /> + return ( +
+ registerRef(el, block._vid)} {...props} /> +
+ ) }, props: { src: createEditorInputProp({ diff --git a/src/packages/base-widgets/input/index.tsx b/src/packages/base-widgets/input/index.tsx index e2407ec..4c8b81f 100644 --- a/src/packages/base-widgets/input/index.tsx +++ b/src/packages/base-widgets/input/index.tsx @@ -1,7 +1,7 @@ /* * @Author: 卜启缘 * @Date: 2021-05-04 05:36:58 - * @LastEditTime: 2021-07-03 09:45:56 + * @LastEditTime: 2021-07-07 10:56:39 * @LastEditors: 卜启缘 * @Description: 表单项类型 - 输入框 * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\input\index.tsx @@ -18,7 +18,7 @@ export default { preview: () => ( ), - render: ({ model, size, block, props, custom }) => { + render: ({ model, styles, block, props, custom }) => { const { registerRef } = useGlobalProperties() let rules = [] @@ -27,18 +27,17 @@ export default { } catch (e) {} return ( - registerRef(el, block._vid)} - {...custom} - {...props} - {...model.default} - v-model={props.modelValue} - name={Array.isArray(props.name) ? [...props.name].pop() : props.name} - rules={rules} - style={{ - width: size.width ? `${size.width}px` : null - }} - /> +
+ registerRef(el, block._vid)} + {...custom} + {...props} + {...model.default} + v-model={props.modelValue} + name={Array.isArray(props.name) ? [...props.name].pop() : props.name} + rules={rules} + /> +
) }, events: [ diff --git a/src/packages/base-widgets/nav-bar/index.tsx b/src/packages/base-widgets/nav-bar/index.tsx index 9f40a34..abe6e4a 100644 --- a/src/packages/base-widgets/nav-bar/index.tsx +++ b/src/packages/base-widgets/nav-bar/index.tsx @@ -1,7 +1,7 @@ /* * @Author: 卜启缘 * @Date: 2021-05-04 05:36:58 - * @LastEditTime: 2021-07-04 16:54:00 + * @LastEditTime: 2021-07-07 10:56:56 * @LastEditors: 卜启缘 * @Description: 导航栏 * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\nav-bar\index.tsx @@ -19,19 +19,13 @@ export default { preview: () => ( ), - render: ({ props, size, block, custom }) => { + render: ({ props, styles, block, custom }) => { const { registerRef } = useGlobalProperties() return ( - registerRef(el, block._vid)} - placeholder - {...custom} - {...props} - style={{ - width: size.width ? `${size.width}px` : null - }} - /> +
+ registerRef(el, block._vid)} placeholder {...custom} {...props} /> +
) }, props: { diff --git a/src/packages/base-widgets/notice-bar/index.tsx b/src/packages/base-widgets/notice-bar/index.tsx index 7655b22..a8bc467 100644 --- a/src/packages/base-widgets/notice-bar/index.tsx +++ b/src/packages/base-widgets/notice-bar/index.tsx @@ -1,7 +1,7 @@ /* * @Author: 卜启缘 * @Date: 2021-06-14 12:24:12 - * @LastEditTime: 2021-07-04 16:54:32 + * @LastEditTime: 2021-07-07 18:49:16 * @LastEditors: 卜启缘 * @Description: * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\notice-bar\index.tsx @@ -22,10 +22,14 @@ export default { text={'在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。'} /> ), - render: ({ block, props }) => { + render: ({ block, props, styles }) => { const { registerRef } = useGlobalProperties() - return registerRef(el, block._vid)} {...props} /> + return ( +
+ registerRef(el, block._vid)} style={{ width: '100%' }} {...props} /> +
+ ) }, events: [ { label: '点击通知栏时触发', value: 'click' }, diff --git a/src/packages/base-widgets/picker/index.tsx b/src/packages/base-widgets/picker/index.tsx index fe58153..d5701bf 100644 --- a/src/packages/base-widgets/picker/index.tsx +++ b/src/packages/base-widgets/picker/index.tsx @@ -1,7 +1,7 @@ /* * @Author: 卜启缘 * @Date: 2021-06-01 09:45:21 - * @LastEditTime: 2021-07-05 10:18:29 + * @LastEditTime: 2021-07-07 10:57:41 * @LastEditors: 卜启缘 * @Description: 表单项类型 - 选择器 * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\picker\index.tsx @@ -22,7 +22,7 @@ export default { moduleName: 'baseWidgets', label: '表单项类型 - 选择器', preview: () => , - render: ({ size, block, props }) => { + render: ({ styles, block, props }) => { const { registerRef } = useGlobalProperties() const { attrs } = getCurrentInstance()! @@ -49,16 +49,13 @@ export default { } const PopupPicker = () => ( - <> +
(state.showPicker = true)} - style={{ - width: size.width ? `${size.width}px` : null - }} name={Array.isArray(props.name) ? [...props.name].pop() : props.name} > {{ @@ -81,7 +78,7 @@ export default { onCancel={() => (state.showPicker = false)} /> - +
) return diff --git a/src/packages/base-widgets/process/index.tsx b/src/packages/base-widgets/process/index.tsx index fbafa0c..e99eb68 100644 --- a/src/packages/base-widgets/process/index.tsx +++ b/src/packages/base-widgets/process/index.tsx @@ -1,7 +1,7 @@ /* * @Author: 卜启缘 * @Date: 2021-06-12 22:18:48 - * @LastEditTime: 2021-07-04 17:00:12 + * @LastEditTime: 2021-07-07 10:58:10 * @LastEditors: 卜启缘 * @Description: 进度条 * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\process\index.tsx @@ -20,10 +20,14 @@ export default { moduleName: 'baseWidgets', label: '进度条', preview: () => , - render: ({ props }) => { + render: ({ props, styles }) => { const RenderProgress = () => - return + return ( +
+ +
+ ) }, props: { percentage: createEditorInputNumberProp({ label: '进度百分比', defaultValue: 50 }), diff --git a/src/packages/base-widgets/radio/index.tsx b/src/packages/base-widgets/radio/index.tsx index 7317cdc..9457881 100644 --- a/src/packages/base-widgets/radio/index.tsx +++ b/src/packages/base-widgets/radio/index.tsx @@ -1,7 +1,7 @@ /* * @Author: 卜启缘 * @Date: 2021-06-01 09:45:21 - * @LastEditTime: 2021-07-04 17:00:24 + * @LastEditTime: 2021-07-07 10:59:56 * @LastEditors: 卜启缘 * @Description: 表单项类型 - 单选框 * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\radio\index.tsx @@ -27,33 +27,32 @@ export default { two ), - render: ({ size, block, props }) => { + render: ({ styles, block, props }) => { const { registerRef } = useGlobalProperties() return ( - ( - registerRef(el, block._vid)} - {...props} - v-model={props.modelValue} - > - {props.options?.map((item) => ( - - {item.label} - - ))} - - ) - }} - /> +
+ ( + registerRef(el, block._vid)} + {...props} + v-model={props.modelValue} + > + {props.options?.map((item) => ( + + {item.label} + + ))} + + ) + }} + /> +
) }, props: { diff --git a/src/packages/base-widgets/rate/index.tsx b/src/packages/base-widgets/rate/index.tsx index e095d73..dcd473e 100644 --- a/src/packages/base-widgets/rate/index.tsx +++ b/src/packages/base-widgets/rate/index.tsx @@ -1,7 +1,7 @@ /* * @Author: 卜启缘 * @Date: 2021-06-01 09:45:21 - * @LastEditTime: 2021-07-03 09:38:17 + * @LastEditTime: 2021-07-07 11:00:22 * @LastEditors: 卜启缘 * @Description: 表单项类型 - 评分 * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\rate\index.tsx @@ -29,27 +29,26 @@ export default { v-slots={{ input: () => }} > ), - render: ({ size, block, props }) => { + render: ({ styles, block, props }) => { const { registerRef } = useGlobalProperties() return ( - ( - registerRef(el, block._vid)} - {...props} - v-model={props.modelValue} - > - ) - }} - /> +
+ ( + registerRef(el, block._vid)} + {...props} + v-model={props.modelValue} + > + ) + }} + /> +
) }, props: { diff --git a/src/packages/base-widgets/slider/index.tsx b/src/packages/base-widgets/slider/index.tsx index 66b954c..a407765 100644 --- a/src/packages/base-widgets/slider/index.tsx +++ b/src/packages/base-widgets/slider/index.tsx @@ -1,7 +1,7 @@ /* * @Author: 卜启缘 * @Date: 2021-06-01 09:45:21 - * @LastEditTime: 2021-07-03 09:38:29 + * @LastEditTime: 2021-07-07 11:00:37 * @LastEditors: 卜启缘 * @Description: 表单项类型 - 滑块 * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\slider\index.tsx @@ -29,27 +29,26 @@ export default { v-slots={{ input: () => }} > ), - render: ({ size, block, props }) => { + render: ({ styles, block, props }) => { const { registerRef } = useGlobalProperties() return ( - ( - registerRef(el, block._vid)} - {...props} - v-model={props.modelValue} - > - ) - }} - /> +
+ ( + registerRef(el, block._vid)} + {...props} + v-model={props.modelValue} + > + ) + }} + /> +
) }, props: { diff --git a/src/packages/base-widgets/stepper/index.tsx b/src/packages/base-widgets/stepper/index.tsx index 2ae7b7d..ff117c7 100644 --- a/src/packages/base-widgets/stepper/index.tsx +++ b/src/packages/base-widgets/stepper/index.tsx @@ -1,7 +1,7 @@ /* * @Author: 卜启缘 * @Date: 2021-06-01 09:45:21 - * @LastEditTime: 2021-07-03 09:38:50 + * @LastEditTime: 2021-07-07 11:00:52 * @LastEditors: 卜启缘 * @Description: '表单项类型 - 步进器 * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\stepper\index.tsx @@ -30,27 +30,26 @@ export default { v-slots={{ input: () => }} > ), - render: ({ size, block, props }) => { + render: ({ styles, block, props }) => { const { registerRef } = useGlobalProperties() return ( - ( - registerRef(el, block._vid)} - {...props} - v-model={props.modelValue} - > - ) - }} - /> +
+ ( + registerRef(el, block._vid)} + {...props} + v-model={props.modelValue} + > + ) + }} + /> +
) }, props: { diff --git a/src/packages/base-widgets/swipe/index.tsx b/src/packages/base-widgets/swipe/index.tsx index 056883c..4373bc3 100644 --- a/src/packages/base-widgets/swipe/index.tsx +++ b/src/packages/base-widgets/swipe/index.tsx @@ -1,7 +1,7 @@ /* * @Author: 卜启缘 * @Date: 2021-06-14 12:24:12 - * @LastEditTime: 2021-07-04 17:01:36 + * @LastEditTime: 2021-07-07 11:01:14 * @LastEditors: 卜启缘 * @Description: 轮播图组件 * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\swipe\index.tsx @@ -29,23 +29,25 @@ export default { 4 ), - render: ({ block, props }) => { + render: ({ block, props, styles }) => { const { registerRef } = useGlobalProperties() return ( - registerRef(el, block._vid)} - {...props} - style={{ height: `${props.height}px` }} - > - {props.images?.map((item) => ( - <> - - - - - ))} - +
+ registerRef(el, block._vid)} + {...props} + style={{ height: `${props.height}px` }} + > + {props.images?.map((item) => ( + <> + + + + + ))} + +
) }, props: createFieldProps(), diff --git a/src/packages/base-widgets/switch/index.tsx b/src/packages/base-widgets/switch/index.tsx index 5a0dd52..f0915c4 100644 --- a/src/packages/base-widgets/switch/index.tsx +++ b/src/packages/base-widgets/switch/index.tsx @@ -1,7 +1,7 @@ /* * @Author: 卜启缘 * @Date: 2021-06-01 09:45:21 - * @LastEditTime: 2021-07-04 17:02:06 + * @LastEditTime: 2021-07-07 11:01:29 * @LastEditors: 卜启缘 * @Description: 表单项类型 - 开关 * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\switch\index.tsx @@ -24,27 +24,26 @@ export default { preview: () => ( }} /> ), - render: ({ size, block, props }) => { + render: ({ styles, block, props }) => { const { registerRef } = useGlobalProperties() return ( - ( - registerRef(el, block._vid)} - {...props} - v-model={props.modelValue} - /> - ) - }} - /> +
+ ( + registerRef(el, block._vid)} + {...props} + v-model={props.modelValue} + /> + ) + }} + /> +
) }, props: { diff --git a/src/packages/base-widgets/text/index.tsx b/src/packages/base-widgets/text/index.tsx index a3a9930..7b9a7de 100644 --- a/src/packages/base-widgets/text/index.tsx +++ b/src/packages/base-widgets/text/index.tsx @@ -1,7 +1,7 @@ /* * @Author: 卜启缘 * @Date: 2021-06-01 09:45:21 - * @LastEditTime: 2021-06-25 08:51:29 + * @LastEditTime: 2021-07-07 11:01:54 * @LastEditors: 卜启缘 * @Description: 文本 * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\text\index.tsx @@ -21,7 +21,7 @@ export default { moduleName: 'baseWidgets', label: '文本', preview: () => 预览文本, - render: ({ props, block }) => { + render: ({ props, block, styles }) => { const { registerRef } = useGlobalProperties() return ( @@ -30,7 +30,8 @@ export default { style={{ color: props.color, fontSize: `${parseFloat(props.size)}px`, - fontFamily: props.font + fontFamily: props.font, + ...styles }} > {props.text || '默认文本'} diff --git a/src/packages/container-component/form/index.tsx b/src/packages/container-component/form/index.tsx index 49b083b..15e35ef 100644 --- a/src/packages/container-component/form/index.tsx +++ b/src/packages/container-component/form/index.tsx @@ -1,7 +1,7 @@ /* * @Author: 卜启缘 * @Date: 2021-06-01 09:45:21 - * @LastEditTime: 2021-06-27 18:01:21 + * @LastEditTime: 2021-07-07 21:23:23 * @LastEditors: 卜启缘 * @Description: * @FilePath: \vite-vue3-lowcode\src\packages\container-component\form\index.tsx @@ -27,7 +27,7 @@ export default { ), - render: function ({ props, custom, block }) { + render: function ({ props, styles, block }) { const { slots } = getCurrentInstance()! const { registerRef } = useGlobalProperties() @@ -36,9 +36,16 @@ export default { } return ( -
registerRef(el, block._vid)} {...custom} {...props} onSubmit={onSubmit}> - {renderSlot(slots, 'default')} -
+
+
registerRef(el, block._vid)} + {...props} + style={{ width: '100%' }} + onSubmit={onSubmit} + > + {renderSlot(slots, 'default')} +
+
) }, resize: { diff --git a/src/packages/container-component/layout/index.module.scss b/src/packages/container-component/layout/index.module.scss index d2b2ac6..edc4be0 100644 --- a/src/packages/container-component/layout/index.module.scss +++ b/src/packages/container-component/layout/index.module.scss @@ -6,5 +6,6 @@ * @update: 2021/5/2 16:15 */ .van-row { + width: 100%; padding: 2px; } diff --git a/src/packages/container-component/layout/index.tsx b/src/packages/container-component/layout/index.tsx index d207c32..77ef8f6 100644 --- a/src/packages/container-component/layout/index.tsx +++ b/src/packages/container-component/layout/index.tsx @@ -2,7 +2,7 @@ import { Col, Row } from 'vant' import { renderSlot, getCurrentInstance } from 'vue' import { createEditorInputProp, createEditorSelectProp } from '@/visual-editor/visual-editor.props' import type { VisualEditorComponent } from '@/visual-editor/visual-editor.utils' -import styles from './index.module.scss' +import styleModule from './index.module.scss' import { useGlobalProperties } from '@/hooks/useGlobalProperties' interface SlotItem { @@ -36,7 +36,7 @@ export default { span: 8 ), - render: function ({ props, size, block, custom }) { + render: function ({ props, styles, block, custom }) { const { slots } = getCurrentInstance()! const { registerRef } = useGlobalProperties() @@ -51,27 +51,25 @@ export default { } return ( - registerRef(el, block._vid)} - {...custom} - {...props} - style={{ - height: size.height ? `${size.height}px` : null, - width: size.width ? `${size.width}px` : null - }} - class={styles.vanRow} - > - {Object.values(Object.keys(props.slots).length ? props.slots : createSlots('12:12')) - ?.filter((item) => typeof item !== 'string') - .map((spanItem: SlotItem, spanIndex) => { - slotsTemp[block._vid][`slot${spanIndex}`] = spanItem - return ( - <> - {renderSlot(slots, `slot${spanIndex}`)} - - ) - })} - +
+ registerRef(el, block._vid)} + {...custom} + {...props} + class={styleModule.vanRow} + > + {Object.values(Object.keys(props.slots).length ? props.slots : createSlots('12:12')) + ?.filter((item) => typeof item !== 'string') + .map((spanItem: SlotItem, spanIndex) => { + slotsTemp[block._vid][`slot${spanIndex}`] = spanItem + return ( + <> + {renderSlot(slots, `slot${spanIndex}`)} + + ) + })} + +
) }, resize: { diff --git a/src/visual-editor/components/common/format-input-number/index.module.scss b/src/visual-editor/components/common/format-input-number/index.module.scss new file mode 100644 index 0000000..b0b36f2 --- /dev/null +++ b/src/visual-editor/components/common/format-input-number/index.module.scss @@ -0,0 +1,7 @@ +.format-input-number { + :global { + .el-input-group__append { + padding: 0 10px; + } + } +} diff --git a/src/visual-editor/components/common/format-input-number/index.tsx b/src/visual-editor/components/common/format-input-number/index.tsx new file mode 100644 index 0000000..dd025fc --- /dev/null +++ b/src/visual-editor/components/common/format-input-number/index.tsx @@ -0,0 +1,75 @@ +/* + * @Author: 卜启缘 + * @Date: 2021-07-06 22:14:13 + * @LastEditTime: 2021-07-07 16:32:50 + * @LastEditors: 卜启缘 + * @Description: + * @FilePath: \vite-vue3-lowcode\src\visual-editor\components\common\format-input-number\index.tsx + */ +import { defineComponent } from 'vue' +import { ElInput } from 'element-plus' +import type { PropType } from 'vue' +import { useVModel } from '@vueuse/core' +import styles from './index.module.scss' + +export const FormatInputNumber = defineComponent({ + props: { + modelValue: { + type: [String] as PropType, + default: '' + }, + symbol: { + // 符号 + type: String as PropType, + default: 'px' + }, + max: { + type: [Number], + default: 100 + }, + min: { + type: [Number], + default: 0 + } + }, + emits: ['update:modelValue'], + setup(props, { attrs }) { + const modelValue = useVModel(props, 'modelValue') + + const onInput = (val) => { + let num = parseFloat(`${val}`.replace(/[^0-9]/gi, '')) + num = Number.isNaN(num) ? 0 : num + num = Math.max(props.min, num) + num = Math.min(props.max, num) + modelValue.value = num + props.symbol + } + + const increment = () => { + onInput(parseFloat(modelValue.value) + 1) + } + + const cutdown = () => { + onInput(Math.max(props.min, parseFloat(modelValue.value) - 1)) + } + + return () => ( +
+ + {{ + append: () => ( +
+
+
+
+ ) + }} + +
+ ) + } +}) diff --git a/src/visual-editor/components/header/index.vue b/src/visual-editor/components/header/index.vue index cb20fb5..d0084df 100644 --- a/src/visual-editor/components/header/index.vue +++ b/src/visual-editor/components/header/index.vue @@ -107,7 +107,7 @@ export default defineComponent({ .logo { width: 60px; height: 60px; - background-image: url('../../../assets/logo.png'); + background-image: url('@/assets/logo.png'); background-repeat: no-repeat; background-size: contain; } diff --git a/src/visual-editor/components/left-aside/components/base-widgets/index.tsx b/src/visual-editor/components/left-aside/components/base-widgets/index.tsx index fb4876a..4500462 100644 --- a/src/visual-editor/components/left-aside/components/base-widgets/index.tsx +++ b/src/visual-editor/components/left-aside/components/base-widgets/index.tsx @@ -1,7 +1,7 @@ /* * @Author: 卜启缘 * @Date: 2021-06-01 13:22:14 - * @LastEditTime: 2021-07-04 21:36:26 + * @LastEditTime: 2021-07-06 20:32:39 * @LastEditors: 卜启缘 * @Description: 基础组件 * @FilePath: \vite-vue3-lowcode\src\visual-editor\components\left-aside\components\base-widgets\index.tsx @@ -29,7 +29,7 @@ export default defineComponent({ console.log('当前拖拽的组件：', comp) const newComp = cloneDeep(comp) newComp._vid = Date.now() - return createNewBlock({ left: 0, top: 0, component: newComp }) + return createNewBlock(newComp) } return () => ( diff --git a/src/visual-editor/components/left-aside/components/container-component/index.tsx b/src/visual-editor/components/left-aside/components/container-component/index.tsx index ce52853..dc9aa2f 100644 --- a/src/visual-editor/components/left-aside/components/container-component/index.tsx +++ b/src/visual-editor/components/left-aside/components/container-component/index.tsx @@ -28,7 +28,7 @@ export default defineComponent({ console.log('当前拖拽的组件：', comp) const newComp = cloneDeep(comp) newComp._vid = Date.now() - return createNewBlock({ left: 0, top: 0, component: newComp }) + return createNewBlock(newComp) } return () => ( diff --git a/src/visual-editor/components/left-aside/components/data-source/data-fetch.vue b/src/visual-editor/components/left-aside/components/data-source/data-fetch.vue index 0b6ae32..0b1beff 100644 --- a/src/visual-editor/components/left-aside/components/data-source/data-fetch.vue +++ b/src/visual-editor/components/left-aside/components/data-source/data-fetch.vue @@ -1,7 +1,7 @@ - - - - - - - - - - - -