修复iView版本部分CSS样式问题
vdpAdmin
parent
04dff4ebfc
commit
fcb2efd949
102
README-iview.md
102
README-iview.md
|
|
@ -31,112 +31,12 @@ npm run lib-render-iview
|
|||
```
|
||||
|
||||
### 浏览器兼容性
|
||||
```Chrome（及同内核的浏览器如QQ浏览器、360浏览器等等），Firefox，Safari，IE 11```
|
||||
```Chrome（及同内核的浏览器如QQ浏览器、360浏览器等等），Edge, Firefox，Safari，IE 11```
|
||||
|
||||
<br/>
|
||||
|
||||
### 跟Vue项目集成
|
||||
|
||||
|
||||
|
||||
###### 打包
|
||||
|
||||
```
|
||||
//VFromDesigner:
|
||||
npm run lib-iview
|
||||
//VFromRender
|
||||
npm run lib-render-iview
|
||||
```
|
||||
|
||||
####### 使用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)
|
||||
}).$mount('#app')
|
||||
```
|
||||
2. 在Vue模板中使用组件
|
||||
```
|
||||
<template>
|
||||
<v-form-designer></v-form-designer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
body {
|
||||
margin: 0; /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
|
||||
}
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
####### 使用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模板中使用组件
|
||||
```
|
||||
<template>
|
||||
<div>
|
||||
<v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
|
||||
</v-form-render>
|
||||
<el-button type="primary" @click="submitForm">Submit</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formJson: {"widgetList":[],"formConfig":{"labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":""}},
|
||||
formData: {},
|
||||
optionData: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitForm() {
|
||||
this.$refs.vFormRef.getFormData().then(formData => {
|
||||
// Form Validation OK
|
||||
alert( JSON.stringify(formData) )
|
||||
}).catch(error => {
|
||||
// Form Validation failed
|
||||
this.$message.error(error)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
|
||||
<br/>
|
||||
|
||||
#### 1. 安装包
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ npm run lib-render
|
|||
```
|
||||
|
||||
### 浏览器兼容性
|
||||
```Chrome（及同内核的浏览器如QQ浏览器、360浏览器等等），Firefox，Safari，IE 11```
|
||||
```Chrome（及同内核的浏览器如QQ浏览器、360浏览器等等），Edge, Firefox，Safari，IE 11```
|
||||
|
||||
<br/>
|
||||
|
||||
|
|
@ -95,6 +95,8 @@ body {
|
|||
</style>
|
||||
```
|
||||
|
||||
<br/>
|
||||
|
||||
#### 4. 在Vue模板中使用表单渲染器组件
|
||||
```html
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "variant-form",
|
||||
"version": "2.0.0",
|
||||
"version": "2.0.1",
|
||||
"private": false,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve --open src/main.js",
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<Header class="main-header">
|
||||
<div class="float-left main-title">
|
||||
<img src="../../assets/vform-logo.png" @click="openHome">
|
||||
<span class="bold">VariantForm Pro</span> {{i18nt('application.productTitle')}} <span class="version-span">Ver {{vFormVersion}}</span>
|
||||
<span class="bold">VariantForm (iView)</span> {{i18nt('application.productTitle')}} <span class="version-span">Ver {{vFormVersion}}</span>
|
||||
</div>
|
||||
<div class="float-right external-link">
|
||||
<Dropdown @on-click="handleLanguageChanged">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</FormItem>
|
||||
<FormItem :label="i18nt('designer.setting.labelAlign')"
|
||||
v-if="hasConfig('label') && !noLabelSetting && (selectedWidget.type !== 'button')">
|
||||
<RadioGroup v-model="optionModel.labelAlign" class="radio-group-custom">
|
||||
<RadioGroup v-model="optionModel.labelAlign" class="radio-group-custom" type="button" button-style="solid">
|
||||
<Radio label="label-left-align">
|
||||
{{i18nt('designer.setting.leftAlign')}}
|
||||
</Radio>
|
||||
|
|
@ -677,7 +677,7 @@
|
|||
</FormItem>
|
||||
<FormItem :label="i18nt('designer.setting.labelAlign')"
|
||||
v-if="hasConfig('labelAlign')">
|
||||
<RadioGroup v-model="optionModel.labelAlign" class="radio-group-custom">
|
||||
<RadioGroup v-model="optionModel.labelAlign" class="radio-group-custom" type="button" button-style="solid">
|
||||
<Radio label="label-left-align">
|
||||
{{i18nt('designer.setting.leftAlign')}}
|
||||
</Radio>
|
||||
|
|
@ -858,7 +858,7 @@
|
|||
</Select>
|
||||
</FormItem>
|
||||
<FormItem :label="i18nt('designer.setting.labelPosition')">
|
||||
<RadioGroup v-model="formConfig.labelPosition" class="radio-group-custom">
|
||||
<RadioGroup v-model="formConfig.labelPosition" class="radio-group-custom" type="button" button-style="solid">
|
||||
<Radio label="left">{{i18nt('designer.setting.leftPosition')}}
|
||||
</Radio>
|
||||
<Radio label="top">{{i18nt('designer.setting.topPosition')}}
|
||||
|
|
@ -866,7 +866,7 @@
|
|||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem :label="i18nt('designer.setting.labelAlign')">
|
||||
<RadioGroup v-model="formConfig.labelAlign" class="radio-group-custom">
|
||||
<RadioGroup v-model="formConfig.labelAlign" class="radio-group-custom" type="button" button-style="solid">
|
||||
<Radio label="label-left-align">{{i18nt('designer.setting.leftAlign')}}
|
||||
</Radio>
|
||||
<Radio label="label-center-align">
|
||||
|
|
@ -1774,6 +1774,10 @@
|
|||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
::v-deep .ivu-radio-wrapper {
|
||||
padding: 0 7px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .ivu-form-item{
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export const DESIGNER_OPTIONS = {
|
|||
|
||||
}
|
||||
|
||||
export const VARIANT_FORM_VERSION = '2.0.0'
|
||||
export const VARIANT_FORM_VERSION = '2.0.1'
|
||||
|
||||
//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'
|
||||
|
|
|
|||
Loading…
Reference in New Issue