images/variant-form3-vite
2
0
Fork 0
mirror of https://github.com/vform666/variant-form3-vite.git synced 2024-09-20 04:44:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

2022.01.29，修复部分bug，准备发布3.0正式版。

Browse Source
This commit is contained in:
vdpAdmin 2022-01-29 19:49:51 +08:00
parent 63cf735261
commit eeb0065d80
55 changed files with 96 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
install-render.js
View File

@ -32,10 +32,9 @@ const install = (app) => {
}) })
} }
// if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时主动调用install方法！！ */ if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时赋值axios！！ */
// window.axios = axios window.axios = axios
// install(window.Vue); }
// }
export default { export default {
install, install,

7
install.js
View File

@ -62,10 +62,9 @@ const install = (app) => {
}) })
} }
// if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时主动调用install方法！！ */ if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时赋值axios！！ */
// window.axios = axios window.axios = axios
// install(window.Vue); }
// }
export default { export default {
install, install,

2
package.json
View File

@ -14,7 +14,7 @@
"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",
"element-plus": "^1.3.0-beta.3", "element-plus": "^1.3.0-beta.9",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"mitt": "^3.0.0", "mitt": "^3.0.0",
"sortablejs": "1.14.0", "sortablejs": "1.14.0",

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

@ -2,7 +2,7 @@
<static-content-wrapper :designer="designer" :field="field" :design-state="designState" <static-content-wrapper :designer="designer" :field="field" :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">
<el-button ref="fieldEditor" :type="field.options.type" :size="field.options.size" <el-button ref="fieldEditor" :type="field.options.type" :size="widgetSize"
:plain="field.options.plain" :round="field.options.round" :plain="field.options.plain" :round="field.options.round"
:circle="field.options.circle" :icon="field.options.icon" :circle="field.options.circle" :icon="field.options.icon"
:disabled="field.options.disabled" :disabled="field.options.disabled"

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

@ -5,7 +5,7 @@
<div class="full-width-input"> <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"
:disabled="field.options.disabled" :disabled="field.options.disabled"
:size="field.options.size" :size="widgetSize"
:clearable="field.options.clearable" :clearable="field.options.clearable"
:filterable="field.options.filterable" :filterable="field.options.filterable"
:placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')" :placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"

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

@ -3,7 +3,7 @@
: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">
<el-checkbox-group ref="fieldEditor" v-model="fieldModel" <el-checkbox-group ref="fieldEditor" v-model="fieldModel"
:disabled="field.options.disabled" :size="field.options.size" :disabled="field.options.disabled" :size="widgetSize"
@change="handleChangeEvent"> @change="handleChangeEvent">
<template v-if="!!field.options.buttonStyle"> <template v-if="!!field.options.buttonStyle">
<el-checkbox-button v-for="(item, index) in field.options.optionItems" :key="index" :label="item.value" <el-checkbox-button v-for="(item, index) in field.options.optionItems" :key="index" :label="item.value"

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

@ -3,7 +3,7 @@
: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">
<el-color-picker ref="fieldEditor" v-model="fieldModel" <el-color-picker ref="fieldEditor" v-model="fieldModel"
:size="field.options.size" :size="widgetSize"
:disabled="field.options.disabled" :disabled="field.options.disabled"
@change="handleChangeEvent"> @change="handleChangeEvent">
</el-color-picker> </el-color-picker>

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

@ -5,7 +5,7 @@
<div :class="[!!field.options.autoFullWidth ? 'auto-full-width' : '']"> <div :class="[!!field.options.autoFullWidth ? 'auto-full-width' : '']">
<el-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel" <el-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel"
:disabled="field.options.disabled" :readonly="field.options.readonly" :disabled="field.options.disabled" :readonly="field.options.readonly"
:size="field.options.size" :size="widgetSize"
:clearable="field.options.clearable" :editable="field.options.editable" :clearable="field.options.clearable" :editable="field.options.editable"
:format="field.options.format" :value-format="field.options.valueFormat" :format="field.options.format" :value-format="field.options.valueFormat"
:start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startDatePlaceholder')" :start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startDatePlaceholder')"

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

@ -5,7 +5,7 @@
<el-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel" <el-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel"
:class="[!!field.options.autoFullWidth ? 'auto-full-width' : '']" :class="[!!field.options.autoFullWidth ? 'auto-full-width' : '']"
:readonly="field.options.readonly" :disabled="field.options.disabled" :readonly="field.options.readonly" :disabled="field.options.disabled"
:size="field.options.size" :size="widgetSize"
:clearable="field.options.clearable" :editable="field.options.editable" :clearable="field.options.clearable" :editable="field.options.editable"
:format="field.options.format" :value-format="field.options.valueFormat" :format="field.options.format" :value-format="field.options.valueFormat"
:placeholder="field.options.placeholder || i18nt('render.hint.datePlaceholder')" :placeholder="field.options.placeholder || i18nt('render.hint.datePlaceholder')"

4
src/components/form-designer/form-widget/field-widget/fieldMixin.js
View File

@ -312,7 +312,6 @@ export default {
//eventBus.$emit('field-value-changed', [newValue, oldValue]) //此处应该加事件触发组件判断，非本组件（其他组件）触发的事件应该跳过，否则会出现事件无限循环！！ //eventBus.$emit('field-value-changed', [newValue, oldValue]) //此处应该加事件触发组件判断，非本组件（其他组件）触发的事件应该跳过，否则会出现事件无限循环！！
this.emit$('field-value-changed', [newValue, oldValue]) this.emit$('field-value-changed', [newValue, oldValue])
console.log('test', 'ccccccccc')
// /* 必须用dispatch向指定父组件派发消息！！ */ // /* 必须用dispatch向指定父组件派发消息！！ */
this.dispatch('VFormRender', 'fieldChange', this.dispatch('VFormRender', 'fieldChange',
@ -377,9 +376,6 @@ export default {
}, },
handleOnChange(val, oldVal) { //自定义onChange事件 handleOnChange(val, oldVal) { //自定义onChange事件
console.log('test', 'aaaaaaaaa')
//debugger
if (!!this.field.options.onChange) { if (!!this.field.options.onChange) {
let changeFn = new Function('value', 'oldValue', this.field.options.onChange) let changeFn = new Function('value', 'oldValue', this.field.options.onChange)
changeFn.call(this, val, oldVal) changeFn.call(this, val, oldVal)

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

@ -4,7 +4,7 @@
: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">
<el-input ref="fieldEditor" v-model="fieldModel" <el-input ref="fieldEditor" v-model="fieldModel"
:disabled="field.options.disabled" :readonly="field.options.readonly" :disabled="field.options.disabled" :readonly="field.options.readonly"
:size="field.options.size" class="hide-spin-button" :size="widgetSize" class="hide-spin-button"
:type="inputType" :type="inputType"
:show-password="field.options.showPassword" :show-password="field.options.showPassword"
:placeholder="field.options.placeholder" :placeholder="field.options.placeholder"

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

@ -3,7 +3,7 @@
: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">
<el-radio-group ref="fieldEditor" v-model="fieldModel" <el-radio-group ref="fieldEditor" v-model="fieldModel"
:disabled="field.options.disabled" :size="field.options.size" :disabled="field.options.disabled" :size="widgetSize"
@change="handleChangeEvent"> @change="handleChangeEvent">
<template v-if="!!field.options.buttonStyle"> <template v-if="!!field.options.buttonStyle">
<el-radio-button v-for="(item, index) in field.options.optionItems" :key="index" :label="item.value" <el-radio-button v-for="(item, index) in field.options.optionItems" :key="index" :label="item.value"

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

@ -4,7 +4,7 @@
: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">
<el-select ref="fieldEditor" v-model="fieldModel" class="full-width-input" <el-select ref="fieldEditor" v-model="fieldModel" class="full-width-input"
:disabled="field.options.disabled" :disabled="field.options.disabled"
:size="field.options.size" :size="widgetSize"
:clearable="field.options.clearable" :clearable="field.options.clearable"
:filterable="field.options.filterable" :filterable="field.options.filterable"
:allow-create="field.options.allowCreate" :allow-create="field.options.allowCreate"

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

@ -4,7 +4,7 @@
: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">
<el-input type="textarea" ref="fieldEditor" v-model="fieldModel" <el-input type="textarea" ref="fieldEditor" v-model="fieldModel"
:disabled="field.options.disabled" :readonly="field.options.readonly" :disabled="field.options.disabled" :readonly="field.options.readonly"
:size="field.options.size" :size="widgetSize"
:placeholder="field.options.placeholder" :rows="field.options.rows" :placeholder="field.options.placeholder" :rows="field.options.rows"
:minlength="field.options.minLength" :maxlength="field.options.maxLength" :minlength="field.options.minLength" :maxlength="field.options.maxLength"
:show-word-limit="field.options.showWordLimit" :show-word-limit="field.options.showWordLimit"

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

@ -6,7 +6,7 @@
<el-time-picker ref="fieldEditor" is-range v-model="fieldModel" <el-time-picker ref="fieldEditor" is-range v-model="fieldModel"
:class="[!!field.options.autoFullWidth ? 'full-width-input' : '']" :class="[!!field.options.autoFullWidth ? 'full-width-input' : '']"
:disabled="field.options.disabled" :readonly="field.options.readonly" :disabled="field.options.disabled" :readonly="field.options.readonly"
:size="field.options.size" :size="widgetSize"
:clearable="field.options.clearable" :editable="field.options.editable" :clearable="field.options.clearable" :editable="field.options.editable"
:format="field.options.format" value-format="HH:mm:ss" :format="field.options.format" value-format="HH:mm:ss"
:start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startTimePlaceholder')" :start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startTimePlaceholder')"

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

@ -5,7 +5,7 @@
<el-time-picker ref="fieldEditor" v-model="fieldModel" <el-time-picker ref="fieldEditor" v-model="fieldModel"
:class="[!!field.options.autoFullWidth ? 'auto-full-width' : '']" :class="[!!field.options.autoFullWidth ? 'auto-full-width' : '']"
:disabled="field.options.disabled" :readonly="field.options.readonly" :disabled="field.options.disabled" :readonly="field.options.readonly"
:size="field.options.size" :size="widgetSize"
:clearable="field.options.clearable" :editable="field.options.editable" :clearable="field.options.clearable" :editable="field.options.editable"
:format="field.options.format" value-format="HH:mm:ss" :format="field.options.format" value-format="HH:mm:ss"
:placeholder="field.options.placeholder || i18nt('render.hint.timePlaceholder')" :placeholder="field.options.placeholder || i18nt('render.hint.timePlaceholder')"

2
src/components/form-designer/setting-panel/property-editor-factory.jsx
View File

@ -49,7 +49,7 @@ export const createBooleanEditor = function (propName, propLabelKey) {
render(h) { render(h) {
return ( return (
<el-form-item label={translate(propLabelKey)}> <el-form-item label={translate(propLabelKey)}>
<el-checkbox v-model={this.optionModel[propName]} /> <el-switch v-model={this.optionModel[propName]} />
</el-form-item> </el-form-item>
) )
} }

2
src/components/form-designer/setting-panel/property-editor/allowCreate-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.allowCreate')"> <el-form-item :label="i18nt('designer.setting.allowCreate')">
<el-checkbox v-model="optionModel.allowCreate"></el-checkbox> <el-switch v-model="optionModel.allowCreate"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/appendButton-editor.vue
View File

@ -4,7 +4,7 @@
<el-divider class="custom-divider">{{i18nt('designer.setting.inputButton')}}</el-divider> <el-divider class="custom-divider">{{i18nt('designer.setting.inputButton')}}</el-divider>
</el-form-item> </el-form-item>
<el-form-item :label="i18nt('designer.setting.appendButton')"> <el-form-item :label="i18nt('designer.setting.appendButton')">
<el-checkbox v-model="optionModel.appendButton"></el-checkbox> <el-switch v-model="optionModel.appendButton"></el-switch>
</el-form-item> </el-form-item>
</div> </div>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/appendButtonDisabled-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.appendButtonDisabled')"> <el-form-item :label="i18nt('designer.setting.appendButtonDisabled')">
<el-checkbox v-model="optionModel.appendButtonDisabled"></el-checkbox> <el-switch v-model="optionModel.appendButtonDisabled"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/autoFullWidth-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.autoFullWidth')"> <el-form-item :label="i18nt('designer.setting.autoFullWidth')">
<el-checkbox v-model="optionModel.autoFullWidth"></el-checkbox> <el-switch v-model="optionModel.autoFullWidth"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/automaticDropdown-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.automaticDropdown')"> <el-form-item :label="i18nt('designer.setting.automaticDropdown')">
<el-checkbox v-model="optionModel.automaticDropdown"></el-checkbox> <el-switch v-model="optionModel.automaticDropdown"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/border-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.border')"> <el-form-item :label="i18nt('designer.setting.border')">
<el-checkbox v-model="optionModel.border"></el-checkbox> <el-switch v-model="optionModel.border"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/buttonStyle-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.buttonStyle')"> <el-form-item :label="i18nt('designer.setting.buttonStyle')">
<el-checkbox v-model="optionModel.buttonStyle"></el-checkbox> <el-switch v-model="optionModel.buttonStyle"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/clearable-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.clearable')"> <el-form-item :label="i18nt('designer.setting.clearable')">
<el-checkbox v-model="optionModel.clearable"></el-checkbox> <el-switch v-model="optionModel.clearable"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-responsive-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.responsive')"> <el-form-item :label="i18nt('designer.setting.responsive')">
<el-checkbox v-model="optionModel.responsive"></el-checkbox> <el-switch v-model="optionModel.responsive"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/container-sub-form/showBlankRow-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.showBlankRow')"> <el-form-item :label="i18nt('designer.setting.showBlankRow')">
<el-checkbox v-model="optionModel.showBlankRow"></el-checkbox> <el-switch v-model="optionModel.showBlankRow"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/container-sub-form/showRowNumber-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.showRowNumber')"> <el-form-item :label="i18nt('designer.setting.showRowNumber')">
<el-checkbox v-model="optionModel.showRowNumber"></el-checkbox> <el-switch v-model="optionModel.showRowNumber"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/disabled-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.disabled')"> <el-form-item :label="i18nt('designer.setting.disabled')">
<el-checkbox v-model="optionModel.disabled"></el-checkbox> <el-switch v-model="optionModel.disabled"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/editable-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.editable')"> <el-form-item :label="i18nt('designer.setting.editable')">
<el-checkbox v-model="optionModel.editable"></el-checkbox> <el-switch v-model="optionModel.editable"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/field-button/circle-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.circle')"> <el-form-item :label="i18nt('designer.setting.circle')">
<el-checkbox v-model="optionModel.circle"></el-checkbox> <el-switch v-model="optionModel.circle"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/field-button/plain-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.plain')"> <el-form-item :label="i18nt('designer.setting.plain')">
<el-checkbox v-model="optionModel.plain"></el-checkbox> <el-switch v-model="optionModel.plain"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/field-button/round-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.round')"> <el-form-item :label="i18nt('designer.setting.round')">
<el-checkbox v-model="optionModel.round"></el-checkbox> <el-switch v-model="optionModel.round"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/field-rate/allowHalf-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.allowHalf')"> <el-form-item :label="i18nt('designer.setting.allowHalf')">
<el-checkbox v-model="optionModel.allowHalf"></el-checkbox> <el-switch v-model="optionModel.allowHalf"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/field-rate/showScore-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.showScore')"> <el-form-item :label="i18nt('designer.setting.showScore')">
<el-checkbox v-model="optionModel.showScore"></el-checkbox> <el-switch v-model="optionModel.showScore"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/field-rate/showText-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.showText')"> <el-form-item :label="i18nt('designer.setting.showText')">
<el-checkbox v-model="optionModel.showText"></el-checkbox> <el-switch v-model="optionModel.showText"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/field-slider/range-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.range')"> <el-form-item :label="i18nt('designer.setting.range')">
<el-checkbox v-model="optionModel.range"></el-checkbox> <el-switch v-model="optionModel.range"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/field-slider/showStops-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.showStops')"> <el-form-item :label="i18nt('designer.setting.showStops')">
<el-checkbox v-model="optionModel.showStops"></el-checkbox> <el-switch v-model="optionModel.showStops"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/field-slider/vertical-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.vertical')"> <el-form-item :label="i18nt('designer.setting.vertical')">
<el-checkbox v-model="optionModel.vertical"></el-checkbox> <el-switch v-model="optionModel.vertical"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/filterable-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.filterable')"> <el-form-item :label="i18nt('designer.setting.filterable')">
<el-checkbox v-model="optionModel.filterable"></el-checkbox> <el-switch v-model="optionModel.filterable"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/hidden-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.hidden')"> <el-form-item :label="i18nt('designer.setting.hidden')">
<el-checkbox v-model="optionModel.hidden"></el-checkbox> <el-switch v-model="optionModel.hidden"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/labelHidden-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.labelHidden')"> <el-form-item :label="i18nt('designer.setting.labelHidden')">
<el-checkbox v-model="optionModel.labelHidden"></el-checkbox> <el-switch v-model="optionModel.labelHidden"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/multiple-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.multiple')"> <el-form-item :label="i18nt('designer.setting.multiple')">
<el-checkbox v-model="optionModel.multiple" @change="onMultipleSelected"></el-checkbox> <el-switch v-model="optionModel.multiple" @change="onMultipleSelected"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/multipleSelect-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.multipleSelect')"> <el-form-item :label="i18nt('designer.setting.multipleSelect')">
<el-checkbox v-model="optionModel.multipleSelect"></el-checkbox> <el-switch v-model="optionModel.multipleSelect"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/readonly-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.readonly')"> <el-form-item :label="i18nt('designer.setting.readonly')">
<el-checkbox v-model="optionModel.readonly"></el-checkbox> <el-switch v-model="optionModel.readonly"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/remote-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.remote')"> <el-form-item :label="i18nt('designer.setting.remote')">
<el-checkbox v-model="optionModel.remote" @change="onRemoteChange"></el-checkbox> <el-switch v-model="optionModel.remote" @change="onRemoteChange"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/required-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.required')"> <el-form-item :label="i18nt('designer.setting.required')">
<el-checkbox v-model="optionModel.required"></el-checkbox> <el-switch v-model="optionModel.required"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/showFileList-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.showFileList')"> <el-form-item :label="i18nt('designer.setting.showFileList')">
<el-checkbox v-model="optionModel.showFileList"></el-checkbox> <el-switch v-model="optionModel.showFileList"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/showPassword-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.showPassword')" v-if="optionModel.type === 'password'"> <el-form-item :label="i18nt('designer.setting.showPassword')" v-if="optionModel.type === 'password'">
<el-checkbox v-model="optionModel.showPassword"></el-checkbox> <el-switch v-model="optionModel.showPassword"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/showWordLimit-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.showWordLimit')"> <el-form-item :label="i18nt('designer.setting.showWordLimit')">
<el-checkbox v-model="optionModel.showWordLimit"></el-checkbox> <el-switch v-model="optionModel.showWordLimit"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

2
src/components/form-designer/setting-panel/property-editor/withCredentials-editor.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-form-item :label="i18nt('designer.setting.withCredentials')"> <el-form-item :label="i18nt('designer.setting.withCredentials')">
<el-checkbox v-model="optionModel.withCredentials"></el-checkbox> <el-switch v-model="optionModel.withCredentials"></el-switch>
</el-form-item> </el-form-item>
</template> </template>

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

@ -647,11 +647,15 @@
} }
.left-toolbar { .left-toolbar {
display: flex;
margin-top: 4px;
float: left; float: left;
font-size: 16px; font-size: 16px;
} }
.right-toolbar { .right-toolbar {
display: flex;
margin-top: 5px;
float: right; float: right;
:deep(.el-button--text) { :deep(.el-button--text) {

73
src/utils/code-generator.js
View File

@ -8,8 +8,8 @@ export const generateCode = function(formJson, codeType= 'vue') {
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>VForm Demo</title> <title>VForm Demo</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<link rel="stylesheet" href="https://ks3-cn-beijing.ksyun.com/vform2021/VFormRender.css?t=20210720"> <link rel="stylesheet" href="https://ks3-cn-beijing.ksyun.com/vform3/render.style.css?t=20220129">
<style type="text/css"> <style type="text/css">
</style> </style>
</head> </head>
@ -21,24 +21,18 @@ export const generateCode = function(formJson, codeType= 'vue') {
<el-button type="primary" @click="submitForm">Submit</el-button> <el-button type="primary" @click="submitForm">Submit</el-button>
</div> </div>
<script type="text/javascript"> <script src="//unpkg.com/vue@next"></script>
if (!!window.ActiveXObject || "ActiveXObject" in window) { //IE load polyfill.js for Promise <script src="//unpkg.com/element-plus"></script>
var scriptEle = document.createElement("script"); <script src="https://ks3-cn-beijing.ksyun.com/vform3/render.umd.js?t=20220129"></script>
scriptEle.type = "text/javascript";
scriptEle.src = "https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"
document.body.appendChild(scriptEle)
}
</script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://ks3-cn-beijing.ksyun.com/vform2021/VFormRender.umd.min.js?t=20210720"></script>
<script> <script>
new Vue({ const { createApp } = Vue;
el: '#app', const app = createApp({
data: { data() {
formJson: ${formJsonStr}, return {
formData: {}, formJson: ${formJsonStr},
optionData: {} formData: {},
optionData: {}
}
}, },
methods: { methods: {
submitForm: function() { submitForm: function() {
@ -52,6 +46,9 @@ export const generateCode = function(formJson, codeType= 'vue') {
} }
} }
}); });
app.use(ElementPlus)
app.use(VFormRender)
app.mount("#app");
</script> </script>
</body> </body>
</html>` </html>`
@ -64,26 +61,24 @@ export const generateCode = function(formJson, codeType= 'vue') {
<el-button type="primary" @click="submitForm">Submit</el-button> <el-button type="primary" @click="submitForm">Submit</el-button>
</div> </div>
</template> </template>
<script>
export default { <script setup>
data() { import { ref, reactive } from 'vue'
return { import { ElMessage } from 'element-plus'
formJson: ${formJsonStr},
formData: {}, const formJson = reactive(${formJsonStr})
optionData: {} const formData = reactive({})
} const optionData = reactive({})
}, const vFormRef = ref(null)
methods: {
submitForm() { const submitForm = () => {
this.$refs.vFormRef.getFormData().then(formData => { vFormRef.value.getFormData().then(formData => {
// Form Validation OK // Form Validation OK
alert( JSON.stringify(formData) ) alert( JSON.stringify(formData) )
}).catch(error => { }).catch(error => {
// Form Validation failed // Form Validation failed
this.$message.error(error) ElMessage.error(error)
}) })
}
}
} }
</script>` </script>`

5
vite-lib-render.config.js
View File

@ -14,7 +14,8 @@ export default defineConfig({
vueJsx({}), vueJsx({}),
//解决引入commonjs模块后打包出现的{'default' is not exported by XXX}错误!! //解决引入commonjs模块后打包出现的{'default' is not exported by XXX}错误!!
commonjs(), commonjs({requireReturnsDefault: true}), /* 配置requireReturnsDefault属性，
解决打包后引入VForm出现的"Axios is not a constructor"错！！ */
viteSvgIcons({ viteSvgIcons({
// Specify the icon folder to be cached // Specify the icon folder to be cached
@ -50,7 +51,7 @@ export default defineConfig({
lib: { lib: {
entry: resolve(__dirname, 'install-render.js'), entry: resolve(__dirname, 'install-render.js'),
name: 'VFormRender', name: 'VFormRender',
fileName: (format) => `VFormRender.${format}.js` fileName: (format) => `render.${format}.js`
}, },
rollupOptions: { rollupOptions: {
// 确保外部化处理那些你不想打包进库的依赖 // 确保外部化处理那些你不想打包进库的依赖

2
vite-lib.config.js
View File

@ -55,7 +55,7 @@ export default defineConfig({
lib: { lib: {
entry: resolve(__dirname, 'install.js'), entry: resolve(__dirname, 'install.js'),
name: 'VFormDesigner', name: 'VFormDesigner',
fileName: (format) => `VFormDesigner.${format}.js` fileName: (format) => `designer.${format}.js`
}, },
rollupOptions: { rollupOptions: {
// 确保外部化处理那些你不想打包进库的依赖 // 确保外部化处理那些你不想打包进库的依赖