diff --git a/README.md b/README.md
index 4578a7b..81f039d 100644
--- a/README.md
+++ b/README.md
@@ -1,55 +1,139 @@
-# Variant Form 3 Beta For Vue 3.x
-#### 一款高效的Vue低代码表单,可视化设计,一键生成源码,享受更多摸鱼时间。
+# Variant Form 3 For Vue 3.x
+#### 一款高效的Vue 3低代码表单,可视化设计,一键生成源码,享受更多摸鱼时间。
-### 友情链接
-[Fantastic-admin](https://hooray.gitee.io/fantastic-admin/) —— 一款开箱即用的 Vue 中后台管理系统框架(支持Vue2/Vue3)
-
-[REBUILD](https://getrebuild.com/) —— 高度可定制化的企业管理系统
-
-### 功能一览
-```
-> 拖拽式可视化表单设计;
-> 支持PC、Pad、H5三种布局;
-> 支持运行时动态加载表单;
-> 支持表单复杂交互控制;
-> 支持自定义CSS样式;
-> 支持自定义校验逻辑;
-> 支持国际化多语言;
-> 可导出Vue组件、HTML源码;
-> 可导出Vue的SFC单文件组件;
-> 支持开发自定义组件;
-> 支持响应式自适应布局;
-> 支持VS Code插件;
-> 更多功能等你探究...;
-```
-
-
-### 安装依赖
-```
-npm install --registry=https://registry.npm.taobao.org
-```
-
-### 开发调试
-```
-npm run serve
-```
-
-### 生产打包
-```
-npm run build
-```
-
-### 表单设计器 + 表单渲染器打包
-```
-npm run lib
-```
-
-### 表单渲染器打包
-```
-npm run lib-render
-```
-
-### 浏览器兼容性
-```Chrome(及同内核的浏览器如QQ浏览器、360浏览器等等),Firefox,Safari```
+![image](https://vform2021.oss-cn-beijing.aliyuncs.com/vform_demo.gif?versionId=CAEQGBiBgIDst4zj4hciIDQyYTkyOGY1ZGJiODQ4YTk5ZjkxMGIwMDY0MmY2M2Ri)
+
+#### 立即体验
+ [在线Demo](http://120.92.142.115/vform3/)
+
+ ### 友情链接
+ [Fantastic-admin](https://hooray.gitee.io/fantastic-admin/) —— 一款开箱即用的 Vue 中后台管理系统框架(支持Vue2/Vue3)
+
+ [REBUILD](https://getrebuild.com/) —— 高度可定制化的企业管理系统
+
+ ### 功能一览
+ ```
+ > 拖拽式可视化表单设计;
+ > 支持PC、Pad、H5三种布局;
+ > 支持运行时动态加载表单;
+ > 支持表单复杂交互控制;
+ > 支持自定义CSS样式;
+ > 支持自定义校验逻辑;
+ > 支持国际化多语言;
+ > 可导出Vue组件、HTML源码;
+ > 可导出Vue的SFC单文件组件;
+ > 支持开发自定义组件;
+ > 支持响应式自适应布局;
+ > 支持VS Code插件;
+ > 更多功能等你探究...;
+ ```
+
+ ### 浏览器兼容性
+ ```Chrome(及同内核的浏览器如QQ浏览器、360浏览器等等),Firefox,Safari```
+
+
+
+ ### 跟Vue 3.x项目集成
+
+
+
+ #### 1. 安装包
+ ```bash
+ npm i vform3-builds
+ ```
+ 或
+ ```bash
+ yarn add vform3-builds
+ ```
+
+
+
+ #### 2. 引入并全局注册VForm 3组件
+ ```
+ import { createApp } from 'vue'
+ import App from './App.vue'
+
+ import ElementPlus from 'element-plus' //引入element-plus库
+ import 'element-plus/dist/index.css' //引入element-plus样式
+
+ import VForm3 from 'vform3-builds' //引入VForm 3库
+ import 'vform3-builds/dist/designer.style.css' //引入VForm3样式
+
+ const app = createApp(App)
+ app.use(ElementPlus) //全局注册element-plus
+ app.use(VForm3) //全局注册VForm 3(同时注册了v-form-designer和v-form-render组件)
+
+ app.mount('#app')
+ ```
+
+
+
+ #### 3. 在Vue 3.x模板中使用表单设计器组件
+ ```bash
+
+
+
+
+
+
+
+ ```
+
+
+
+ #### 4. 在Vue 3.x模板中使用表单渲染器组件
+ ```html
+
+
+
+
+ Submit
+
+
+
+ ```
+
+
+
+ ### 资源链接
+
+
+ 文档官网:https://www.vform666.com/
+
+ 在线演示:http://120.92.142.115/vform3/
+
+ Github仓库:https://github.com/vform666/variant-form3-vite
+
+ Gitee仓库:https://gitee.com/vdpadmin/variant-form3-vite
+
+ 更新日志:https://www.vform666.com/pages/changelog/
+
+ 技术交流群:微信搜索“vformAdmin”,或者扫如下二维码加群
+
+ ![image](https://ks3-cn-beijing.ksyuncs.com/vform-static/img/vx-qrcode-242.png)
diff --git a/index.html b/index.html
index 13a52ee..8ee72a1 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
- Variant Form
+ Variant Form 3
diff --git a/package.json b/package.json
index 3da2efc..23365bb 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
"ace-builds": "^1.4.12",
"babel-eslint": "^10.1.0",
"mvdir": "^1.0.21",
+ "rollup-plugin-external-globals": "^0.6.1",
"rollup-plugin-visualizer": "^5.5.2",
"sass": "^1.45.0",
"vite": "^2.7.2",
diff --git a/src/components/code-editor/index.vue b/src/components/code-editor/index.vue
index b8f99cf..cbfa8dc 100644
--- a/src/components/code-editor/index.vue
+++ b/src/components/code-editor/index.vue
@@ -78,11 +78,6 @@
//编辑时同步数据
this.aceEditor.getSession().on('change',(ev)=>{
- /*
- //this.$emit('update:value', this.aceEditor.getValue()) // 触发更新事件, 实现.sync双向绑定!!
- this.$emit('input', this.aceEditor.getValue())
- */
-
this.$emit('update:modelValue', this.aceEditor.getValue())
})
},
diff --git a/src/components/form-designer/designer.js b/src/components/form-designer/designer.js
index 4402f89..06590b7 100644
--- a/src/components/form-designer/designer.js
+++ b/src/components/form-designer/designer.js
@@ -817,12 +817,10 @@ export function createDesigner(vueInstance) {
},
emitEvent(evtName, evtData) { //用于兄弟组件发射事件
- //this.vueInstance.$emit(evtName, evtData)
eventBus.$emit(evtName, evtData)
},
handleEvent(evtName, callback) { //用于兄弟组件接收事件
- //this.vueInstance.$on(evtName, (data) => callback(data))
eventBus.$on(evtName, (data) => callback(data))
},
diff --git a/src/components/form-designer/form-widget/container-widget/table-cell-widget.vue b/src/components/form-designer/form-widget/container-widget/table-cell-widget.vue
index a56ef32..35583e4 100644
--- a/src/components/form-designer/form-widget/container-widget/table-cell-widget.vue
+++ b/src/components/form-designer/form-widget/container-widget/table-cell-widget.vue
@@ -226,12 +226,10 @@
},
mergeLeftCol() {
- //this.designer.mergeTableColumn(this.colArray, this.colIndex, true)
this.designer.mergeTableCol(this.rowArray, this.colArray, this.rowIndex, this.colIndex, true, this.widget)
},
mergeRightCol() {
- //this.designer.mergeTableColumn(this.colArray, this.colIndex, false)
this.designer.mergeTableCol(this.rowArray, this.colArray, this.rowIndex, this.colIndex, false, this.widget)
},
diff --git a/src/components/form-designer/form-widget/field-widget/fieldMixin.js b/src/components/form-designer/form-widget/field-widget/fieldMixin.js
index 4aff73e..2f7a7ff 100644
--- a/src/components/form-designer/form-widget/field-widget/fieldMixin.js
+++ b/src/components/form-designer/form-widget/field-widget/fieldMixin.js
@@ -88,12 +88,6 @@ export default {
},
initEventHandler() {
- // eventBus.$on('setFormData', (newFormData) => {
- // console.log('formModel of globalModel----------', this.globalModel.formModel)
- // if (!this.subFormItemFlag) {
- // this.setValue(newFormData[this.field.options.name])
- // }
- // })
this.on$('setFormData', (newFormData) => {
console.log('formModel of globalModel----------', this.globalModel.formModel)
if (!this.subFormItemFlag) {
@@ -101,14 +95,6 @@ export default {
}
})
- // eventBus.$on('field-value-changed', (values) => {
- // if (!!this.subFormItemFlag) {
- // let subFormData = this.formModel[this.subFormName]
- // this.handleOnChangeForSubForm(values[0], values[1], subFormData, this.subFormRowId)
- // } else {
- // this.handleOnChange(values[0], values[1])
- // }
- // })
this.on$('field-value-changed', (values) => {
if (!!this.subFormItemFlag) {
let subFormData = this.formModel[this.subFormName]
@@ -118,12 +104,6 @@ export default {
}
})
- /* 监听重新加载选项事件 */
- // eventBus.$on('reloadOptionItems', (widgetNames) => {
- // if ((widgetNames.length === 0) || (widgetNames.indexOf(this.field.options.name) > -1)) {
- // this.initOptionItems(true)
- // }
- // })
this.on$('reloadOptionItems', (widgetNames) => {
if ((widgetNames.length === 0) || (widgetNames.indexOf(this.field.options.name) > -1)) {
this.initOptionItems(true)
@@ -308,15 +288,11 @@ export default {
//--------------------- 事件处理 begin ------------------//
emitFieldDataChange(newValue, oldValue) {
- //this.$emit('field-value-changed', [newValue, oldValue])
- //eventBus.$emit('field-value-changed', [newValue, oldValue]) //此处应该加事件触发组件判断,非本组件(其他组件)触发的事件应该跳过,否则会出现事件无限循环!!
-
this.emit$('field-value-changed', [newValue, oldValue])
- // /* 必须用dispatch向指定父组件派发消息!! */
+ /* 必须用dispatch向指定父组件派发消息!! */
this.dispatch('VFormRender', 'fieldChange',
[this.field.options.name, newValue, oldValue, this.subFormName, this.subFormRowIndex])
- // eventBus.$emit('fieldChange', [this.field.options.name, newValue, oldValue, this.subFormName, this.subFormRowIndex])
},
syncUpdateFormModel(value) {
@@ -559,12 +535,10 @@ export default {
},
setUploadHeader(name, value) {
- //this.$set(this.uploadHeaders, name, value)
this.uploadHeaders[name] = value
},
setUploadData(name, value) {
- //this.$set(this.uploadData, name, value)
this.uploadData[name] = value
},
diff --git a/src/components/form-render/container-item/sub-form-item.vue b/src/components/form-render/container-item/sub-form-item.vue
index 7ce8482..3b04c79 100644
--- a/src/components/form-render/container-item/sub-form-item.vue
+++ b/src/components/form-render/container-item/sub-form-item.vue
@@ -192,7 +192,6 @@
return
}
- //eventBus.$on('setFormData', (newFormData) => {
this.on$('setFormData', (newFormData) => {
this.initRowIdData(false)
this.initFieldSchemaData()
diff --git a/src/components/form-render/index.vue b/src/components/form-render/index.vue
index 0c43bd1..3431dba 100644
--- a/src/components/form-render/index.vue
+++ b/src/components/form-render/index.vue
@@ -221,15 +221,12 @@
}
})
- //this.$set(this.formDataModel, subFormName, [subFormDataRow]) //
this.formDataModel[subFormName] = [subFormDataRow]
} else {
- //this.$set(this.formDataModel, subFormName, []) //
this.formDataModel[subFormName] = []
}
} else {
let initialValue = this.formData[subFormName]
- //this.$set(this.formDataModel, subFormName, deepClone(initialValue))
this.formDataModel[subFormName] = deepClone(initialValue)
}
} else if ((wItem.type === 'grid-col') || (wItem.type === 'table-cell')) {
@@ -247,21 +244,16 @@
}
} else if (!!wItem.formItemFlag) {
if (!this.formData.hasOwnProperty(wItem.options.name)) {
- //this.formDataModel[wItem.options.name] = '' //这种写法不支持对象属性响应式更新,必须用$set方法!!
- //this.$set(this.formDataModel, wItem.options.name, wItem.options.defaultValue) //设置字段默认值
this.formDataModel[wItem.options.name] = wItem.options.defaultValue
} else {
let initialValue = this.formData[wItem.options.name]
- //this.$set(this.formDataModel, wItem.options.name, deepClone(initialValue))
this.formDataModel[wItem.options.name] = deepClone(initialValue)
}
}
},
addFieldChangeEventHandler() {
- //eventBus.$off('fieldChange') //移除原有事件监听
this.off$('fieldChange') //移除原有事件监听
- //eventBus.$on('fieldChange', (fieldName, newValue, oldValue, subFormName, subFormRowIndex) => {
this.on$('fieldChange', (fieldName, newValue, oldValue, subFormName, subFormRowIndex) => {
this.handleFieldDataChange(fieldName, newValue, oldValue, subFormName, subFormRowIndex)
this.$emit('formChange', fieldName, newValue, oldValue, this.formDataModel, subFormName, subFormRowIndex)
@@ -269,9 +261,7 @@
},
addFieldValidateEventHandler() {
- //eventBus.$off('fieldValidation') //移除原有事件监听
this.off$('fieldValidation') //移除原有事件监听
- //eventBus.$on('fieldValidation', (fieldName) => {
this.on$('fieldValidation', (fieldName) => {
this.$refs.renderForm.validateField(fieldName)
})
@@ -366,10 +356,8 @@
this.clearFormDataModel() //上行代码有问题,会导致表单校验失败,故保留原对象引用只清空对象属性!!
this.buildFormModel(newFormJsonObj.widgetList)
- //this.$set(this.formJsonObj, 'formConfig', newFormJsonObj.formConfig)
this.formJsonObj['formConfig'] = newFormJsonObj.formConfig
this._provided.formConfig = newFormJsonObj.formConfig //强制更新provide的formConfig对象
- //this.$set(this.formJsonObj, 'widgetList', newFormJsonObj.widgetList)
this.formJsonObj['widgetList'] = newFormJsonObj.widgetList
this.initFormObject()
diff --git a/vite-lib-render.config.js b/vite-lib-render.config.js
index 3575093..b6c645e 100644
--- a/vite-lib-render.config.js
+++ b/vite-lib-render.config.js
@@ -48,6 +48,7 @@ export default defineConfig({
},
build: {
+ minify: false, //
lib: {
entry: resolve(__dirname, 'install-render.js'),
name: 'VFormRender',
@@ -60,7 +61,7 @@ export default defineConfig({
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
globals: {
vue: 'Vue',
- 'element-plus': 'ELEMENT',
+ 'element-plus': 'ElementPlus',
}
}
}
diff --git a/vite-lib.config.js b/vite-lib.config.js
index c47dd12..c8d77dd 100644
--- a/vite-lib.config.js
+++ b/vite-lib.config.js
@@ -64,7 +64,7 @@ export default defineConfig({
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
globals: {
vue: 'Vue',
- 'element-plus': 'ELEMENT',
+ 'element-plus': 'ElementPlus',
}
}
}
diff --git a/vite.config.js b/vite.config.js
index 2a7fbbd..519d545 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,9 +4,11 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
import viteSvgIcons from 'vite-plugin-svg-icons'
import { resolve } from 'path'
import commonjs from '@rollup/plugin-commonjs'
+import externalGlobals from "rollup-plugin-external-globals"
// https://vitejs.dev/config/
export default defineConfig({
+ base: '',
plugins: [
vue(),
@@ -14,7 +16,28 @@ export default defineConfig({
vueJsx({}),
//解决引入commonjs模块后打包出现的{'default' is not exported by XXX}错误!!
- commonjs(),
+ // commonjs(),
+ // commonjs({
+ // //exclude: ['node_modules/vue/dist/*.js'],
+ // requireReturnsDefault: true
+ // }),
+
+ // commonjs({requireReturnsDefault: (id) => {
+ // //console.log('aaa', id)
+ // if (!!id && id.indexOf('/sortablejs/') > -1) {
+ // return false
+ // } else {
+ // return (!!id && id.indexOf('/axios/') > -1)
+ // }
+ // }
+ // }),
+
+ /* 开启externalGlobals后,
+ 报错:TypeError: Cannot read properties of null (reading 'nodeType'),不知何故?? */
+ // externalGlobals({
+ // vue: "Vue",
+ // 'element-plus': 'ElementPlus',
+ // }),
viteSvgIcons({
// Specify the icon folder to be cached
@@ -46,16 +69,29 @@ export default defineConfig({
},
build: {
+ minify: false,
+ commonjsOptions: {
+ exclude: [
+ 'lib/vuedraggable/dist/vuedraggable.umd.js,', //引号前的逗号不能删,不知何故??
+ 'vue/dist/*.js'],
+ include: []
+ //requireReturnsDefault: true
+ },
rollupOptions: {
- // 确保外部化处理那些你不想打包进库的依赖
- external: ['vue', 'element-plus'],
- output: {
- // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
- globals: {
- vue: 'Vue',
- 'element-plus': 'ELEMENT',
- }
- }
+ // 指定生产打包入口文件为index.htm
+ input: {
+ main: resolve(__dirname, 'index.html'),
+ },
+
+ // // 确保外部化处理那些你不想打包进库的依赖
+ // external: ['vue', 'element-plus'],
+ // output: {
+ // // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
+ // globals: {
+ // vue: 'Vue', //报错:Failed to resolve module specifier "vue". Relative references must start with either
+ // 'element-plus': 'ElementPlus',
+ // }
+ // }
}
}