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