From 273dc7ad20d0bba92ddcfa8111d61172f7db77bd Mon Sep 17 00:00:00 2001 From: vdpAdmin Date: Sun, 16 Jan 2022 15:18:25 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E5=AD=97=E4=BD=93=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=EF=BC=8C=E5=8F=91=E5=B8=833.0=20Beta=E7=89=88?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 10 +------ index.html | 2 +- install-render.js | 4 +++ install.js | 3 ++ package.json | 1 + src/components/form-designer/designer.js | 1 + .../field-widget/cascader-widget.vue | 27 ++++++++++------- .../field-widget/file-upload-widget.vue | 12 +++++--- .../field-widget/form-item-wrapper.vue | 8 ++--- .../form-widget/field-widget/input-widget.vue | 2 +- .../field-widget/picture-upload-widget.vue | 11 ++++++- src/components/form-designer/index.vue | 6 ++-- .../setting-panel/form-setting.vue | 4 +-- .../form-designer/setting-panel/index.vue | 4 +-- .../setting-panel/option-items-setting.vue | 30 ++++++++++++++----- .../file-upload-fileTypes-editor.vue | 2 +- .../picture-upload-fileTypes-editor.vue | 8 ++--- .../form-designer/toolbar-panel/index.vue | 9 ++++++ .../form-designer/widget-panel/index.vue | 4 +-- .../widget-panel/widgetsConfig.js | 2 +- .../container-item/sub-form-item.vue | 10 +++---- src/icons/index.js | 12 -------- src/icons/svg/custom/search.svg | 1 + src/icons/svg/el/arrow-down.svg | 1 + src/icons/svg/el/download.svg | 1 + src/icons/svg/el/form-template.svg | 1 + src/icons/svg/el/plus.svg | 1 + src/icons/svg/el/set-up.svg | 1 + src/lang/en-US.js | 2 ++ src/lang/zh-CN.js | 2 ++ src/main.js | 3 ++ src/utils/el-icons.js | 9 ++++++ 32 files changed, 124 insertions(+), 70 deletions(-) delete mode 100644 src/icons/index.js create mode 100644 src/icons/svg/custom/search.svg create mode 100644 src/icons/svg/el/arrow-down.svg create mode 100644 src/icons/svg/el/download.svg create mode 100644 src/icons/svg/el/form-template.svg create mode 100644 src/icons/svg/el/plus.svg create mode 100644 src/icons/svg/el/set-up.svg create mode 100644 src/utils/el-icons.js diff --git a/README.md b/README.md index 6ad0aa1..8066e62 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,6 @@ -# Variant Form For Vue 3预览版 +# Variant Form 3 Beta For Vue 3.x #### 一款高效的Vue低代码表单，可视化设计，一键生成源码，享受更多摸鱼时间。 -### 说明 -这是一个开发预览版，仅供学习参考，请勿用于开发环境，下述问题亟待解决： -``` -iconfont图标替换为svg未全部完成； -多语言切换未完成； -富文本组件修改未完成； -``` - ### 友情链接 [Fantastic-admin](https://hooray.gitee.io/fantastic-admin/) —— 一款开箱即用的 Vue 中后台管理系统框架（支持Vue2/Vue3） diff --git a/index.html b/index.html index 030a6ff..13a52ee 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite App + Variant Form
diff --git a/install-render.js b/install-render.js index baa60a5..563eab6 100644 --- a/install-render.js +++ b/install-render.js @@ -3,6 +3,8 @@ import axios from 'axios' import VFormRender from '@/components/form-render/index.vue' import ContainerItems from '@/components/form-render/container-item/index' +import SvgIcon from '@/components/svg-icon' //svg组件 + import { installI18n } from '@/utils/i18n' import { loadExtension } from '@/extension/extension-loader' @@ -11,6 +13,7 @@ VFormRender.install = function (app) { loadExtension(app) app.use(ContainerItems) + app.component('svg-icon', SvgIcon) app.component(VFormRender.name, VFormRender) } @@ -23,6 +26,7 @@ const install = (app) => { loadExtension(app) app.use(ContainerItems) + app.component('svg-icon', SvgIcon) components.forEach(component => { app.component(component.name, component) }) diff --git a/install.js b/install.js index 2fd1a4d..1e09ad9 100644 --- a/install.js +++ b/install.js @@ -4,8 +4,10 @@ import VFormDesigner from '@/components/form-designer/index.vue' import VFormRender from '@/components/form-render/index.vue' import Draggable from '@/../lib/vuedraggable/dist/vuedraggable.umd.js' +import {registerIcon} from '@/utils/el-icons' import SvgIcon from '@/components/svg-icon' //svg组件 import 'virtual:svg-icons-register' +import '@/iconfont/iconfont.css' import ContainerWidgets from '@/components/form-designer/form-widget/container-widget/index' import ContainerItems from '@/components/form-render/container-item/index' @@ -23,6 +25,7 @@ VFormDesigner.install = function (app) { app.use(ContainerWidgets) app.use(ContainerItems) + registerIcon(app) app.component('draggable', Draggable) app.component('svg-icon', SvgIcon) app.component(VFormDesigner.name, VFormDesigner) diff --git a/package.json b/package.json index 985094e..f8d6553 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@element-plus/icons-vue": "^0.2.4", "axios": "^0.24.0", "clipboard": "^2.0.8", "core-js": "^3.6.5", diff --git a/src/components/form-designer/designer.js b/src/components/form-designer/designer.js index 3e2ffc4..4402f89 100644 --- a/src/components/form-designer/designer.js +++ b/src/components/form-designer/designer.js @@ -24,6 +24,7 @@ export function createDesigner(vueInstance) { customClass: '', functions: '', layoutType: 'PC', + jsonVersion: 3, onFormCreated: '', onFormMounted: '', diff --git a/src/components/form-designer/form-widget/field-widget/cascader-widget.vue b/src/components/form-designer/form-widget/field-widget/cascader-widget.vue index a66479e..e2df554 100644 --- a/src/components/form-designer/form-widget/field-widget/cascader-widget.vue +++ b/src/components/form-designer/form-widget/field-widget/cascader-widget.vue @@ -2,16 +2,17 @@ - - +
+ + +
@@ -99,7 +100,11 @@ @import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */ .full-width-input { - width: 100% !important; /* 没生效？？改用内联样式style */ + width: 100% !important; + + :deep(.el-cascader) { + width: 100% !important; + } } diff --git a/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue b/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue index b89cc73..aae0c65 100644 --- a/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue +++ b/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue @@ -16,15 +16,17 @@ v-if="!!field.options.uploadTip">{{field.options.uploadTip}} @@ -37,6 +39,7 @@ import i18n, {translate} from "@/utils/i18n"; import {deepClone} from "@/utils/util"; import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin"; + import SvgIcon from "@/components/svg-icon/index"; let selectFileText = "'" + translate('render.hint.selectFile') + "'" @@ -71,6 +74,7 @@ }, components: { + SvgIcon, FormItemWrapper, }, inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'], diff --git a/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue b/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue index dd7f216..237c608 100644 --- a/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue +++ b/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue @@ -22,16 +22,16 @@ + {{label}} + {{label}} diff --git a/src/components/form-designer/form-widget/field-widget/input-widget.vue b/src/components/form-designer/form-widget/field-widget/input-widget.vue index 33f4fa1..bbd5741 100644 --- a/src/components/form-designer/form-widget/field-widget/input-widget.vue +++ b/src/components/form-designer/form-widget/field-widget/input-widget.vue @@ -16,7 +16,7 @@ @change="handleChangeEvent"> diff --git a/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue b/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue index 11d8baa..ebe26d2 100644 --- a/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue +++ b/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue @@ -15,7 +15,7 @@
{{field.options.uploadTip}}
- +
@@ -222,4 +222,13 @@ } } + .uploader-icon { + height: 100%; + display: flex; + color: #8c939d; + font-size: 28px; + justify-content: center; + align-items: center; + } + diff --git a/src/components/form-designer/index.vue b/src/components/form-designer/index.vue index 95074b9..99d1368 100644 --- a/src/components/form-designer/index.vue +++ b/src/components/form-designer/index.vue @@ -13,10 +13,10 @@
- VForm {{i18nt('application.productTitle')}} Ver {{vFormVersion}}
+ VForm 3 {{i18nt('application.productTitle')}} Ver {{vFormVersion}}
- {{curLangName}} + {{curLangName}} - - +
+ + +
{{i18nt('designer.setting.importOptions')}} {{i18nt('designer.setting.resetDefault')}} @@ -222,9 +223,13 @@ diff --git a/src/components/form-designer/setting-panel/property-editor/field-file-upload/file-upload-fileTypes-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-file-upload/file-upload-fileTypes-editor.vue index 6dee2ac..098e9e3 100644 --- a/src/components/form-designer/setting-panel/property-editor/field-file-upload/file-upload-fileTypes-editor.vue +++ b/src/components/form-designer/setting-panel/property-editor/field-file-upload/file-upload-fileTypes-editor.vue @@ -3,7 +3,7 @@ {{i18nt('designer.setting.fileTypes')}} - + @@ -61,7 +61,7 @@ + {{subWidget.options.label}}