zcy
/
vue_form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

替换字体图标，发布3.0 Beta版。

master
vdpAdmin 2022-01-16 15:18:25 +08:00
parent 54e11ab3b7
commit 273dc7ad20
32 changed files with 124 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -1,14 +1,6 @@
# Variant Form For Vue 3预览版 # Variant Form 3 Beta For Vue 3.x
#### 一款高效的Vue低代码表单，可视化设计，一键生成源码，享受更多摸鱼时间。 #### 一款高效的Vue低代码表单，可视化设计，一键生成源码，享受更多摸鱼时间。
### 说明
这是一个开发预览版，仅供学习参考，请勿用于开发环境，下述问题亟待解决：
```
iconfont图标替换为svg未全部完成；
多语言切换未完成；
富文本组件修改未完成；
```
### 友情链接 ### 友情链接
[Fantastic-admin](https://hooray.gitee.io/fantastic-admin/) —— 一款开箱即用的 Vue 中后台管理系统框架（支持Vue2/Vue3） [Fantastic-admin](https://hooray.gitee.io/fantastic-admin/) —— 一款开箱即用的 Vue 中后台管理系统框架（支持Vue2/Vue3）

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>Variant Form</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

4
install-render.js
View File

@ -3,6 +3,8 @@ import axios from 'axios'
import VFormRender from '@/components/form-render/index.vue' import VFormRender from '@/components/form-render/index.vue'
import ContainerItems from '@/components/form-render/container-item/index' import ContainerItems from '@/components/form-render/container-item/index'
import SvgIcon from '@/components/svg-icon' //svg组件
import { installI18n } from '@/utils/i18n' import { installI18n } from '@/utils/i18n'
import { loadExtension } from '@/extension/extension-loader' import { loadExtension } from '@/extension/extension-loader'
@ -11,6 +13,7 @@ VFormRender.install = function (app) {
loadExtension(app) loadExtension(app)
app.use(ContainerItems) app.use(ContainerItems)
app.component('svg-icon', SvgIcon)
app.component(VFormRender.name, VFormRender) app.component(VFormRender.name, VFormRender)
} }
@ -23,6 +26,7 @@ const install = (app) => {
loadExtension(app) loadExtension(app)
app.use(ContainerItems) app.use(ContainerItems)
app.component('svg-icon', SvgIcon)
components.forEach(component => { components.forEach(component => {
app.component(component.name, component) app.component(component.name, component)
}) })

3
install.js
View File

@ -4,8 +4,10 @@ import VFormDesigner from '@/components/form-designer/index.vue'
import VFormRender from '@/components/form-render/index.vue' import VFormRender from '@/components/form-render/index.vue'
import Draggable from '@/../lib/vuedraggable/dist/vuedraggable.umd.js' import Draggable from '@/../lib/vuedraggable/dist/vuedraggable.umd.js'
import {registerIcon} from '@/utils/el-icons'
import SvgIcon from '@/components/svg-icon' //svg组件 import SvgIcon from '@/components/svg-icon' //svg组件
import 'virtual:svg-icons-register' import 'virtual:svg-icons-register'
import '@/iconfont/iconfont.css'
import ContainerWidgets from '@/components/form-designer/form-widget/container-widget/index' import ContainerWidgets from '@/components/form-designer/form-widget/container-widget/index'
import ContainerItems from '@/components/form-render/container-item/index' import ContainerItems from '@/components/form-render/container-item/index'
@ -23,6 +25,7 @@ VFormDesigner.install = function (app) {
app.use(ContainerWidgets) app.use(ContainerWidgets)
app.use(ContainerItems) app.use(ContainerItems)
registerIcon(app)
app.component('draggable', Draggable) app.component('draggable', Draggable)
app.component('svg-icon', SvgIcon) app.component('svg-icon', SvgIcon)
app.component(VFormDesigner.name, VFormDesigner) app.component(VFormDesigner.name, VFormDesigner)

1
package.json
View File

@ -10,6 +10,7 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^0.2.4",
"axios": "^0.24.0", "axios": "^0.24.0",
"clipboard": "^2.0.8", "clipboard": "^2.0.8",
"core-js": "^3.6.5", "core-js": "^3.6.5",

1
src/components/form-designer/designer.js
View File

@ -24,6 +24,7 @@ export function createDesigner(vueInstance) {
customClass: '', customClass: '',
functions: '', functions: '',
layoutType: 'PC', layoutType: 'PC',
jsonVersion: 3,
onFormCreated: '', onFormCreated: '',
onFormMounted: '', onFormMounted: '',

9
src/components/form-designer/form-widget/field-widget/cascader-widget.vue
View File

@ -2,8 +2,8 @@
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState" <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
:parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList" :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
:sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId"> :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
<div class="full-width-input">
<el-cascader ref="fieldEditor" :options="field.options.optionItems" v-model="fieldModel" <el-cascader ref="fieldEditor" :options="field.options.optionItems" v-model="fieldModel"
style="width: 100%" class="full-width-input"
:disabled="field.options.disabled" :disabled="field.options.disabled"
:size="field.options.size" :size="field.options.size"
:clearable="field.options.clearable" :clearable="field.options.clearable"
@ -12,6 +12,7 @@
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent" @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
@change="handleChangeEvent"> @change="handleChangeEvent">
</el-cascader> </el-cascader>
</div>
</form-item-wrapper> </form-item-wrapper>
</template> </template>
@ -99,7 +100,11 @@
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */ @import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
.full-width-input { .full-width-input {
width: 100% !important; /* 没生效？？改用内联样式style */ width: 100% !important;
:deep(.el-cascader) {
width: 100% !important;
}
} }
</style> </style>

12
src/components/form-designer/form-widget/field-widget/file-upload-widget.vue
View File

@ -16,15 +16,17 @@
v-if="!!field.options.uploadTip">{{field.options.uploadTip}}</div> v-if="!!field.options.uploadTip">{{field.options.uploadTip}}</div>
</template> </template>
<template #default> <template #default>
<i class="el-icon-plus avatar-uploader-icon"></i> <svg-icon icon-class="el-plus" /><i class="el-icon-plus avatar-uploader-icon"></i>
</template> </template>
<template #file="{ file }"> <template #file="{ file }">
<div class="upload-file-list"> <div class="upload-file-list">
<span class="upload-file-name" :title="file.name">{{file.name}}</span> <span class="upload-file-name" :title="file.name">{{file.name}}</span>
<a :href="file.url" download=""> <a :href="file.url" download="">
<i class="el-icon-download file-action" title="i18nt('render.hint.downloadFile')"></i></a> <span class="el-icon-download file-action" title="i18nt('render.hint.downloadFile')">
<i class="el-icon-delete file-action" title="i18nt('render.hint.removeFile')" v-if="!field.options.disabled" <svg-icon icon-class="el-download" />
@click="removeUploadFile(file.name)"></i> </span></a>
<span class="file-action" title="i18nt('render.hint.removeFile')" v-if="!field.options.disabled"
@click="removeUploadFile(file.name)"><svg-icon icon-class="el-delete" /></span>
</div> </div>
</template> </template>
</el-upload> </el-upload>
@ -37,6 +39,7 @@
import i18n, {translate} from "@/utils/i18n"; import i18n, {translate} from "@/utils/i18n";
import {deepClone} from "@/utils/util"; import {deepClone} from "@/utils/util";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin"; import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
import SvgIcon from "@/components/svg-icon/index";
let selectFileText = "'" + translate('render.hint.selectFile') + "'" let selectFileText = "'" + translate('render.hint.selectFile') + "'"
@ -71,6 +74,7 @@
}, },
components: { components: {
SvgIcon,
FormItemWrapper, FormItemWrapper,
}, },
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'], inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],

8
src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue
View File

@ -22,16 +22,16 @@
<template v-if="field.options.labelIconPosition === 'front'"> <template v-if="field.options.labelIconPosition === 'front'">
<template v-if="!!field.options.labelTooltip"> <template v-if="!!field.options.labelTooltip">
<el-tooltip :content="field.options.labelTooltip" effect="light"> <el-tooltip :content="field.options.labelTooltip" effect="light">
<i :class="field.options.labelIconClass"></i></el-tooltip>{{label}}</template> <svg-icon :icon-class="field.options.labelIconClass" /></el-tooltip>{{label}}</template>
<template v-else> <template v-else>
<i :class="field.options.labelIconClass"></i>{{label}}</template> <svg-icon :icon-class="field.options.labelIconClass" />{{label}}</template>
</template> </template>
<template v-else-if="field.options.labelIconPosition === 'rear'"> <template v-else-if="field.options.labelIconPosition === 'rear'">
<template v-if="!!field.options.labelTooltip"> <template v-if="!!field.options.labelTooltip">
{{label}}<el-tooltip :content="field.options.labelTooltip" effect="light"> {{label}}<el-tooltip :content="field.options.labelTooltip" effect="light">
<i :class="field.options.labelIconClass"></i></el-tooltip></template> <svg-icon :icon-class="field.options.labelIconClass" /></el-tooltip></template>
<template v-else> <template v-else>
{{label}}<i :class="field.options.labelIconClass"></i></template> {{label}}<svg-icon :icon-class="field.options.labelIconClass" /></template>
</template> </template>
</span> </span>
</template> </template>

2
src/components/form-designer/form-widget/field-widget/input-widget.vue
View File

@ -16,7 +16,7 @@
@change="handleChangeEvent"> @change="handleChangeEvent">
<template #append v-if="field.options.appendButton"> <template #append v-if="field.options.appendButton">
<el-button :disabled="field.options.disabled || field.options.appendButtonDisabled" <el-button :disabled="field.options.disabled || field.options.appendButtonDisabled"
:class="field.options.buttonIcon" @click="emitAppendButtonClick"></el-button> @click="emitAppendButtonClick"><svg-icon :icon-class="field.options.buttonIcon" /></el-button>
</template> </template>
</el-input> </el-input>
</form-item-wrapper> </form-item-wrapper>

11
src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue
View File

@ -15,7 +15,7 @@
<div class="el-upload__tip" <div class="el-upload__tip"
v-if="!!field.options.uploadTip">{{field.options.uploadTip}}</div> v-if="!!field.options.uploadTip">{{field.options.uploadTip}}</div>
</template> </template>
<i class="el-icon-plus avatar-uploader-icon"></i> <div class="uploader-icon"><svg-icon icon-class="el-plus" /></div>
</el-upload> </el-upload>
</form-item-wrapper> </form-item-wrapper>
</template> </template>
@ -222,4 +222,13 @@
} }
} }
.uploader-icon {
height: 100%;
display: flex;
color: #8c939d;
font-size: 28px;
justify-content: center;
align-items: center;
}
</style> </style>

6
src/components/form-designer/index.vue
View File

@ -13,10 +13,10 @@
<el-header class="main-header"> <el-header class="main-header">
<div class="float-left main-title"> <div class="float-left main-title">
<img src="../../assets/vform-logo.png" @click="openHome"> <img src="../../assets/vform-logo.png" @click="openHome">
<span class="bold">VForm</span> {{i18nt('application.productTitle')}} <span class="version-span">Ver {{vFormVersion}}</span></div> <span class="bold">VForm 3</span> {{i18nt('application.productTitle')}} <span class="version-span">Ver {{vFormVersion}}</span></div>
<div class="float-right external-link"> <div class="float-right external-link">
<el-dropdown v-if="showLink('languageMenu')" @command="handleLanguageChanged"> <el-dropdown v-if="showLink('languageMenu')" @command="handleLanguageChanged">
<span class="el-dropdown-link">{{curLangName}}<i class="el-icon-arrow-down el-icon--right"></i></span> <span class="el-dropdown-link">{{curLangName}}<svg-icon icon-class="el-arrow-down" /></span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item command="zh-CN">{{i18nt('application.zh-CN')}}</el-dropdown-item> <el-dropdown-item command="zh-CN">{{i18nt('application.zh-CN')}}</el-dropdown-item>
@ -72,12 +72,14 @@
import {MOCK_CASE_URL, VARIANT_FORM_VERSION} from "@/utils/config" import {MOCK_CASE_URL, VARIANT_FORM_VERSION} from "@/utils/config"
import i18n, { changeLocale } from "@/utils/i18n" import i18n, { changeLocale } from "@/utils/i18n"
import axios from 'axios' import axios from 'axios'
import SvgIcon from "@/components/svg-icon/index";
export default { export default {
name: "VFormDesigner", name: "VFormDesigner",
componentName: "VFormDesigner", componentName: "VFormDesigner",
mixins: [i18n], mixins: [i18n],
components: { components: {
SvgIcon,
WidgetPanel, WidgetPanel,
ToolbarPanel, ToolbarPanel,
SettingPanel, SettingPanel,

4
src/components/form-designer/setting-panel/form-setting.vue
View File

@ -300,8 +300,8 @@
white-space: nowrap; white-space: nowrap;
} }
:deep(.el-form-item--mini.el-form-item) { :deep(.el-form-item--small.el-form-item) {
margin-bottom: 6px; margin-bottom: 10px;
} }
.radio-group-custom { .radio-group-custom {

4
src/components/form-designer/setting-panel/index.vue
View File

@ -312,8 +312,8 @@
white-space: nowrap; white-space: nowrap;
} }
:deep(.el-form-item--mini.el-form-item) { :deep(.el-form-item--small.el-form-item) {
margin-bottom: 6px; margin-bottom: 10px;
} }
} }

22
src/components/form-designer/setting-panel/option-items-setting.vue
View File

@ -34,11 +34,12 @@
</template> </template>
</draggable> </draggable>
</el-checkbox-group> </el-checkbox-group>
<el-cascader v-else-if="(selectedWidget.type === 'cascader')" <div v-else-if="(selectedWidget.type === 'cascader')" class="full-width-input">
v-model="optionModel.defaultValue" :options="optionModel.optionItems" <el-cascader v-model="optionModel.defaultValue" :options="optionModel.optionItems"
@change="emitDefaultValueChange" @change="emitDefaultValueChange"
:placeholder="i18nt('render.hint.selectPlaceholder')" style="width: 100%"> :placeholder="i18nt('render.hint.selectPlaceholder')">
</el-cascader> </el-cascader>
</div>
<div v-if="(selectedWidget.type === 'cascader')"> <div v-if="(selectedWidget.type === 'cascader')">
<el-button type="text" @click="importCascaderOptions">{{i18nt('designer.setting.importOptions')}}</el-button> <el-button type="text" @click="importCascaderOptions">{{i18nt('designer.setting.importOptions')}}</el-button>
<el-button type="text" @click="resetDefault">{{i18nt('designer.setting.resetDefault')}}</el-button> <el-button type="text" @click="resetDefault">{{i18nt('designer.setting.resetDefault')}}</el-button>
@ -222,10 +223,14 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.option-items-pane ul { .option-items-pane {
width: 100%;
ul {
padding-inline-start: 6px; padding-inline-start: 6px;
padding-left: 6px; /* 重置IE11默认样式 */ padding-left: 6px; /* 重置IE11默认样式 */
} }
}
li.ghost{ li.ghost{
background: #fff; background: #fff;
@ -243,4 +248,13 @@
.dialog-footer .el-button { .dialog-footer .el-button {
width: 100px; width: 100px;
} }
.full-width-input {
width: 100% !important;
:deep(.el-cascader) {
width: 100% !important;
}
}
</style> </style>

2
src/components/form-designer/setting-panel/property-editor/field-file-upload/file-upload-fileTypes-editor.vue
View File

@ -3,7 +3,7 @@
<template #label> <template #label>
<span>{{i18nt('designer.setting.fileTypes')}} <span>{{i18nt('designer.setting.fileTypes')}}
<el-tooltip effect="light" :content="i18nt('designer.setting.fileTypesHelp')"> <el-tooltip effect="light" :content="i18nt('designer.setting.fileTypesHelp')">
<i class="el-icon-info"></i></el-tooltip> <svg-icon icon-class="el-info" /></el-tooltip>
</span> </span>
</template> </template>
<el-select multiple allow-create filterable default-first-option <el-select multiple allow-create filterable default-first-option

8
src/components/form-designer/setting-panel/property-editor/field-picture-upload/picture-upload-fileTypes-editor.vue
View File

@ -3,7 +3,7 @@
<template #label> <template #label>
<span>{{i18nt('designer.setting.fileTypes')}} <span>{{i18nt('designer.setting.fileTypes')}}
<el-tooltip effect="light" :content="i18nt('designer.setting.fileTypesHelp')"> <el-tooltip effect="light" :content="i18nt('designer.setting.fileTypesHelp')">
<i class="el-icon-info"></i></el-tooltip> <svg-icon icon-class="el-info" /></el-tooltip>
</span> </span>
</template> </template>
<el-select multiple allow-create filterable default-first-option <el-select multiple allow-create filterable default-first-option
@ -31,9 +31,9 @@
data() { data() {
return { return {
uploadPictureTypes: [ uploadPictureTypes: [
{value: 'jpeg', label: 'JPG'}, {value: 'jpeg', label: 'jpg'}, /* label如用大写字母，选择两个文件类型就会导致设置面板快速抖动、闪烁，非常奇怪！！ */
{value: 'png', label: 'PNG'}, {value: 'png', label: 'png'},
{value: 'gif', label: 'GIF'}, {value: 'gif', label: 'gif'},
], ],
} }
} }

9
src/components/form-designer/toolbar-panel/index.vue
View File

@ -454,6 +454,15 @@
try { try {
let importObj = JSON.parse(this.importTemplate) let importObj = JSON.parse(this.importTemplate)
//console.log('test import', this.importTemplate) //console.log('test import', this.importTemplate)
if (!importObj || !importObj.formConfig) {
throw new Error( this.i18nt('designer.hint.invalidJsonFormat') )
}
let fJsonVer = importObj.formConfig.jsonVersion
if (!fJsonVer || (fJsonVer !== 3)) {
throw new Error( this.i18nt('designer.hint.jsonVersionMismatch') )
}
this.designer.loadFormJson(importObj) this.designer.loadFormJson(importObj)
this.showImportJsonDialogFlag = false this.showImportJsonDialogFlag = false

4
src/components/form-designer/widget-panel/index.vue
View File

@ -5,7 +5,7 @@
<el-tabs v-model="firstTab" class="no-bottom-margin indent-left-margin"> <el-tabs v-model="firstTab" class="no-bottom-margin indent-left-margin">
<el-tab-pane name="componentLib"> <el-tab-pane name="componentLib">
<template #label> <template #label>
<span><i class="el-icon-set-up"></i> {{i18nt('designer.componentLib')}}</span> <span><svg-icon icon-class="el-set-up" /> {{i18nt('designer.componentLib')}}</span>
</template> </template>
<el-collapse v-model="activeNames" class="widget-collapse"> <el-collapse v-model="activeNames" class="widget-collapse">
@ -61,7 +61,7 @@
<el-tab-pane v-if="showFormTemplates()" name="formLib" style="padding: 8px"> <el-tab-pane v-if="showFormTemplates()" name="formLib" style="padding: 8px">
<template #label> <template #label>
<span><i class="el-icon-c-scale-to-original"></i> {{i18nt('designer.formLib')}}</span> <span><svg-icon icon-class="el-form-template" /> {{i18nt('designer.formLib')}}</span>
</template> </template>
<template v-for="(ft, idx) in formTemplates"> <template v-for="(ft, idx) in formTemplates">

2
src/components/form-designer/widget-panel/widgetsConfig.js
View File

@ -146,7 +146,7 @@ export const basicFields = [
suffixIcon: '', suffixIcon: '',
appendButton: false, appendButton: false,
appendButtonDisabled: false, appendButtonDisabled: false,
buttonIcon: 'el-icon-search', buttonIcon: 'custom-search',
//------------------- //-------------------
onCreated: '', onCreated: '',
onMounted: '', onMounted: '',

10
src/components/form-render/container-item/sub-form-item.vue
View File

@ -8,7 +8,7 @@
<span class="action-label">{{i18nt('render.hint.subFormAction')}}</span> <span class="action-label">{{i18nt('render.hint.subFormAction')}}</span>
<el-button :disabled="actionDisabled" round type="primary" size="small" class="action-button" @click="addSubFormRow" <el-button :disabled="actionDisabled" round type="primary" size="small" class="action-button" @click="addSubFormRow"
:title="i18nt('render.hint.subFormAddActionHint')"> :title="i18nt('render.hint.subFormAddActionHint')">
{{i18nt('render.hint.subFormAddAction')}}<i class="el-icon-plus el-icon-right"></i></el-button> {{i18nt('render.hint.subFormAddAction')}}<svg-icon icon-class="el-plus" /></el-button>
</div> </div>
<template v-for="(subWidget) in widget.widgetList" :key="subWidget.id + 'thc'"> <template v-for="(subWidget) in widget.widgetList" :key="subWidget.id + 'thc'">
<div class="field-header-column" <div class="field-header-column"
@ -18,16 +18,16 @@
<template v-if="subWidget.options.labelIconPosition === 'front'"> <template v-if="subWidget.options.labelIconPosition === 'front'">
<template v-if="!!subWidget.options.labelTooltip"> <template v-if="!!subWidget.options.labelTooltip">
<el-tooltip :content="subWidget.options.labelTooltip" effect="light"> <el-tooltip :content="subWidget.options.labelTooltip" effect="light">
<i :class="subWidget.options.labelIconClass"></i></el-tooltip>{{subWidget.options.label}}</template> <svg-icon :icon-class="subWidget.options.labelIconClass" /></el-tooltip>{{subWidget.options.label}}</template>
<template v-else> <template v-else>
<i :class="subWidget.options.labelIconClass"></i>{{subWidget.options.label}}</template> <svg-icon :icon-class="subWidget.options.labelIconClass" />{{subWidget.options.label}}</template>
</template> </template>
<template v-else-if="subWidget.options.labelIconPosition === 'rear'"> <template v-else-if="subWidget.options.labelIconPosition === 'rear'">
<template v-if="!!subWidget.options.labelTooltip"> <template v-if="!!subWidget.options.labelTooltip">
{{subWidget.options.label}}<el-tooltip :content="subWidget.options.labelTooltip" effect="light"> {{subWidget.options.label}}<el-tooltip :content="subWidget.options.labelTooltip" effect="light">
<i :class="subWidget.options.labelIconClass"></i></el-tooltip></template> <svg-icon :icon-class="subWidget.options.labelIconClass" /></el-tooltip></template>
<template v-else> <template v-else>
{{subWidget.options.label}}<i :class="subWidget.options.labelIconClass"></i></template> {{subWidget.options.label}}<svg-icon :icon-class="subWidget.options.labelIconClass" /></template>
</template> </template>
</span> </span>
<template v-else> <template v-else>

12
src/icons/index.js
View File

@ -1,12 +0,0 @@
//import { vfApp } from '@/utils/create-app'
import SvgIcon from '@/components/svg-icon'// svg组件
// register globally
//vfApp.component('svg-icon', SvgIcon)
// const requireAll = requireContext => requireContext.keys().map(requireContext)
// const req = require.context('./svg', false, /\.svg$/)
// requireAll(req)
//const modules = import.meta.globEager('./**/*.svg')

1
src/icons/svg/custom/search.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1642316835616" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8265" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M863.3 641.94A416.1 416.1 0 0 0 96.7 318.06a416.1 416.1 0 0 0 766.6 323.88zM480 832a352 352 0 1 1 248.9-103.1A349.69 349.69 0 0 1 480 832z" p-id="8266"></path><path d="M950.63 841.37l-96-96a32 32 0 0 0-45.25 45.25l96 96a13.25 13.25 0 1 1-18.75 18.75l-96-96a32 32 0 0 0-45.25 45.25l96 96a77.25 77.25 0 1 0 109.25-109.25z" p-id="8267"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 723 B

1
src/icons/svg/el/arrow-down.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1642310439692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2250" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 714.666667c-8.533333 0-17.066667-2.133333-23.466667-8.533334l-341.333333-341.333333c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0l320 317.866667 317.866667-320c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L533.333333 704c-4.266667 8.533333-12.8 10.666667-21.333333 10.666667z" p-id="2251"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 693 B

1
src/icons/svg/el/download.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1642317261203" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9064" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M896 672c-17.066667 0-32 14.933333-32 32v128c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-6.4 0-10.666667-4.266667-10.666667-10.666667v-128c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v128c0 40.533333 34.133333 74.666667 74.666667 74.666667h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667v-128c0-17.066667-14.933333-32-32-32z" p-id="9065"></path><path d="M488.533333 727.466667c6.4 6.4 14.933333 8.533333 23.466667 8.533333s17.066667-2.133333 23.466667-8.533333l213.333333-213.333334c12.8-12.8 12.8-32 0-44.8-12.8-12.8-32-12.8-44.8 0l-157.866667 157.866667V170.666667c0-17.066667-14.933333-32-32-32s-34.133333 14.933333-34.133333 32v456.533333L322.133333 469.333333c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l211.2 213.333334z" p-id="9066"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
src/icons/svg/el/form-template.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1642312421437" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5732" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M298.666667 981.333333a85.333333 85.333333 0 0 1-85.333334-85.333333V128a85.333333 85.333333 0 0 1 85.333334-85.333333h426.666666a85.333333 85.333333 0 0 1 85.333334 85.333333v768a85.333333 85.333333 0 0 1-85.333334 85.333333zM298.666667 149.333333v725.333334a21.333333 21.333333 0 0 0 21.333333 21.333333h384a21.333333 21.333333 0 0 0 21.333333-21.333333v-725.333334a21.333333 21.333333 0 0 0-21.333333-21.333333h-384a21.333333 21.333333 0 0 0-21.333333 21.333333zM938.666667 768V256a42.666667 42.666667 0 0 1 42.666666-42.666667 42.666667 42.666667 0 0 1 42.666667 42.666667v512a42.666667 42.666667 0 0 1-42.666667 42.666667 42.666667 42.666667 0 0 1-42.666666-42.666667zM0 768V256a42.666667 42.666667 0 0 1 42.666667-42.666667 42.666667 42.666667 0 0 1 42.666666 42.666667v512a42.666667 42.666667 0 0 1-42.666666 42.666667 42.666667 42.666667 0 0 1-42.666667-42.666667z" p-id="5733"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
src/icons/svg/el/plus.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1642313580837" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6522" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M554.666667 213.333333h-85.333334v256H213.333333v85.333334h256v256h85.333334v-256h256v-85.333334h-256z" fill="" p-id="6523"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 514 B

1
src/icons/svg/el/set-up.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1642312224076" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2764" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M217.088 151.552c-18.432 0.683008-33.792 7.168-46.08 19.456s-18.772992 27.648-19.456 46.08v589.824c0.683008 18.432 7.168 33.792 19.456 46.08s27.648 18.772992 46.08 19.456h589.824c18.432-0.683008 33.792-7.168 46.08-19.456s18.772992-27.648 19.456-46.08V217.088c-0.683008-18.432-7.168-33.792-19.456-46.08s-27.648-18.772992-46.08-19.456H217.088z m0-65.536h589.824c36.864 0.683008 67.755008 13.483008 92.672 38.4S937.300992 180.224 937.984 217.088v589.824c-0.683008 36.864-13.483008 67.755008-38.4 92.672S843.776 937.300992 806.912 937.984H217.088c-36.864-0.683008-67.755008-13.483008-92.672-38.4S86.699008 843.776 86.016 806.912V217.088c0.683008-36.864 13.483008-67.755008 38.4-92.672S180.224 86.699008 217.088 86.016z m163.84 327.68c18.432-0.683008 33.792-7.168 46.08-19.456s18.432-27.648 18.432-46.08-6.144-33.792-18.432-46.08-27.648-18.432-46.08-18.432-33.792 6.144-46.08 18.432-18.432 27.648-18.432 46.08 6.144 33.792 18.432 46.08 27.648 18.772992 46.08 19.456z m0 65.536c-36.864-0.683008-67.755008-13.483008-92.672-38.4S250.539008 385.024 249.856 348.16c0.683008-36.864 13.483008-67.755008 38.4-92.672S344.064 217.771008 380.928 217.088c36.864 0.683008 67.755008 13.483008 92.672 38.4S511.316992 311.296 512 348.16c-0.683008 36.864-13.483008 67.755008-38.4 92.672S417.792 478.548992 380.928 479.232z m98.304-163.84h262.144c21.844992 0 32.768 10.923008 32.768 32.768s-10.923008 32.768-32.768 32.768H479.232c-21.844992 0-32.768-10.923008-32.768-32.768s10.923008-32.768 32.768-32.768z m163.84 425.984c18.432-0.683008 33.792-7.168 46.08-19.456s18.432-27.648 18.432-46.08-6.144-33.792-18.432-46.08-27.648-18.432-46.08-18.432-33.792 6.144-46.08 18.432-18.432 27.648-18.432 46.08 6.144 33.792 18.432 46.08 27.648 18.772992 46.08 19.456z m0 65.536c-36.864-0.683008-67.755008-13.483008-92.672-38.4S512.683008 712.704 512 675.84c0.683008-36.864 13.483008-67.755008 38.4-92.672S606.208 545.451008 643.072 544.768c36.864 0.683008 67.755008 13.483008 92.672 38.4S773.460992 638.976 774.144 675.84c-0.683008 36.864-13.483008 67.755008-38.4 92.672S679.936 806.228992 643.072 806.912zM282.624 643.072h262.144c21.844992 0 32.768 10.923008 32.768 32.768s-10.923008 32.768-32.768 32.768H282.624c-21.844992 0-32.768-10.923008-32.768-32.768s10.923008-32.768 32.768-32.768z" p-id="2765"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

2
src/lang/en-US.js
View File

@ -83,6 +83,8 @@ export default {
copyHtmlCode: 'Copy HTML Code', copyHtmlCode: 'Copy HTML Code',
copyJsonSuccess: 'Copy succeed', copyJsonSuccess: 'Copy succeed',
importJsonSuccess: 'Import succeed', importJsonSuccess: 'Import succeed',
invalidJsonFormat: 'Invalid JSON format',
jsonVersionMismatch: 'Version of JSON mismatch',
copyJsonFail: 'Copy failed', copyJsonFail: 'Copy failed',
copyVueCodeSuccess: 'Copy succeed', copyVueCodeSuccess: 'Copy succeed',
copyVueCodeFail: 'Copy failed', copyVueCodeFail: 'Copy failed',

2
src/lang/zh-CN.js
View File

@ -83,6 +83,8 @@ export default {
copyHtmlCode: '复制HTML代码', copyHtmlCode: '复制HTML代码',
copyJsonSuccess: '复制JSON成功', copyJsonSuccess: '复制JSON成功',
importJsonSuccess: '导入JSON成功', importJsonSuccess: '导入JSON成功',
invalidJsonFormat: '无效的表单JSON格式',
jsonVersionMismatch: '表单JSON版本号不匹配',
copyJsonFail: '复制JSON失败', copyJsonFail: '复制JSON失败',
copyVueCodeSuccess: '复制Vue代码成功', copyVueCodeSuccess: '复制Vue代码成功',
copyVueCodeFail: '复制Vue代码失败', copyVueCodeFail: '复制Vue代码失败',

3
src/main.js
View File

@ -4,8 +4,10 @@ import App from './App.vue'
import ElementPlus from 'element-plus' import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
import '@/styles/index.scss' import '@/styles/index.scss'
import '@/iconfont/iconfont.css'
import Draggable from '@/../lib/vuedraggable/dist/vuedraggable.umd.js' import Draggable from '@/../lib/vuedraggable/dist/vuedraggable.umd.js'
//import Draggable from 'vuedraggable' //import Draggable from 'vuedraggable'
import {registerIcon} from '@/utils/el-icons'
import SvgIcon from '@/components/svg-icon' //svg组件 import SvgIcon from '@/components/svg-icon' //svg组件
import 'virtual:svg-icons-register' import 'virtual:svg-icons-register'
@ -23,6 +25,7 @@ if (typeof window !== 'undefined') {
const vfApp = createApp(App) const vfApp = createApp(App)
vfApp.use(ElementPlus) vfApp.use(ElementPlus)
registerIcon(vfApp)
vfApp.component('draggable', Draggable) vfApp.component('draggable', Draggable)
vfApp.component('svg-icon', SvgIcon) vfApp.component('svg-icon', SvgIcon)
addDirective(vfApp) addDirective(vfApp)

9
src/utils/el-icons.js Normal file
View File

@ -0,0 +1,9 @@
import {Edit, Minus, Plus, InfoFilled, Search} from '@element-plus/icons-vue'
export function registerIcon(app) {
app.component('el-icon-edit', Edit)
app.component('el-icon-minus', Minus)
app.component('el-icon-plus', Plus)
app.component('el-icon-info', InfoFilled)
app.component('el-icon-search', Search)
}