github
/
variant-form
mirror of https://github.com/vform666/variant-form
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

修复合并iView后的些许bug

pull/3/head
vdpAdmin 2021-09-29 15:52:17 +08:00
parent f44ac9a57f
commit d7acd839f7
16 changed files with 63 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
README.md
View File

@ -1,5 +1,5 @@
# Variant Form
#### 一款高效的Vue表单，可视化设计，一键生成源码，享受更多摸鱼时间。
#### 一款高效的Vue低代码表单，可视化设计，一键生成源码，享受更多摸鱼时间。
![image](https://ks3-cn-beijing.ksyuncs.com/vform-static/img/vform_demo.gif)
@ -37,33 +37,44 @@ npm run lib-render
### 跟Vue项目集成
<br/>
#### 1. 安装包
```bash
npm i vform-builds
```
或
```bash
yarn add vform-builds
```
####### 打包
```
//VFromDesigner:
npm run lib-iview
//VFromRender
npm run lib-render-iview
```
<br/>
#### 2. 引入并全局注册VForm组件
```javascript
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui' //引入element-ui库
import VForm from 'vform-builds' //引入VForm库
import 'element-ui/lib/theme-chalk/index.css' //引入element-ui样式
import 'vform-builds/dist/VFormDesigner.css' //引入VForm样式
Vue.config.productionTip = false
Vue.use(ElementUI) //全局注册element-ui
Vue.use(VForm) //全局注册VForm(同时注册了v-form-designer和v-form-render组件)
####### 使用vFormDesigner的lib包
1. main.js全局注册
```
...
import ViewUI from 'view-design';
import VFormDesigner from './{YOURPATH}/VFormDesigner.umd.min.js'
import './{YOURPATH}/VFormDesigner.css'
...
Vue.use(VFormDesigner);
Vue.use(ViewUI, {size:'small'});
...
new Vue({
render: h => h(App)
render: h => h(App),
}).$mount('#app')
```
2. 在Vue模板中使用组件
```
<br/>
#### 3. 在Vue模板中使用表单设计器组件
```html
<template>
<v-form-designer></v-form-designer>
</template>
@ -81,28 +92,11 @@ new Vue({
body {
margin: 0; /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
}
</style>
```
####### 使用vFormRender的lib包
1. main.js全局注册
```
...
import ViewUI from 'view-design';
import VFormRender from './{YOURPATH}/VFormRender.umd.min.js'
import './{YOURPATH}/VFormRender.css'
...
Vue.use(VFormRender);
Vue.use(ViewUI, {size:'small'});
...
new Vue({
render: h => h(App)
}).$mount('#app')
```
2. 在Vue模板中使用组件
```
#### 4. 在Vue模板中使用表单渲染器组件
```html
<template>
<div>
<v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
@ -134,66 +128,6 @@ new Vue({
</script>
```
<br/>
#### 1. 安装包
```bash
npm i vform-builds
```
或
```bash
yarn add vform-builds
```
<br/>
#### 2. 引入并全局注册VForm组件
```
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui' //引入element-ui库
import VForm from 'vform-builds' //引入VForm库
import 'element-ui/lib/theme-chalk/index.css' //引入element-ui样式
import 'vform-builds/dist/VFormDesigner.css' //引入VForm样式
Vue.config.productionTip = false
Vue.use(ElementUI) //全局注册element-ui
Vue.use(VForm) //全局注册VForm(同时注册了v-form-designer和v-form-render组件)
new Vue({
render: h => h(App),
}).$mount('#app')
```
<br/>
#### 3. 在Vue模板中使用表单设计器组件
```bash
<template>
<v-form-designer></v-form-designer>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style lang="scss">
body {
margin: 0; /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
}
</style>
```
<br/>
### 资源链接
@ -209,6 +143,8 @@ Github仓库：<a href="https://github.com/vform666/variant-form" target="_blank
Gitee备份仓库：<a href="https://gitee.com/vdpadmin/variant-form" target="_blank">https://gitee.com/vdpadmin/variant-form</a>
更新日志：<a href="http://www.vform666.com/pages/changelog/" target="_blank">http://www.vform666.com/pages/changelog/</a>
技术交流群：微信搜索“vformAdmin”，或者扫如下二维码加群
![image](https://ks3-cn-beijing.ksyuncs.com/vform-static/img/vx-qrcode-242.png)

2
install-iview.js
View File

@ -13,10 +13,12 @@ import '@/iconfont/iconfont.css'
VFormDesigner.install = function (Vue) {
Vue.component(VFormDesigner.name, VFormDesigner)
Vue.component('container-widget', ContainerWidget)
}
VFormRender.install = function (Vue) {
Vue.component(VFormRender.name, VFormRender)
Vue.component('container-item', ContainerItem)
}
const components = [

1
install-render-iview.js
View File

@ -4,6 +4,7 @@ import axios from "axios";
VFormRender.install = function (Vue) {
Vue.component(VFormRender.name, VFormRender)
Vue.component('container-item', ContainerItem)
}
const components = [

1
install-render.js
View File

@ -4,6 +4,7 @@ import axios from "axios";
VFormRender.install = function (Vue) {
Vue.component(VFormRender.name, VFormRender)
Vue.component('container-item', ContainerItem)
}
const components = [

2
install.js
View File

@ -11,10 +11,12 @@ import '@/iconfont/iconfont.css'
VFormDesigner.install = function (Vue) {
Vue.component(VFormDesigner.name, VFormDesigner)
Vue.component('container-widget', ContainerWidget)
}
VFormRender.install = function (Vue) {
Vue.component(VFormRender.name, VFormRender)
Vue.component('container-item', ContainerItem)
}
const components = [

8
package.json
View File

@ -1,16 +1,16 @@
{
"name": "variant-form",
"version": "1.1.2",
"version": "2.0.0",
"private": false,
"scripts": {
"serve": "vue-cli-service serve --open src/main.js",
"serve-iview": "vue-cli-service serve --open src/main-iview.js",
"build": "vue-cli-service build --report --dest dist/build",
"build-iview": "vue-cli-service build --report --dest dist/build-iview",
"build-iview": "vue-cli-service build --report --dest dist/build-iview",
"lib": "vue-cli-service build --report --target lib --dest dist/lib --name VFormDesigner install.js",
"lib-render": "vue-cli-service build --report --target lib --dest dist/lib-render --name VFormRender install-render.js",
"lib-iview": "vue-cli-service build --report --target lib --dest dist/lib-iview --name VFormDesigner install-iview.js",
"lib-render-iview": "vue-cli-service build --report --target lib --dest dist/lib-render-iview --name VFormRender install-render-iview.js",
"lib-iview": "vue-cli-service build --report --target lib --dest dist/lib-iview --name VFormDesigner-iView install-iview.js",
"lib-render-iview": "vue-cli-service build --report --target lib --dest dist/lib-render-iview --name VFormRender-iView install-render-iview.js",
"lint": "vue-cli-service lint"
},
"dependencies": {

4
src/components-iview/code-editor/index.vue
View File

@ -113,11 +113,11 @@
},
setJsonMode() {
this.aceEditor?.getSession().setMode('ace/mode/json')
this.aceEditor.getSession().setMode('ace/mode/json')
},
setCssMode() {
this.aceEditor?.getSession().setMode('ace/mode/css')
this.aceEditor.getSession().setMode('ace/mode/css')
},
}

2
src/components-iview/form-designer/designer.js
View File

@ -1,7 +1,7 @@
/**
* author: vformAdmin
* email: vdpadmin@163.com
* website: https://www.yuque.com/variantdev/vform
* website: http://www.vform666.com/
* date: 2021.08.18
* remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
*/

2
src/components-iview/form-designer/index.vue
View File

@ -187,6 +187,8 @@
img {
cursor: pointer;
width: 36px;
height: 36px;
}
span.bold {

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

@ -69,7 +69,7 @@
v-model="showImportDialogFlag" :closable="true" class="small-padding-dialog" draggable
:mask-closable="false" >
<FormItem :label-width="0">
<el-input type="textarea" rows="10" v-model="optionLines"></el-input>
<Input type="textarea" :rows="10" v-model="optionLines"></Input>
</FormItem>
<div slot="footer" class="dialog-footer">
<Button size="default" type="primary" @click="saveOptions">{{i18nt('designer.hint.confirm')}}

4
src/components/code-editor/index.vue
View File

@ -112,11 +112,11 @@
},
setJsonMode() {
this.aceEditor?.getSession().setMode('ace/mode/json')
this.aceEditor.getSession().setMode('ace/mode/json')
},
setCssMode() {
this.aceEditor?.getSession().setMode('ace/mode/css')
this.aceEditor.getSession().setMode('ace/mode/css')
},
}

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

@ -1,7 +1,7 @@
/**
* author: vformAdmin
* email: vdpadmin@163.com
* website: https://www.yuque.com/variantdev/vform
* website: http://www.vform666.com/
* date: 2021.08.18
* remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
*/

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

@ -2,7 +2,7 @@
/**
* author: vformAdmin
* email: vdpadmin@163.com
* website: https://www.yuque.com/variantdev/vform
* website: http://www.vform666.com/
* date: 2021.08.18
* remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
*/

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

@ -2,7 +2,7 @@
/**
* author: vformAdmin
* email: vdpadmin@163.com
* website: https://www.yuque.com/variantdev/vform
* website: http://www.vform666.com/
* date: 2021.08.18
* remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
*/
@ -206,6 +206,8 @@
img {
cursor: pointer;
width: 36px;
height: 36px;
}
span.bold {

2
src/components/form-render/index.vue
View File

@ -2,7 +2,7 @@
/**
* author: vformAdmin
* email: vdpadmin@163.com
* website: https://www.yuque.com/variantdev/vform
* website: http://www.vform666.com/
* date: 2021.08.18
* remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
*/

2
src/utils/config.js
View File

@ -8,7 +8,7 @@ export const DESIGNER_OPTIONS = {
}
export const VARIANT_FORM_VERSION = '1.1.2'
export const VARIANT_FORM_VERSION = '2.0.0'
//export const ACE_BASE_PATH = 'public/lib/ace/src-min-noconflict'
export const ACE_BASE_PATH = 'https://ks3-cn-beijing.ksyun.com/vform2021/ace-mini'