From 65493e128a00334cf12ec978a22c98fc4cde37ce Mon Sep 17 00:00:00 2001 From: bqy_fe <1743369777@qq.com> Date: Sun, 30 May 2021 14:31:04 +0800 Subject: [PATCH] fix: some bug --- README.md | 21 + package.json | 24 +- preview/main.ts | 5 +- preview/views/preview.vue | 19 +- src/main.ts | 5 +- src/packages/base-widgets/button/index.tsx | 30 +- .../base-widgets/checkbox/createFieldProps.ts | 6 +- src/packages/base-widgets/checkbox/index.tsx | 10 +- .../datetimePicker/createFieldProps.ts | 6 +- .../base-widgets/datetimePicker/index.tsx | 40 +- src/packages/base-widgets/divider/index.tsx | 6 +- src/packages/base-widgets/image/index.tsx | 24 +- .../base-widgets/input/createFieldProps.ts | 39 +- .../base-widgets/picker/createFieldProps.ts | 6 +- src/packages/base-widgets/picker/index.tsx | 13 +- .../base-widgets/radio/createFieldProps.ts | 6 +- src/packages/base-widgets/radio/index.tsx | 6 +- .../base-widgets/rate/createFieldProps.ts | 6 +- src/packages/base-widgets/rate/index.tsx | 2 +- .../base-widgets/slider/createFieldProps.ts | 6 +- src/packages/base-widgets/slider/index.tsx | 2 +- .../base-widgets/stepper/createFieldProps.ts | 6 +- src/packages/base-widgets/stepper/index.tsx | 2 +- .../base-widgets/switch/createFieldProps.ts | 6 +- src/packages/base-widgets/switch/index.tsx | 2 +- src/packages/base-widgets/text/index.tsx | 6 +- .../container-component/form/compProps.ts | 76 +++ .../container-component/form/index.tsx | 17 +- .../container-component/layout/index.tsx | 30 +- src/plugins/vant.ts | 7 + .../left-aside/components/page-tree/index.vue | 2 +- .../right-attribute-panel/components/index.ts | 8 + .../table-prop-editor/table-prop-editor.tsx | 13 +- .../right-attribute-panel/index.tsx | 58 +- .../simulator-editor/simulator-editor.vue | 17 +- src/visual-editor/hooks/useVisualData.ts | 54 +- src/visual-editor/types/index.d.ts | 11 + src/visual-editor/visual-editor.props.tsx | 17 +- src/visual-editor/visual.command.tsx | 464 +++++++------- yarn.lock | 575 ++++++++---------- 40 files changed, 847 insertions(+), 806 deletions(-) create mode 100644 src/packages/container-component/form/compProps.ts create mode 100644 src/visual-editor/components/right-attribute-panel/components/index.ts create mode 100644 src/visual-editor/types/index.d.ts diff --git a/README.md b/README.md index 8c2b916..3136eb2 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,27 @@ 目前在使用表单时，需要把相关的`表单控件`放到`表单容器`内部，并且需要将`按钮`放到`表单容器`内， 然后再讲`按钮的type`设置为`表单提交按钮`这时候点击提交按钮才会自动收集表单容器内部的所有字段和值 +### 快速生成组件属性 + +```javascript +// 在vant文档中 chrome控制台输入以下代码，快速生成组件属性 +let propObj = { + string: (config) => `createEditorInputProp(${JSON.stringify(config)})`, + number: (config) => `createEditorInputNumberProp(${JSON.stringify(config)})`, + boolean: (config) => `createEditorSwitchProp(${JSON.stringify(config)})` +} + +$$('#props + table tr').reduce((prev, curr) => { + const children = curr.children + const key = children[0].textContent.replace(/-([a-z])/g, (all, i) => i.toUpperCase()) + const value = (propObj[children[2].textContent] ?? propObj['string'])({ + label: `'${children[1].textContent}'` + }).replaceAll('"', '') + prev[key] = value + return prev +}, {}) +``` + ## 浏览器支持 本地开发推荐使用`Chrome 80+` 浏览器 diff --git a/package.json b/package.json index 92f299b..2e4f1d8 100644 --- a/package.json +++ b/package.json @@ -20,20 +20,20 @@ "prepare": "husky install" }, "dependencies": { - "@vant/touch-emulator": "^1.2.0", + "@vant/touch-emulator": "^1.3.0", "@vueuse/core": "^4.11.1", "@vueuse/integrations": "^4.11.1", "axios": "^0.21.1", "dayjs": "^1.10.4", "dexie": "^3.0.3", - "element-plus": "^1.0.2-beta.44", + "element-plus": "^1.0.2-beta.45", "lodash": "^4.17.21", "monaco-editor": "^0.24.0", "normalize.css": "^8.0.1", "nprogress": "^1.0.0-1", "qrcode": "^1.4.4", "vant": "^3.0.17", - "vue": "^3.1.0-beta.4", + "vue": "3.0.11", "vue-router": "^4.0.8", "vuedraggable": "^4.0.1", "vuex": "^4.0.1" @@ -41,13 +41,13 @@ "devDependencies": { "@commitlint/cli": "^12.1.4", "@commitlint/config-conventional": "^12.1.4", - "@types/node": "^14.17.1", + "@types/node": "^15.6.1", "@typescript-eslint/eslint-plugin": "^4.25.0", "@typescript-eslint/parser": "^4.25.0", "@vitejs/plugin-legacy": "^1.4.0", "@vitejs/plugin-vue": "^1.2.2", "@vitejs/plugin-vue-jsx": "^1.1.4", - "@vue/compiler-sfc": "^3.1.0-beta.4", + "@vue/compiler-sfc": "3.0.11", "commitizen": "^4.2.4", "cz-conventional-changelog": "^3.3.0", "cz-customizable": "^6.3.0", @@ -56,24 +56,24 @@ "eslint-plugin-import": "^2.23.3", "eslint-plugin-prettier": "^3.4.0", "eslint-plugin-vue": "^7.9.0", - "gh-pages": "^3.1.0", + "gh-pages": "^3.2.0", "husky": "^6.0.0", - "lint-staged": "^10.5.4", + "lint-staged": "^11.0.0", "prettier": "^2.3.0", "pretty-quick": "^3.1.0", - "sass": "1.32.13", + "sass": "1.34.0", "stylelint": "^13.13.1", "stylelint-config-prettier": "^8.0.2", "stylelint-config-standard": "^22.0.0", "stylelint-order": "^4.1.0", - "typescript": "^4.2.4", + "typescript": "^4.3.2", "vite": "2.3.4", - "vite-plugin-components": "^0.10.2", + "vite-plugin-components": "^0.10.3", "vite-plugin-style-import": "^0.10.1", - "vite-plugin-windicss": "^0.16.0", + "vite-plugin-windicss": "^0.16.7", "vue-eslint-parser": "^7.6.0", "vue-tsc": "^0.1.6", - "windicss": "^2.5.14" + "windicss": "^3.0.12" }, "repository": { "type": "git", diff --git a/preview/main.ts b/preview/main.ts index 4d04e78..9a8f776 100644 --- a/preview/main.ts +++ b/preview/main.ts @@ -3,10 +3,13 @@ import App from './App.vue' import router from './router' -import '@/plugins/vant' +import { setupVant } from '@/plugins/vant' const app = createApp(App) +// 安装vant插件 +setupVant(app) + app.config.globalProperties.$$refs = {} // if (import.meta.env.DEV) { diff --git a/preview/views/preview.vue b/preview/views/preview.vue index 284b4d9..fd5ed51 100644 --- a/preview/views/preview.vue +++ b/preview/views/preview.vue @@ -44,26 +44,9 @@ export default defineComponent({ router.replace('/') } - // 渲染组件 - const renderCom = (element) => { - if (Array.isArray(element)) { - return element.map((item) => renderCom(item)) - } - const component = visualConfig.componentMap[element.componentKey] - - return component.render({ - size: {}, - props: element.props || {}, - block: element, - model: {}, - custom: {} - }) - } - return { ...toRefs(state), - visualConfig, - renderCom + visualConfig } } }) diff --git a/src/main.ts b/src/main.ts index b22fbc9..2ea2c2b 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,7 +2,7 @@ import { createApp } from 'vue' import App from './App.vue' import './plugins/element-plus' -import './plugins/vant' +import { setupVant } from './plugins/vant' import 'normalize.css' import 'virtual:windi.css' @@ -13,6 +13,9 @@ import store from './store/' const app = createApp(App) +// 使用vant插件 +setupVant(app) + app.config.globalProperties.$$refs = {} // if (import.meta.env.DEV) { diff --git a/src/packages/base-widgets/button/index.tsx b/src/packages/base-widgets/button/index.tsx index 037dc96..15a2fbc 100644 --- a/src/packages/base-widgets/button/index.tsx +++ b/src/packages/base-widgets/button/index.tsx @@ -37,23 +37,23 @@ export default { options: [ { label: '主要按钮', - val: 'primary' + value: 'primary' }, { label: '成功按钮', - val: 'success' + value: 'success' }, { label: '默认按钮', - val: 'default' + value: 'default' }, { label: '警告按钮', - val: 'warning' + value: 'warning' }, { label: '危险按钮', - val: 'danger' + value: 'danger' } ], defaultValue: 'default' @@ -63,19 +63,19 @@ export default { options: [ { label: '大型', - val: 'large' + value: 'large' }, { label: '普通', - val: 'normal' + value: 'normal' }, { label: '小型', - val: 'small' + value: 'small' }, { label: '迷你', - val: 'mini' + value: 'mini' } ], defaultValue: 'normal' @@ -83,10 +83,10 @@ export default { 'native-type': createEditorSelectProp({ label: '原生button的type属性', options: [ - { label: '普通button', val: 'button' }, + { label: '普通button', value: 'button' }, { label: '表单提交按钮', - val: 'submit' + value: 'submit' } ], defaultValue: 'button' @@ -110,11 +110,11 @@ export default { options: [ { label: '左侧', - val: 'left' + value: 'left' }, { label: '右侧', - val: 'right' + value: 'right' } ] }), @@ -128,8 +128,8 @@ export default { 'loading-type': createEditorSelectProp({ label: '加载图标类型', options: [ - { label: 'circular', val: 'circular' }, - { label: 'spinner', val: 'spinner' } + { label: 'circular', value: 'circular' }, + { label: 'spinner', value: 'spinner' } ], defaultValue: 'circular' }) diff --git a/src/packages/base-widgets/checkbox/createFieldProps.ts b/src/packages/base-widgets/checkbox/createFieldProps.ts index 774c84c..bfa097f 100644 --- a/src/packages/base-widgets/checkbox/createFieldProps.ts +++ b/src/packages/base-widgets/checkbox/createFieldProps.ts @@ -19,15 +19,15 @@ export const createFieldProps = () => ({ options: [ { label: '左对齐', - val: 'left' + value: 'left' }, { label: '居中', - val: 'center' + value: 'center' }, { label: '右对齐', - val: 'right' + value: 'right' } ], defaultValue: 'left' diff --git a/src/packages/base-widgets/checkbox/index.tsx b/src/packages/base-widgets/checkbox/index.tsx index 9a37edc..2bc8860 100644 --- a/src/packages/base-widgets/checkbox/index.tsx +++ b/src/packages/base-widgets/checkbox/index.tsx @@ -54,13 +54,13 @@ export default { modelValue: createEditorSelectProp({ label: '默认值', options: [ - { label: '萝卜', val: 'radish' }, - { label: '青菜', val: 'greens' } + { label: '萝卜', value: 'radish' }, + { label: '青菜', value: 'greens' } ], multiple: true, defaultValue: [] }), - name: createEditorInputProp({ label: '名称，提交表单的标识符', defaultValue: 'checkbox' }), + name: createEditorInputProp({ label: '字段名', defaultValue: 'checkbox' }), label: createEditorInputProp({ label: '输入框左侧文本', defaultValue: '复选框' }), options: createEditorTableProp({ label: '默认选项', @@ -82,11 +82,11 @@ export default { options: [ { label: '水平', - val: 'horizontal' + value: 'horizontal' }, { label: '垂直', - val: 'vertical' + value: 'vertical' } ], defaultValue: 'horizontal' diff --git a/src/packages/base-widgets/datetimePicker/createFieldProps.ts b/src/packages/base-widgets/datetimePicker/createFieldProps.ts index 774c84c..bfa097f 100644 --- a/src/packages/base-widgets/datetimePicker/createFieldProps.ts +++ b/src/packages/base-widgets/datetimePicker/createFieldProps.ts @@ -19,15 +19,15 @@ export const createFieldProps = () => ({ options: [ { label: '左对齐', - val: 'left' + value: 'left' }, { label: '居中', - val: 'center' + value: 'center' }, { label: '右对齐', - val: 'right' + value: 'right' } ], defaultValue: 'left' diff --git a/src/packages/base-widgets/datetimePicker/index.tsx b/src/packages/base-widgets/datetimePicker/index.tsx index 997dfb8..493dfec 100644 --- a/src/packages/base-widgets/datetimePicker/index.tsx +++ b/src/packages/base-widgets/datetimePicker/index.tsx @@ -12,6 +12,14 @@ import { reactive } from 'vue' import { isDate } from '@/visual-editor/utils/is' import dayjs from 'dayjs' +const dateType = { + 'month-day': 'MM-DD', + 'year-month': 'YYYY-MM', + date: 'YYYY-MM-DD', + datehour: 'YYYY-MM-DD HH', + datetime: 'YYYY-MM-DD HH:mm:ss' +} + export default { key: 'datetimePicker', moduleName: 'baseWidgets', @@ -21,11 +29,12 @@ export default { const { registerRef } = useGlobalProperties() const state = reactive({ showPicker: false, - text: '' + text: '', + currentDate: new Date() }) const onConfirm = (value) => { - const date = isDate(value) ? dayjs(value).format(props.format) : value + const date = isDate(value) ? dayjs(value).format(props.format || dateType[props.type]) : value props.modelValue = date state.text = date state.showPicker = false @@ -56,6 +65,7 @@ export default { registerRef(el, block._vid)} {...props} + v-model={state.currentDate} onConfirm={onConfirm} onCancel={() => (state.showPicker = false)} /> @@ -63,16 +73,12 @@ export default { ) - return ( - <> - - - ) + return }, props: { modelValue: createEditorInputProp({ label: '默认值' }), name: createEditorInputProp({ - label: '名称，提交表单的标识符', + label: '字段名', defaultValue: 'datetimePicker' }), label: createEditorInputProp({ label: '输入框左侧文本', defaultValue: '时间选择器' }), @@ -82,31 +88,31 @@ export default { options: [ { label: 'date', - val: 'date' + value: 'date' }, { - label: 'time', - val: 'time' + label: 'datetime', + value: 'datetime' }, { label: 'year-month', - val: 'year-month' + value: 'year-month' }, { label: 'month-day', - val: 'month-day' + value: 'month-day' }, { label: 'datehour', - val: 'datehour' + value: 'datehour' } ], - defaultValue: 'time' + defaultValue: 'datetime' }), format: createEditorInputProp({ - label: '选择时间后格式化值', + label: '自定义日期格式化值', tips: 'YYYY-MM-DD HH:mm:ss', - defaultValue: 'YYYY-MM-DD HH:mm:ss' + defaultValue: '' }), cancelButtonText: createEditorInputProp({ label: '取消按钮文字' }), columnsOrder: createEditorInputProp({ diff --git a/src/packages/base-widgets/divider/index.tsx b/src/packages/base-widgets/divider/index.tsx index 9f55f33..d4ffedb 100644 --- a/src/packages/base-widgets/divider/index.tsx +++ b/src/packages/base-widgets/divider/index.tsx @@ -27,9 +27,9 @@ export default { 'content-position': createEditorSelectProp({ label: '文本位置', options: [ - { label: '左边', val: 'left' }, - { label: '中间', val: 'center' }, - { label: '右边', val: 'right' } + { label: '左边', value: 'left' }, + { label: '中间', value: 'center' }, + { label: '右边', value: 'right' } ], defaultValue: 'center' }), diff --git a/src/packages/base-widgets/image/index.tsx b/src/packages/base-widgets/image/index.tsx index e928041..c08fee1 100644 --- a/src/packages/base-widgets/image/index.tsx +++ b/src/packages/base-widgets/image/index.tsx @@ -29,45 +29,45 @@ export default { label: '图片链接', defaultValue: 'https://img.yzcdn.cn/vant/cat.jpeg' }), - width: createEditorInputProp({ label: '宽度，默认单位为 px', defaultValue: 100 }), - height: createEditorInputProp({ label: '高度，默认单位为 px', defaultValue: 100 }), - 'error-icon': createEditorInputProp({ label: '失败时提示的图标名称或图片链接' }), + width: createEditorInputProp({ label: '宽度', defaultValue: 100 }), + height: createEditorInputProp({ label: '高度', defaultValue: 100 }), + errorIcon: createEditorInputProp({ label: '失败时提示的图标名称或图片链接' }), fit: createEditorSelectProp({ label: '图片填充模式', options: [ { label: '保持宽高缩放图片，使图片的长边能完全显示出来', - val: 'contain' + value: 'contain' }, { label: '保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边', - val: 'cover' + value: 'cover' }, { label: '拉伸图片，使图片填满元素', - val: 'fill' + value: 'fill' }, { label: '保持图片原有尺寸', - val: 'none' + value: 'none' }, { label: '取 none 或 contain 中较小的一个', - val: 'scale-down' + value: 'scale-down' } ], defaultValue: 'fill' }), - 'icon-prefix': createEditorInputProp({ + iconPrefix: createEditorInputProp({ label: '图标类名前缀', tips: '图标类名前缀，同 Icon 组件的 class-prefix 属性' }), - 'icon-size': createEditorInputProp({ label: '加载图标和失败图标的大小' }), - 'lazy-load': createEditorSwitchProp({ + iconSize: createEditorInputProp({ label: '加载图标和失败图标的大小' }), + lazyLoad: createEditorSwitchProp({ label: '是否开启图片懒加载', tips: '须配合 Lazyload 组件使用' }), - 'loading-icon': createEditorInputProp({ label: '加载时提示的图标名称或图片链接' }), + loadingIcon: createEditorInputProp({ label: '加载时提示的图标名称或图片链接' }), radius: createEditorInputProp({ label: '圆角大小', tips: '默认单位为 px' }), round: createEditorSwitchProp({ label: '是否显示为圆形' }), 'show-error': createEditorSwitchProp({ label: '是否展示图片加载失败提示' }), diff --git a/src/packages/base-widgets/input/createFieldProps.ts b/src/packages/base-widgets/input/createFieldProps.ts index 0a6b687..a6f207b 100644 --- a/src/packages/base-widgets/input/createFieldProps.ts +++ b/src/packages/base-widgets/input/createFieldProps.ts @@ -16,17 +16,17 @@ export const createFieldProps = () => ({ label: '默认值', defaultValue: '' }), - name: createEditorInputProp({ label: '名称，提交表单的标识符', defaultValue: 'input' }), + name: createEditorInputProp({ label: '字段名', defaultValue: 'input' }), label: createEditorInputProp({ label: '输入框左侧文本', defaultValue: '输入框' }), type: createEditorSelectProp({ label: '输入框类型', options: [ - { label: '文本', val: 'text' }, - { label: '数字', val: 'number' }, - { label: '文本域', val: 'textarea' }, - { label: '密码', val: 'password' }, - { label: '电话', val: 'tel' }, - { label: '小数点', val: 'digit' } + { label: '文本', value: 'text' }, + { label: '数字', value: 'number' }, + { label: '文本域', value: 'textarea' }, + { label: '密码', value: 'password' }, + { label: '电话', value: 'tel' }, + { label: '小数点', value: 'digit' } ], defaultValue: 'text' }), @@ -40,15 +40,15 @@ export const createFieldProps = () => ({ options: [ { label: '左对齐', - val: 'left' + value: 'left' }, { label: '居中', - val: 'center' + value: 'center' }, { label: '右对齐', - val: 'right' + value: 'right' } ], defaultValue: 'left' @@ -66,8 +66,7 @@ export const createFieldProps = () => ({ autosize: createEditorSwitchProp({ label: '自适应内容高度', defaultValue: false, - tips: - '是否自适应内容高度，只对 textarea 有效，可传入对象,如 { maxHeight: 100, minHeight: 50 }，单位为px' + tips: '是否自适应内容高度，只对 textarea 有效，可传入对象,如 { maxHeight: 100, minHeight: 50 }，单位为px' }), border: createEditorSwitchProp({ label: '是否显示内边框', defaultValue: true }), center: createEditorSwitchProp({ label: '内容垂直居中' }), @@ -78,8 +77,8 @@ export const createFieldProps = () => ({ 'clear-trigger': createEditorSelectProp({ label: '清除图标显示时机', options: [ - { label: '输入框不为空时展示', val: 'always' }, - { label: '输入框聚焦且不为空时展示', val: 'focus' } + { label: '输入框不为空时展示', value: 'always' }, + { label: '输入框聚焦且不为空时展示', value: 'focus' } ], defaultValue: 'always', tips: '显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示' @@ -101,15 +100,15 @@ export const createFieldProps = () => ({ options: [ { label: '左对齐', - val: 'left' + value: 'left' }, { label: '居中', - val: 'center' + value: 'center' }, { label: '右对齐', - val: 'right' + value: 'right' } ], defaultValue: 'left' @@ -119,15 +118,15 @@ export const createFieldProps = () => ({ options: [ { label: '左对齐', - val: 'left' + value: 'left' }, { label: '居中', - val: 'center' + value: 'center' }, { label: '右对齐', - val: 'right' + value: 'right' } ], defaultValue: 'left' diff --git a/src/packages/base-widgets/picker/createFieldProps.ts b/src/packages/base-widgets/picker/createFieldProps.ts index 774c84c..bfa097f 100644 --- a/src/packages/base-widgets/picker/createFieldProps.ts +++ b/src/packages/base-widgets/picker/createFieldProps.ts @@ -19,15 +19,15 @@ export const createFieldProps = () => ({ options: [ { label: '左对齐', - val: 'left' + value: 'left' }, { label: '居中', - val: 'center' + value: 'center' }, { label: '右对齐', - val: 'right' + value: 'right' } ], defaultValue: 'left' diff --git a/src/packages/base-widgets/picker/index.tsx b/src/packages/base-widgets/picker/index.tsx index e189862..1589dc3 100644 --- a/src/packages/base-widgets/picker/index.tsx +++ b/src/packages/base-widgets/picker/index.tsx @@ -39,7 +39,8 @@ export default { style={{ width: size.width ? `${size.width}px` : null }} - v-slots={{ + > + {{ input: () => state.text?.trim() == '' ? ( {props.placeholder} @@ -47,7 +48,7 @@ export default { state.text ) }} - /> + registerRef(el, block._vid)} @@ -60,15 +61,11 @@ export default { ) - return ( - <> - - - ) + return }, props: { modelValue: createEditorInputProp({ label: '默认值' }), - name: createEditorInputProp({ label: '名称，提交表单的标识符', defaultValue: 'picker' }), + name: createEditorInputProp({ label: '字段名', defaultValue: 'picker' }), label: createEditorInputProp({ label: '输入框左侧文本', defaultValue: '选择器' }), columns: createEditorTableProp({ label: '数据项', diff --git a/src/packages/base-widgets/radio/createFieldProps.ts b/src/packages/base-widgets/radio/createFieldProps.ts index 774c84c..bfa097f 100644 --- a/src/packages/base-widgets/radio/createFieldProps.ts +++ b/src/packages/base-widgets/radio/createFieldProps.ts @@ -19,15 +19,15 @@ export const createFieldProps = () => ({ options: [ { label: '左对齐', - val: 'left' + value: 'left' }, { label: '居中', - val: 'center' + value: 'center' }, { label: '右对齐', - val: 'right' + value: 'right' } ], defaultValue: 'left' diff --git a/src/packages/base-widgets/radio/index.tsx b/src/packages/base-widgets/radio/index.tsx index ade6f0b..7ff907f 100644 --- a/src/packages/base-widgets/radio/index.tsx +++ b/src/packages/base-widgets/radio/index.tsx @@ -48,7 +48,7 @@ export default { }, props: { modelValue: createEditorInputProp({ label: '默认值', defaultValue: '' }), - name: createEditorInputProp({ label: '名称，提交表单的标识符', defaultValue: 'radio' }), + name: createEditorInputProp({ label: '字段名', defaultValue: 'radio' }), label: createEditorInputProp({ label: '输入框左侧文本', defaultValue: '单选框' }), options: createEditorTableProp({ label: '默认选项', @@ -70,11 +70,11 @@ export default { options: [ { label: '水平', - val: 'horizontal' + value: 'horizontal' }, { label: '垂直', - val: 'vertical' + value: 'vertical' } ], defaultValue: 'horizontal' diff --git a/src/packages/base-widgets/rate/createFieldProps.ts b/src/packages/base-widgets/rate/createFieldProps.ts index 774c84c..bfa097f 100644 --- a/src/packages/base-widgets/rate/createFieldProps.ts +++ b/src/packages/base-widgets/rate/createFieldProps.ts @@ -19,15 +19,15 @@ export const createFieldProps = () => ({ options: [ { label: '左对齐', - val: 'left' + value: 'left' }, { label: '居中', - val: 'center' + value: 'center' }, { label: '右对齐', - val: 'right' + value: 'right' } ], defaultValue: 'left' diff --git a/src/packages/base-widgets/rate/index.tsx b/src/packages/base-widgets/rate/index.tsx index 9376a99..cce8b2f 100644 --- a/src/packages/base-widgets/rate/index.tsx +++ b/src/packages/base-widgets/rate/index.tsx @@ -44,7 +44,7 @@ export default { }, props: { modelValue: createEditorInputNumberProp({ label: '默认值', defaultValue: 0 }), - name: createEditorInputProp({ label: '名称，提交表单的标识符', defaultValue: 'rate' }), + name: createEditorInputProp({ label: '字段名', defaultValue: 'rate' }), label: createEditorInputProp({ label: '输入框左侧文本', defaultValue: '评分' }), count: createEditorInputNumberProp({ label: '图标总数' }), size: createEditorInputProp({ label: '图标大小' }), diff --git a/src/packages/base-widgets/slider/createFieldProps.ts b/src/packages/base-widgets/slider/createFieldProps.ts index 774c84c..bfa097f 100644 --- a/src/packages/base-widgets/slider/createFieldProps.ts +++ b/src/packages/base-widgets/slider/createFieldProps.ts @@ -19,15 +19,15 @@ export const createFieldProps = () => ({ options: [ { label: '左对齐', - val: 'left' + value: 'left' }, { label: '居中', - val: 'center' + value: 'center' }, { label: '右对齐', - val: 'right' + value: 'right' } ], defaultValue: 'left' diff --git a/src/packages/base-widgets/slider/index.tsx b/src/packages/base-widgets/slider/index.tsx index aee8016..3c1bc75 100644 --- a/src/packages/base-widgets/slider/index.tsx +++ b/src/packages/base-widgets/slider/index.tsx @@ -44,7 +44,7 @@ export default { }, props: { modelValue: createEditorInputNumberProp({ label: '默认值', defaultValue: 0 }), - name: createEditorInputProp({ label: '名称，提交表单的标识符', defaultValue: 'slider' }), + name: createEditorInputProp({ label: '字段名', defaultValue: 'slider' }), label: createEditorInputProp({ label: '输入框左侧文本', defaultValue: '滑块' }), min: createEditorInputNumberProp({ label: '最小值' }), max: createEditorInputNumberProp({ label: '最大值' }), diff --git a/src/packages/base-widgets/stepper/createFieldProps.ts b/src/packages/base-widgets/stepper/createFieldProps.ts index 774c84c..bfa097f 100644 --- a/src/packages/base-widgets/stepper/createFieldProps.ts +++ b/src/packages/base-widgets/stepper/createFieldProps.ts @@ -19,15 +19,15 @@ export const createFieldProps = () => ({ options: [ { label: '左对齐', - val: 'left' + value: 'left' }, { label: '居中', - val: 'center' + value: 'center' }, { label: '右对齐', - val: 'right' + value: 'right' } ], defaultValue: 'left' diff --git a/src/packages/base-widgets/stepper/index.tsx b/src/packages/base-widgets/stepper/index.tsx index 438b7ad..88d635a 100644 --- a/src/packages/base-widgets/stepper/index.tsx +++ b/src/packages/base-widgets/stepper/index.tsx @@ -43,7 +43,7 @@ export default { }, props: { modelValue: createEditorInputNumberProp({ label: '默认值', defaultValue: 0 }), - name: createEditorInputProp({ label: '名称，提交表单的标识符', defaultValue: 'stepper' }), + name: createEditorInputProp({ label: '字段名', defaultValue: 'stepper' }), label: createEditorInputProp({ label: '输入框左侧文本', defaultValue: '步进器' }), min: createEditorInputNumberProp({ label: '最小值' }), max: createEditorInputNumberProp({ label: '最大值' }), diff --git a/src/packages/base-widgets/switch/createFieldProps.ts b/src/packages/base-widgets/switch/createFieldProps.ts index 774c84c..bfa097f 100644 --- a/src/packages/base-widgets/switch/createFieldProps.ts +++ b/src/packages/base-widgets/switch/createFieldProps.ts @@ -19,15 +19,15 @@ export const createFieldProps = () => ({ options: [ { label: '左对齐', - val: 'left' + value: 'left' }, { label: '居中', - val: 'center' + value: 'center' }, { label: '右对齐', - val: 'right' + value: 'right' } ], defaultValue: 'left' diff --git a/src/packages/base-widgets/switch/index.tsx b/src/packages/base-widgets/switch/index.tsx index 189f543..d043213 100644 --- a/src/packages/base-widgets/switch/index.tsx +++ b/src/packages/base-widgets/switch/index.tsx @@ -35,7 +35,7 @@ export default { }, props: { modelValue: createEditorInputProp({ label: '默认值', defaultValue: 'false' }), - name: createEditorInputProp({ label: '名称，提交表单的标识符', defaultValue: 'switch' }), + name: createEditorInputProp({ label: '字段名', defaultValue: 'switch' }), label: createEditorInputProp({ label: '输入框左侧文本', defaultValue: '开关' }), 'active-color': createEditorInputProp({ label: '打开时的背景色' }), 'active-value': createEditorInputProp({ label: '打开时对应的值' }), diff --git a/src/packages/base-widgets/text/index.tsx b/src/packages/base-widgets/text/index.tsx index e062c7c..478f445 100644 --- a/src/packages/base-widgets/text/index.tsx +++ b/src/packages/base-widgets/text/index.tsx @@ -19,9 +19,9 @@ export default { size: createEditorSelectProp({ label: '字体大小', options: [ - { label: '14px', val: '14px' }, - { label: '18px', val: '18px' }, - { label: '24px', val: '24px' } + { label: '14px', value: '14px' }, + { label: '18px', value: '18px' }, + { label: '24px', value: '24px' } ] }) } diff --git a/src/packages/container-component/form/compProps.ts b/src/packages/container-component/form/compProps.ts new file mode 100644 index 0000000..d4de468 --- /dev/null +++ b/src/packages/container-component/form/compProps.ts @@ -0,0 +1,76 @@ +/** + * @name: createProps + * @author: 卜启缘 + * @date: 2021/5/30 10:50 + * @description：createProps + * @update: 2021/5/30 10:50 + */ + +import { + createEditorInputProp, + createEditorSelectProp, + createEditorSwitchProp, + createEditorTableProp +} from '@/visual-editor/visual-editor.props' + +// 对齐方式 +const alignOptions = [ + { + label: '左对齐', + value: 'left' + }, + { + label: '右对齐', + value: 'right' + }, + { + label: '居中对齐', + value: 'center' + } +] + +export const compProps = { + 'slots.default.children': createEditorTableProp({ + label: '表单项', + option: { + options: [ + { label: '显示值', field: 'label' }, + { label: '绑定值', field: 'value' }, + { label: '备注', field: 'comments' } + ], + showKey: 'label' + }, + defaultValue: [] + }), + colon: createEditorSwitchProp({ label: '是否在 label 后面添加冒号' }), + disabled: createEditorSwitchProp({ label: '是否禁用表单中的所有输入框' }), + errorMessageAlign: createEditorSelectProp({ + label: '错误提示文案对齐方式', + defaultValue: 'left', + options: alignOptions + }), + inputAlign: createEditorSelectProp({ + label: '输入框对齐方式', + defaultValue: 'left', + options: alignOptions + }), + labelAlign: createEditorSelectProp({ + label: '表单项 label 对齐方式', + defaultValue: 'left', + options: alignOptions + }), + labelWidth: createEditorInputProp({ label: '表单项 label 宽度，默认单位为px' }), + readonly: createEditorSwitchProp({ label: '是否将表单中的所有输入框设置为只读状态' }), + scrollToError: createEditorSwitchProp({ + label: '在提交表单且校验不通过时滚动至错误的表单项' + }), + showError: createEditorSwitchProp({ label: '是否在校验不通过时标红输入框' }), + showErrorMessage: createEditorSwitchProp({ + label: '是否在校验不通过时在输入框下方展示错误提示' + }), + submitOnEnter: createEditorSwitchProp({ label: '是否在按下回车键时提交表单' }), + validateFirst: createEditorSwitchProp({ label: '是否在某一项校验不通过时停止校验' }), + validateTrigger: createEditorInputProp({ + label: '表单校验触发时机，可选值为 onChange、onSubmit，详见下表' + }) +} diff --git a/src/packages/container-component/form/index.tsx b/src/packages/container-component/form/index.tsx index f4ccdea..063e29e 100644 --- a/src/packages/container-component/form/index.tsx +++ b/src/packages/container-component/form/index.tsx @@ -1,8 +1,8 @@ import { Form, Field, Button } from 'vant' import { renderSlot, getCurrentInstance } from 'vue' -import { createEditorTableProp } from '@/visual-editor/visual-editor.props' import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils' import { useGlobalProperties } from '@/hooks/useGlobalProperties' +import { compProps } from './compProps' export default { key: 'form', @@ -37,18 +37,5 @@ export default { height: true, width: true }, - props: { - 'slots.default.children': createEditorTableProp({ - label: '表单项', - option: { - options: [ - { label: '显示值', field: 'label' }, - { label: '绑定值', field: 'value' }, - { label: '备注', field: 'comments' } - ], - showKey: 'label' - }, - defaultValue: [] - }) - } + props: compProps } as VisualEditorComponent diff --git a/src/packages/container-component/layout/index.tsx b/src/packages/container-component/layout/index.tsx index 983fe9a..e31ef46 100644 --- a/src/packages/container-component/layout/index.tsx +++ b/src/packages/container-component/layout/index.tsx @@ -85,32 +85,32 @@ export default { slots: createEditorSelectProp({ label: '列比例', options: [ - { label: '24', val: createSlots('24') }, - { label: '12:12', val: createSlots('12:12') }, - { label: '6:18', val: createSlots('6:18') }, - { label: '18:6', val: createSlots('18:6') }, - { label: '8:8:8', val: createSlots('8:8:8') }, - { label: '6:12:6', val: createSlots('6:12:6') }, - { label: '6:6:6:6', val: createSlots('6:6:6:6') } + { label: '24', value: createSlots('24') }, + { label: '12:12', value: createSlots('12:12') }, + { label: '6:18', value: createSlots('6:18') }, + { label: '18:6', value: createSlots('18:6') }, + { label: '8:8:8', value: createSlots('8:8:8') }, + { label: '6:12:6', value: createSlots('6:12:6') }, + { label: '6:6:6:6', value: createSlots('6:6:6:6') } ], defaultValue: createSlots('12:12') }), justify: createEditorSelectProp({ label: '主轴对齐方式', options: [ - { label: '左对齐', val: 'start' }, - { label: '居中排列', val: 'center' }, - { label: '均匀对齐', val: 'space-around' }, - { label: '两端对齐', val: 'space-between' }, - { label: '右对齐', val: 'end' } + { label: '左对齐', value: 'start' }, + { label: '居中排列', value: 'center' }, + { label: '均匀对齐', value: 'space-around' }, + { label: '两端对齐', value: 'space-between' }, + { label: '右对齐', value: 'end' } ] }), align: createEditorSelectProp({ label: '交叉轴对齐方式', options: [ - { label: '顶部对齐', val: 'top' }, - { label: '垂直居中', val: 'center' }, - { label: '底部对齐', val: 'bottom' } + { label: '顶部对齐', value: 'top' }, + { label: '垂直居中', value: 'center' }, + { label: '底部对齐', value: 'bottom' } ] }) } diff --git a/src/plugins/vant.ts b/src/plugins/vant.ts index feea34f..01e67e0 100644 --- a/src/plugins/vant.ts +++ b/src/plugins/vant.ts @@ -1,2 +1,9 @@ +import { App } from 'vue' import '@vant/touch-emulator' import 'vant/lib/index.css' + +import { Lazyload } from 'vant' + +export const setupVant = (app: App) => { + app.use(Lazyload) +} diff --git a/src/visual-editor/components/left-aside/components/page-tree/index.vue b/src/visual-editor/components/left-aside/components/page-tree/index.vue index 0a85d9a..467aa67 100644 --- a/src/visual-editor/components/left-aside/components/page-tree/index.vue +++ b/src/visual-editor/components/left-aside/components/page-tree/index.vue @@ -33,7 +33,7 @@ >删除 设为默认设为首页 diff --git a/src/visual-editor/components/right-attribute-panel/components/index.ts b/src/visual-editor/components/right-attribute-panel/components/index.ts new file mode 100644 index 0000000..cd04d28 --- /dev/null +++ b/src/visual-editor/components/right-attribute-panel/components/index.ts @@ -0,0 +1,8 @@ +/** + * @name: index + * @author: 卜启缘 + * @date: 2021/5/30 10:57 + * @description：index + * @update: 2021/5/30 10:57 + */ +export { TablePropEditor } from './table-prop-editor/table-prop-editor' diff --git a/src/visual-editor/components/right-attribute-panel/components/table-prop-editor/table-prop-editor.tsx b/src/visual-editor/components/right-attribute-panel/components/table-prop-editor/table-prop-editor.tsx index d185c0c..d046891 100644 --- a/src/visual-editor/components/right-attribute-panel/components/table-prop-editor/table-prop-editor.tsx +++ b/src/visual-editor/components/right-attribute-panel/components/table-prop-editor/table-prop-editor.tsx @@ -1,8 +1,8 @@ -import { defineComponent, PropType } from 'vue' -import { VisualEditorProps } from '../../../../visual-editor.props' -import { useModel } from '../../../../hooks/useModel' +import { defineComponent, PropType, SetupContext } from 'vue' +import { VisualEditorProps } from '@/visual-editor/visual-editor.props' import { ElButton, ElTag } from 'element-plus' import { $$tablePropEditor } from './table-prop-edit.service' +import { useVModel } from '@vueuse/core' export const TablePropEditor = defineComponent({ props: { @@ -10,11 +10,8 @@ export const TablePropEditor = defineComponent({ propConfig: { type: Object as PropType, required: true } }, emits: ['update:modelValue'], - setup(props, ctx) { - const model = useModel( - () => props.modelValue, - (val) => ctx.emit('update:modelValue', val) - ) + setup(props, { emit }: SetupContext) { + const model = useVModel(props, 'modelValue', emit) const onClick = async () => { const data = await $$tablePropEditor({ diff --git a/src/visual-editor/components/right-attribute-panel/index.tsx b/src/visual-editor/components/right-attribute-panel/index.tsx index 66342c4..9e2f411 100644 --- a/src/visual-editor/components/right-attribute-panel/index.tsx +++ b/src/visual-editor/components/right-attribute-panel/index.tsx @@ -22,7 +22,7 @@ import { ElPopover } from 'element-plus' import { VisualEditorProps, VisualEditorPropsType } from '@/visual-editor/visual-editor.props' -import { TablePropEditor } from '@/visual-editor/components/right-attribute-panel/components/table-prop-editor/table-prop-editor' +import { TablePropEditor } from './components/' import { VisualEditorBlockData } from '@/visual-editor/visual-editor.utils' import MonacoEditor from '../common/monaco-editor/MonacoEditor' import { useVModel } from '@vueuse/core' @@ -57,7 +57,7 @@ export default defineComponent({ {(() => { return propConfig.options!.map((opt) => ( - + )) })()} @@ -93,44 +93,40 @@ export default defineComponent({ width={200} trigger="hover" content={`你可以利用该组件ID。对该组件进行获取和设置其属性，组件可用属性可在控制台输入：$$refs.${props.block._vid} 进行查看`} - v-slots={{ + > + {{ reference: () => ( ) }} - > + ) if (!!component) { if (!!component.props) { content.push( - <> - {Object.entries(component.props || {}).map(([propName, propConfig]) => ( - - propConfig.tips ? ( - <> - - }} - > - {propConfig.label} - - ) : ( - propConfig.label - ) - }} - > - {renderEditor(propName, propConfig)} - - ))} - + Object.entries(component.props || {}).map(([propName, propConfig]) => ( + + propConfig.tips ? ( + <> + + {{ + reference: () => + }} + + {propConfig.label} + + ) : ( + propConfig.label + ) + }} + > + {renderEditor(propName, propConfig)} + + )) ) } } diff --git a/src/visual-editor/components/simulator-editor/simulator-editor.vue b/src/visual-editor/components/simulator-editor/simulator-editor.vue index ca5229a..9c54049 100644 --- a/src/visual-editor/components/simulator-editor/simulator-editor.vue +++ b/src/visual-editor/components/simulator-editor/simulator-editor.vue @@ -60,7 +60,6 @@ export default defineComponent({ const { currentPage, visualConfig } = useVisualData() const state = reactive({ - compRefs: [], drag: false }) @@ -188,37 +187,41 @@ export default defineComponent({