替换字体图标，发布3.0 Beta版。
vdpAdmin
parent
54e11ab3b7
commit
273dc7ad20
10
README.md
10
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）
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<title>Variant Form</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ export function createDesigner(vueInstance) {
|
|||
customClass: '',
|
||||
functions: '',
|
||||
layoutType: 'PC',
|
||||
jsonVersion: 3,
|
||||
|
||||
onFormCreated: '',
|
||||
onFormMounted: '',
|
||||
|
|
|
|||
|
|
@ -2,16 +2,17 @@
|
|||
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
|
||||
: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">
|
||||
<el-cascader ref="fieldEditor" :options="field.options.optionItems" v-model="fieldModel"
|
||||
style="width: 100%" class="full-width-input"
|
||||
:disabled="field.options.disabled"
|
||||
:size="field.options.size"
|
||||
:clearable="field.options.clearable"
|
||||
:filterable="field.options.filterable"
|
||||
:placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"
|
||||
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
|
||||
@change="handleChangeEvent">
|
||||
</el-cascader>
|
||||
<div class="full-width-input">
|
||||
<el-cascader ref="fieldEditor" :options="field.options.optionItems" v-model="fieldModel"
|
||||
:disabled="field.options.disabled"
|
||||
:size="field.options.size"
|
||||
:clearable="field.options.clearable"
|
||||
:filterable="field.options.filterable"
|
||||
:placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"
|
||||
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
|
||||
@change="handleChangeEvent">
|
||||
</el-cascader>
|
||||
</div>
|
||||
</form-item-wrapper>
|
||||
</template>
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,15 +16,17 @@
|
|||
v-if="!!field.options.uploadTip">{{field.options.uploadTip}}</div>
|
||||
</template>
|
||||
<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 #file="{ file }">
|
||||
<div class="upload-file-list">
|
||||
<span class="upload-file-name" :title="file.name">{{file.name}}</span>
|
||||
<a :href="file.url" download="">
|
||||
<i class="el-icon-download file-action" title="i18nt('render.hint.downloadFile')"></i></a>
|
||||
<i class="el-icon-delete file-action" title="i18nt('render.hint.removeFile')" v-if="!field.options.disabled"
|
||||
@click="removeUploadFile(file.name)"></i>
|
||||
<span class="el-icon-download file-action" title="i18nt('render.hint.downloadFile')">
|
||||
<svg-icon icon-class="el-download" />
|
||||
</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>
|
||||
</template>
|
||||
</el-upload>
|
||||
|
|
@ -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'],
|
||||
|
|
|
|||
|
|
@ -22,16 +22,16 @@
|
|||
<template v-if="field.options.labelIconPosition === 'front'">
|
||||
<template v-if="!!field.options.labelTooltip">
|
||||
<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>
|
||||
<i :class="field.options.labelIconClass"></i>{{label}}</template>
|
||||
<svg-icon :icon-class="field.options.labelIconClass" />{{label}}</template>
|
||||
</template>
|
||||
<template v-else-if="field.options.labelIconPosition === 'rear'">
|
||||
<template v-if="!!field.options.labelTooltip">
|
||||
{{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>
|
||||
{{label}}<i :class="field.options.labelIconClass"></i></template>
|
||||
{{label}}<svg-icon :icon-class="field.options.labelIconClass" /></template>
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
@change="handleChangeEvent">
|
||||
<template #append v-if="field.options.appendButton">
|
||||
<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>
|
||||
</el-input>
|
||||
</form-item-wrapper>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<div class="el-upload__tip"
|
||||
v-if="!!field.options.uploadTip">{{field.options.uploadTip}}</div>
|
||||
</template>
|
||||
<i class="el-icon-plus avatar-uploader-icon"></i>
|
||||
<div class="uploader-icon"><svg-icon icon-class="el-plus" /></div>
|
||||
</el-upload>
|
||||
</form-item-wrapper>
|
||||
</template>
|
||||
|
|
@ -222,4 +222,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.uploader-icon {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
color: #8c939d;
|
||||
font-size: 28px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,10 +13,10 @@
|
|||
<el-header class="main-header">
|
||||
<div class="float-left main-title">
|
||||
<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">
|
||||
<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>
|
||||
<el-dropdown-menu>
|
||||
<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 i18n, { changeLocale } from "@/utils/i18n"
|
||||
import axios from 'axios'
|
||||
import SvgIcon from "@/components/svg-icon/index";
|
||||
|
||||
export default {
|
||||
name: "VFormDesigner",
|
||||
componentName: "VFormDesigner",
|
||||
mixins: [i18n],
|
||||
components: {
|
||||
SvgIcon,
|
||||
WidgetPanel,
|
||||
ToolbarPanel,
|
||||
SettingPanel,
|
||||
|
|
|
|||
|
|
@ -300,8 +300,8 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.el-form-item--mini.el-form-item) {
|
||||
margin-bottom: 6px;
|
||||
:deep(.el-form-item--small.el-form-item) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.radio-group-custom {
|
||||
|
|
|
|||
|
|
@ -312,8 +312,8 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.el-form-item--mini.el-form-item) {
|
||||
margin-bottom: 6px;
|
||||
:deep(.el-form-item--small.el-form-item) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,11 +34,12 @@
|
|||
</template>
|
||||
</draggable>
|
||||
</el-checkbox-group>
|
||||
<el-cascader v-else-if="(selectedWidget.type === 'cascader')"
|
||||
v-model="optionModel.defaultValue" :options="optionModel.optionItems"
|
||||
@change="emitDefaultValueChange"
|
||||
:placeholder="i18nt('render.hint.selectPlaceholder')" style="width: 100%">
|
||||
</el-cascader>
|
||||
<div v-else-if="(selectedWidget.type === 'cascader')" class="full-width-input">
|
||||
<el-cascader v-model="optionModel.defaultValue" :options="optionModel.optionItems"
|
||||
@change="emitDefaultValueChange"
|
||||
:placeholder="i18nt('render.hint.selectPlaceholder')">
|
||||
</el-cascader>
|
||||
</div>
|
||||
<div v-if="(selectedWidget.type === 'cascader')">
|
||||
<el-button type="text" @click="importCascaderOptions">{{i18nt('designer.setting.importOptions')}}</el-button>
|
||||
<el-button type="text" @click="resetDefault">{{i18nt('designer.setting.resetDefault')}}</el-button>
|
||||
|
|
@ -222,9 +223,13 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.option-items-pane ul {
|
||||
padding-inline-start: 6px;
|
||||
padding-left: 6px; /* 重置IE11默认样式 */
|
||||
.option-items-pane {
|
||||
width: 100%;
|
||||
|
||||
ul {
|
||||
padding-inline-start: 6px;
|
||||
padding-left: 6px; /* 重置IE11默认样式 */
|
||||
}
|
||||
}
|
||||
|
||||
li.ghost{
|
||||
|
|
@ -243,4 +248,13 @@
|
|||
.dialog-footer .el-button {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.full-width-input {
|
||||
width: 100% !important;
|
||||
|
||||
:deep(.el-cascader) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<template #label>
|
||||
<span>{{i18nt('designer.setting.fileTypes')}}
|
||||
<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>
|
||||
</template>
|
||||
<el-select multiple allow-create filterable default-first-option
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<template #label>
|
||||
<span>{{i18nt('designer.setting.fileTypes')}}
|
||||
<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>
|
||||
</template>
|
||||
<el-select multiple allow-create filterable default-first-option
|
||||
|
|
@ -31,9 +31,9 @@
|
|||
data() {
|
||||
return {
|
||||
uploadPictureTypes: [
|
||||
{value: 'jpeg', label: 'JPG'},
|
||||
{value: 'png', label: 'PNG'},
|
||||
{value: 'gif', label: 'GIF'},
|
||||
{value: 'jpeg', label: 'jpg'}, /* label如用大写字母，选择两个文件类型就会导致设置面板快速抖动、闪烁，非常奇怪！！ */
|
||||
{value: 'png', label: 'png'},
|
||||
{value: 'gif', label: 'gif'},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -454,6 +454,15 @@
|
|||
try {
|
||||
let importObj = JSON.parse(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.showImportJsonDialogFlag = false
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<el-tabs v-model="firstTab" class="no-bottom-margin indent-left-margin">
|
||||
<el-tab-pane name="componentLib">
|
||||
<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>
|
||||
|
||||
<el-collapse v-model="activeNames" class="widget-collapse">
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
|
||||
<el-tab-pane v-if="showFormTemplates()" name="formLib" style="padding: 8px">
|
||||
<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 v-for="(ft, idx) in formTemplates">
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ export const basicFields = [
|
|||
suffixIcon: '',
|
||||
appendButton: false,
|
||||
appendButtonDisabled: false,
|
||||
buttonIcon: 'el-icon-search',
|
||||
buttonIcon: 'custom-search',
|
||||
//-------------------
|
||||
onCreated: '',
|
||||
onMounted: '',
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<span class="action-label">{{i18nt('render.hint.subFormAction')}}</span>
|
||||
<el-button :disabled="actionDisabled" round type="primary" size="small" class="action-button" @click="addSubFormRow"
|
||||
: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>
|
||||
<template v-for="(subWidget) in widget.widgetList" :key="subWidget.id + 'thc'">
|
||||
<div class="field-header-column"
|
||||
|
|
@ -18,16 +18,16 @@
|
|||
<template v-if="subWidget.options.labelIconPosition === 'front'">
|
||||
<template v-if="!!subWidget.options.labelTooltip">
|
||||
<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>
|
||||
<i :class="subWidget.options.labelIconClass"></i>{{subWidget.options.label}}</template>
|
||||
<svg-icon :icon-class="subWidget.options.labelIconClass" />{{subWidget.options.label}}</template>
|
||||
</template>
|
||||
<template v-else-if="subWidget.options.labelIconPosition === 'rear'">
|
||||
<template v-if="!!subWidget.options.labelTooltip">
|
||||
{{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>
|
||||
{{subWidget.options.label}}<i :class="subWidget.options.labelIconClass"></i></template>
|
||||
{{subWidget.options.label}}<svg-icon :icon-class="subWidget.options.labelIconClass" /></template>
|
||||
</template>
|
||||
</span>
|
||||
<template v-else>
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 723 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 693 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 514 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -83,6 +83,8 @@ export default {
|
|||
copyHtmlCode: 'Copy HTML Code',
|
||||
copyJsonSuccess: 'Copy succeed',
|
||||
importJsonSuccess: 'Import succeed',
|
||||
invalidJsonFormat: 'Invalid JSON format',
|
||||
jsonVersionMismatch: 'Version of JSON mismatch',
|
||||
copyJsonFail: 'Copy failed',
|
||||
copyVueCodeSuccess: 'Copy succeed',
|
||||
copyVueCodeFail: 'Copy failed',
|
||||
|
|
|
|||
|
|
@ -83,6 +83,8 @@ export default {
|
|||
copyHtmlCode: '复制HTML代码',
|
||||
copyJsonSuccess: '复制JSON成功',
|
||||
importJsonSuccess: '导入JSON成功',
|
||||
invalidJsonFormat: '无效的表单JSON格式',
|
||||
jsonVersionMismatch: '表单JSON版本号不匹配',
|
||||
copyJsonFail: '复制JSON失败',
|
||||
copyVueCodeSuccess: '复制Vue代码成功',
|
||||
copyVueCodeFail: '复制Vue代码失败',
|
||||
|
|
|
|||
|
|
@ -4,8 +4,10 @@ import App from './App.vue'
|
|||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import '@/styles/index.scss'
|
||||
import '@/iconfont/iconfont.css'
|
||||
import Draggable from '@/../lib/vuedraggable/dist/vuedraggable.umd.js'
|
||||
//import Draggable from 'vuedraggable'
|
||||
import {registerIcon} from '@/utils/el-icons'
|
||||
import SvgIcon from '@/components/svg-icon' //svg组件
|
||||
import 'virtual:svg-icons-register'
|
||||
|
||||
|
|
@ -23,6 +25,7 @@ if (typeof window !== 'undefined') {
|
|||
const vfApp = createApp(App)
|
||||
|
||||
vfApp.use(ElementPlus)
|
||||
registerIcon(vfApp)
|
||||
vfApp.component('draggable', Draggable)
|
||||
vfApp.component('svg-icon', SvgIcon)
|
||||
addDirective(vfApp)
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
Loading…
Reference in New Issue