mini-form-render 0.0.5 → 0.0.7
Sign up to get free protection for your applications and to get access to all the features.
- package/.eslintrc.js +15 -15
- package/package.json +43 -43
- package/src/app.mpx +27 -27
- package/src/components/basic-input.mpx +35 -35
- package/src/components/basic-picker.mpx +79 -79
- package/src/components/form.mpx +141 -136
- package/src/pages/form-render.mpx +47 -47
- package/src/pages/index.mpx +51 -51
- package/src/pages/js-logic-render.mpx +59 -59
- package/src/pages/server-scheme.mpx +75 -75
- package/src/test/paint-form.js +43 -43
- package/src/test/scheme1.js +22 -22
- package/src/test/server-relation-scheme.js +33 -33
- package/static/wx/project.config.json +61 -61
- package/vue.config.js +16 -16
package/src/components/form.mpx
CHANGED
|
@@ -1,136 +1,141 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<view class="mini-form-container">
|
|
3
|
-
<view wx:for="{{scheme.properties}}" wx:key="key">
|
|
4
|
-
<view class="mini-form-item {{index !== scheme.properties.length - 1 ? 'retina-border-bottom' : ''}}">
|
|
5
|
-
<basic-picker wx:if="{{item.widget === 'picker'}}" item="{{item}}" wx:model="{{formRes[item.key]}}"/>
|
|
6
|
-
<basic-input wx:else item="{{item}}" wx:model="{{formRes[item.key]}}"/>
|
|
7
|
-
</view>
|
|
8
|
-
</view>
|
|
9
|
-
<!--<button bindtap="handleTap">提交</button>-->
|
|
10
|
-
</view>
|
|
11
|
-
</template>
|
|
12
|
-
|
|
13
|
-
<script>
|
|
14
|
-
import { toPureObject, createComponent } from '@mpxjs/core'
|
|
15
|
-
|
|
16
|
-
createComponent({
|
|
17
|
-
props: {
|
|
18
|
-
scheme: {
|
|
19
|
-
type: Object
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
data: {
|
|
23
|
-
formRes: {}
|
|
24
|
-
},
|
|
25
|
-
methods: {
|
|
26
|
-
parseScheme(scheme) {
|
|
27
|
-
const oldFormRes = this.formRes
|
|
28
|
-
this.formRes = {}
|
|
29
|
-
const properties = scheme.properties || []
|
|
30
|
-
properties.forEach(item => {
|
|
31
|
-
const key = item.key
|
|
32
|
-
this.$set(this.formRes, key, oldFormRes[key])
|
|
33
|
-
})
|
|
34
|
-
}
|
|
35
|
-
// handleTap() {
|
|
36
|
-
// console.log('formRes', this.formRes)
|
|
37
|
-
// }
|
|
38
|
-
},
|
|
39
|
-
watch: {
|
|
40
|
-
scheme: {
|
|
41
|
-
handler(scheme) {
|
|
42
|
-
this.parseScheme(scheme)
|
|
43
|
-
},
|
|
44
|
-
immediate: true
|
|
45
|
-
},
|
|
46
|
-
formRes: {
|
|
47
|
-
handler(newVal) {
|
|
48
|
-
const formResult = toPureObject(newVal)
|
|
49
|
-
// console.log('trigger form change event:', formResult)
|
|
50
|
-
this.triggerEvent('formchange', formResult)
|
|
51
|
-
},
|
|
52
|
-
deep: true
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
})
|
|
56
|
-
</script>
|
|
57
|
-
|
|
58
|
-
<style lang="stylus">
|
|
59
|
-
.mini-form-container
|
|
60
|
-
.mini-form-item
|
|
61
|
-
padding 24rpx 0
|
|
62
|
-
|
|
63
|
-
.form-item-title
|
|
64
|
-
font-size 30rpx
|
|
65
|
-
width 200rpx
|
|
66
|
-
color #333
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
@media
|
|
109
|
-
(-webkit-min-device-pixel-ratio
|
|
110
|
-
(min-resolution
|
|
111
|
-
&::before
|
|
112
|
-
border-radius: unit(borderRadius, px) *
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
1
|
+
<template>
|
|
2
|
+
<view class="mini-form-container">
|
|
3
|
+
<view wx:for="{{scheme.properties}}" wx:key="key">
|
|
4
|
+
<view class="mini-form-item {{index !== scheme.properties.length - 1 ? 'retina-border-bottom' : ''}}">
|
|
5
|
+
<basic-picker wx:if="{{item.widget === 'picker'}}" item="{{item}}" wx:model="{{formRes[item.key]}}"/>
|
|
6
|
+
<basic-input wx:else item="{{item}}" wx:model="{{formRes[item.key]}}"/>
|
|
7
|
+
</view>
|
|
8
|
+
</view>
|
|
9
|
+
<!--<button bindtap="handleTap">提交</button>-->
|
|
10
|
+
</view>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
import { toPureObject, createComponent } from '@mpxjs/core'
|
|
15
|
+
|
|
16
|
+
createComponent({
|
|
17
|
+
props: {
|
|
18
|
+
scheme: {
|
|
19
|
+
type: Object
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
data: {
|
|
23
|
+
formRes: {}
|
|
24
|
+
},
|
|
25
|
+
methods: {
|
|
26
|
+
parseScheme(scheme) {
|
|
27
|
+
const oldFormRes = this.formRes
|
|
28
|
+
this.formRes = {}
|
|
29
|
+
const properties = scheme.properties || []
|
|
30
|
+
properties.forEach(item => {
|
|
31
|
+
const key = item.key
|
|
32
|
+
this.$set(this.formRes, key, oldFormRes[key])
|
|
33
|
+
})
|
|
34
|
+
}
|
|
35
|
+
// handleTap() {
|
|
36
|
+
// console.log('formRes', this.formRes)
|
|
37
|
+
// }
|
|
38
|
+
},
|
|
39
|
+
watch: {
|
|
40
|
+
scheme: {
|
|
41
|
+
handler(scheme) {
|
|
42
|
+
this.parseScheme(scheme)
|
|
43
|
+
},
|
|
44
|
+
immediate: true
|
|
45
|
+
},
|
|
46
|
+
formRes: {
|
|
47
|
+
handler(newVal) {
|
|
48
|
+
const formResult = toPureObject(newVal)
|
|
49
|
+
// console.log('trigger form change event:', formResult)
|
|
50
|
+
this.triggerEvent('formchange', formResult)
|
|
51
|
+
},
|
|
52
|
+
deep: true
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
})
|
|
56
|
+
</script>
|
|
57
|
+
|
|
58
|
+
<style lang="stylus">
|
|
59
|
+
.mini-form-container
|
|
60
|
+
.mini-form-item
|
|
61
|
+
padding 24rpx 0
|
|
62
|
+
|
|
63
|
+
.form-item-title
|
|
64
|
+
font-size 30rpx
|
|
65
|
+
width 200rpx
|
|
66
|
+
color #333
|
|
67
|
+
|
|
68
|
+
@media(prefers-color-scheme: dark)
|
|
69
|
+
.mini-form-container
|
|
70
|
+
.form-item-title
|
|
71
|
+
color hsla(0, 0%, 100%, .8)
|
|
72
|
+
|
|
73
|
+
// 边框默认颜色
|
|
74
|
+
$defaultBorderColor = rgba(0, 0, 0, 0.18)
|
|
75
|
+
|
|
76
|
+
// retina 边框函数基础声明，不包含 border 部分，主要用于在 retina-border 函数里继承
|
|
77
|
+
.retina-border-basic
|
|
78
|
+
position: relative
|
|
79
|
+
&::before
|
|
80
|
+
content: ''
|
|
81
|
+
position: absolute
|
|
82
|
+
width: 100%
|
|
83
|
+
height: 100%
|
|
84
|
+
top: 0
|
|
85
|
+
left:0
|
|
86
|
+
transform-origin: left top
|
|
87
|
+
box-sizing: border-box
|
|
88
|
+
pointer-events: none
|
|
89
|
+
@media
|
|
90
|
+
(-webkit-min-device-pixel-ratio 2),
|
|
91
|
+
(min-resolution 2dppx)
|
|
92
|
+
&::before
|
|
93
|
+
width: 200%
|
|
94
|
+
height: 200%
|
|
95
|
+
transform: scale(.5)
|
|
96
|
+
@media
|
|
97
|
+
(-webkit-min-device-pixel-ratio 3),
|
|
98
|
+
(min-resolution 3dppx)
|
|
99
|
+
&::before
|
|
100
|
+
width: 300%
|
|
101
|
+
height: 300%
|
|
102
|
+
transform: scale(1 / 3)
|
|
103
|
+
|
|
104
|
+
// 设置圆角（如果圆角大于0，则添加圆角的代码）
|
|
105
|
+
retina-border-radius(borderRadius)
|
|
106
|
+
if unit(borderRadius, px) > 0
|
|
107
|
+
border-radius: borderRadius
|
|
108
|
+
@media
|
|
109
|
+
(-webkit-min-device-pixel-ratio 2),
|
|
110
|
+
(min-resolution 2dppx)
|
|
111
|
+
&::before
|
|
112
|
+
border-radius: unit(borderRadius, px) * 2
|
|
113
|
+
@media
|
|
114
|
+
(-webkit-min-device-pixel-ratio 3),
|
|
115
|
+
(min-resolution 3dppx)
|
|
116
|
+
&::before
|
|
117
|
+
border-radius: unit(borderRadius, px) * 3
|
|
118
|
+
|
|
119
|
+
// retina 边框函数声明
|
|
120
|
+
retina-border(borderWidth = 1px, borderStyle = solid, borderColor = $defaultBorderColor, borderRadius = 0)
|
|
121
|
+
@extends .retina-border-basic
|
|
122
|
+
retina-border-radius(borderRadius)
|
|
123
|
+
&::before
|
|
124
|
+
border-width: borderWidth
|
|
125
|
+
border-style: borderStyle
|
|
126
|
+
border-color: borderColor
|
|
127
|
+
|
|
128
|
+
// 下边框
|
|
129
|
+
.retina-border-bottom
|
|
130
|
+
retina-border(0 0 1px)
|
|
131
|
+
</style>
|
|
132
|
+
|
|
133
|
+
<script type="application/json">
|
|
134
|
+
{
|
|
135
|
+
"component": true,
|
|
136
|
+
"usingComponents": {
|
|
137
|
+
"basic-input": "./basic-input",
|
|
138
|
+
"basic-picker": "./basic-picker"
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
</script>
|
|
@@ -1,47 +1,47 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<view class="form-demo-page">
|
|
3
|
-
<view style="content: ''; overflow: hidden;"></view>
|
|
4
|
-
|
|
5
|
-
<view class="form-demo-container">
|
|
6
|
-
<view class="form-title">本地scheme渲染表单测试</view>
|
|
7
|
-
<form-render class="form-render-container" scheme="{{formScheme}}" />
|
|
8
|
-
</view>
|
|
9
|
-
</view>
|
|
10
|
-
</template>
|
|
11
|
-
|
|
12
|
-
<script>
|
|
13
|
-
import { createPage } from '@mpxjs/core'
|
|
14
|
-
import formScheme from '../test/scheme1'
|
|
15
|
-
|
|
16
|
-
createPage({
|
|
17
|
-
data: {
|
|
18
|
-
formScheme
|
|
19
|
-
},
|
|
20
|
-
onLoad() {
|
|
21
|
-
console.log('onLoad')
|
|
22
|
-
}
|
|
23
|
-
})
|
|
24
|
-
</script>
|
|
25
|
-
|
|
26
|
-
<style lang="stylus">
|
|
27
|
-
page
|
|
28
|
-
background-color #f5f5f5
|
|
29
|
-
|
|
30
|
-
.form-demo-container
|
|
31
|
-
background #fff
|
|
32
|
-
margin 24rpx
|
|
33
|
-
border-radius 16rpx
|
|
34
|
-
padding 24rpx
|
|
35
|
-
|
|
36
|
-
.form-render-container {
|
|
37
|
-
margin-top 24rpx
|
|
38
|
-
}
|
|
39
|
-
</style>
|
|
40
|
-
|
|
41
|
-
<script type="application/json">
|
|
42
|
-
{
|
|
43
|
-
"usingComponents": {
|
|
44
|
-
"form-render": "../components/form"
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<view class="form-demo-page">
|
|
3
|
+
<view style="content: ''; overflow: hidden;"></view>
|
|
4
|
+
|
|
5
|
+
<view class="form-demo-container">
|
|
6
|
+
<view class="form-title">本地scheme渲染表单测试</view>
|
|
7
|
+
<form-render class="form-render-container" scheme="{{formScheme}}" />
|
|
8
|
+
</view>
|
|
9
|
+
</view>
|
|
10
|
+
</template>
|
|
11
|
+
|
|
12
|
+
<script>
|
|
13
|
+
import { createPage } from '@mpxjs/core'
|
|
14
|
+
import formScheme from '../test/scheme1'
|
|
15
|
+
|
|
16
|
+
createPage({
|
|
17
|
+
data: {
|
|
18
|
+
formScheme
|
|
19
|
+
},
|
|
20
|
+
onLoad() {
|
|
21
|
+
console.log('onLoad')
|
|
22
|
+
}
|
|
23
|
+
})
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<style lang="stylus">
|
|
27
|
+
page
|
|
28
|
+
background-color #f5f5f5
|
|
29
|
+
|
|
30
|
+
.form-demo-container
|
|
31
|
+
background #fff
|
|
32
|
+
margin 24rpx
|
|
33
|
+
border-radius 16rpx
|
|
34
|
+
padding 24rpx
|
|
35
|
+
|
|
36
|
+
.form-render-container {
|
|
37
|
+
margin-top 24rpx
|
|
38
|
+
}
|
|
39
|
+
</style>
|
|
40
|
+
|
|
41
|
+
<script type="application/json">
|
|
42
|
+
{
|
|
43
|
+
"usingComponents": {
|
|
44
|
+
"form-render": "../components/form"
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
</script>
|
package/src/pages/index.mpx
CHANGED
|
@@ -1,51 +1,51 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<view class="form-demo-index">
|
|
3
|
-
<view style="content: ''; overflow: hidden;"></view>
|
|
4
|
-
|
|
5
|
-
<view class="demo-index">
|
|
6
|
-
<view bindtap="handleJump('render')">跳转去本地表单渲染测试页</view>
|
|
7
|
-
<view bindtap="handleJump('logic')">跳转去本地逻辑渲染测试页</view>
|
|
8
|
-
<view bindtap="handleJump('server')">跳转去服务端协议渲染测试</view>
|
|
9
|
-
</view>
|
|
10
|
-
</view>
|
|
11
|
-
</template>
|
|
12
|
-
|
|
13
|
-
<script>
|
|
14
|
-
import mpx, { createPage } from '@mpxjs/core'
|
|
15
|
-
|
|
16
|
-
createPage({
|
|
17
|
-
onLoad() {
|
|
18
|
-
console.log('onLoad')
|
|
19
|
-
},
|
|
20
|
-
methods: {
|
|
21
|
-
handleJump(action) {
|
|
22
|
-
if (action === 'render') {
|
|
23
|
-
mpx.navigateTo({ url: '/pages/form-render' })
|
|
24
|
-
} else if (action === 'logic') {
|
|
25
|
-
mpx.navigateTo({ url: '/pages/js-logic-render' })
|
|
26
|
-
} else if (action === 'server') {
|
|
27
|
-
mpx.navigateTo({ url: '/pages/server-scheme' })
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
})
|
|
32
|
-
</script>
|
|
33
|
-
|
|
34
|
-
<style lang="stylus">
|
|
35
|
-
page {
|
|
36
|
-
background-color: #f5f5f5;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.form-container {
|
|
40
|
-
background: #fff;
|
|
41
|
-
margin: 24rpx;
|
|
42
|
-
border-radius: 16rpx;
|
|
43
|
-
padding: 24rpx;
|
|
44
|
-
}
|
|
45
|
-
</style>
|
|
46
|
-
|
|
47
|
-
<script type="application/json">
|
|
48
|
-
{
|
|
49
|
-
"usingComponents": {}
|
|
50
|
-
}
|
|
51
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<view class="form-demo-index">
|
|
3
|
+
<view style="content: ''; overflow: hidden;"></view>
|
|
4
|
+
|
|
5
|
+
<view class="demo-index">
|
|
6
|
+
<view bindtap="handleJump('render')">跳转去本地表单渲染测试页</view>
|
|
7
|
+
<view bindtap="handleJump('logic')">跳转去本地逻辑渲染测试页</view>
|
|
8
|
+
<view bindtap="handleJump('server')">跳转去服务端协议渲染测试</view>
|
|
9
|
+
</view>
|
|
10
|
+
</view>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
import mpx, { createPage } from '@mpxjs/core'
|
|
15
|
+
|
|
16
|
+
createPage({
|
|
17
|
+
onLoad() {
|
|
18
|
+
console.log('onLoad')
|
|
19
|
+
},
|
|
20
|
+
methods: {
|
|
21
|
+
handleJump(action) {
|
|
22
|
+
if (action === 'render') {
|
|
23
|
+
mpx.navigateTo({ url: '/pages/form-render' })
|
|
24
|
+
} else if (action === 'logic') {
|
|
25
|
+
mpx.navigateTo({ url: '/pages/js-logic-render' })
|
|
26
|
+
} else if (action === 'server') {
|
|
27
|
+
mpx.navigateTo({ url: '/pages/server-scheme' })
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
})
|
|
32
|
+
</script>
|
|
33
|
+
|
|
34
|
+
<style lang="stylus">
|
|
35
|
+
page {
|
|
36
|
+
background-color: #f5f5f5;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.form-container {
|
|
40
|
+
background: #fff;
|
|
41
|
+
margin: 24rpx;
|
|
42
|
+
border-radius: 16rpx;
|
|
43
|
+
padding: 24rpx;
|
|
44
|
+
}
|
|
45
|
+
</style>
|
|
46
|
+
|
|
47
|
+
<script type="application/json">
|
|
48
|
+
{
|
|
49
|
+
"usingComponents": {}
|
|
50
|
+
}
|
|
51
|
+
</script>
|
|
@@ -1,59 +1,59 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<view class="form-demo-page">
|
|
3
|
-
<view style="content: ''; overflow: hidden;"></view>
|
|
4
|
-
|
|
5
|
-
<view class="form-demo-container">
|
|
6
|
-
<view class="form-title">JS逻辑控制scheme渲染表单测试</view>
|
|
7
|
-
<mini-form-render
|
|
8
|
-
class="form-render-container"
|
|
9
|
-
scheme="{{formScheme}}"
|
|
10
|
-
bindformchange="handleFormChange"
|
|
11
|
-
/>
|
|
12
|
-
</view>
|
|
13
|
-
</view>
|
|
14
|
-
</template>
|
|
15
|
-
|
|
16
|
-
<script>
|
|
17
|
-
import { createPage } from '@mpxjs/core'
|
|
18
|
-
import getFormScheme from '../test/paint-form'
|
|
19
|
-
|
|
20
|
-
createPage({
|
|
21
|
-
data: {
|
|
22
|
-
formScheme: getFormScheme({})
|
|
23
|
-
},
|
|
24
|
-
onLoad() {
|
|
25
|
-
console.log('onLoad')
|
|
26
|
-
},
|
|
27
|
-
methods: {
|
|
28
|
-
handleFormChange(e) {
|
|
29
|
-
const formResult = e.detail
|
|
30
|
-
console.log('form changed: ', formResult)
|
|
31
|
-
this.formScheme = getFormScheme(formResult)
|
|
32
|
-
this.formResult = formResult
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
})
|
|
36
|
-
</script>
|
|
37
|
-
|
|
38
|
-
<style lang="stylus">
|
|
39
|
-
page
|
|
40
|
-
background-color #f5f5f5
|
|
41
|
-
|
|
42
|
-
.form-demo-container
|
|
43
|
-
background #fff
|
|
44
|
-
margin 24rpx
|
|
45
|
-
border-radius 16rpx
|
|
46
|
-
padding 24rpx
|
|
47
|
-
|
|
48
|
-
.form-render-container {
|
|
49
|
-
margin-top 24rpx
|
|
50
|
-
}
|
|
51
|
-
</style>
|
|
52
|
-
|
|
53
|
-
<script type="application/json">
|
|
54
|
-
{
|
|
55
|
-
"usingComponents": {
|
|
56
|
-
"mini-form-render": "../components/form"
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<view class="form-demo-page">
|
|
3
|
+
<view style="content: ''; overflow: hidden;"></view>
|
|
4
|
+
|
|
5
|
+
<view class="form-demo-container">
|
|
6
|
+
<view class="form-title">JS逻辑控制scheme渲染表单测试</view>
|
|
7
|
+
<mini-form-render
|
|
8
|
+
class="form-render-container"
|
|
9
|
+
scheme="{{formScheme}}"
|
|
10
|
+
bindformchange="handleFormChange"
|
|
11
|
+
/>
|
|
12
|
+
</view>
|
|
13
|
+
</view>
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<script>
|
|
17
|
+
import { createPage } from '@mpxjs/core'
|
|
18
|
+
import getFormScheme from '../test/paint-form'
|
|
19
|
+
|
|
20
|
+
createPage({
|
|
21
|
+
data: {
|
|
22
|
+
formScheme: getFormScheme({})
|
|
23
|
+
},
|
|
24
|
+
onLoad() {
|
|
25
|
+
console.log('onLoad')
|
|
26
|
+
},
|
|
27
|
+
methods: {
|
|
28
|
+
handleFormChange(e) {
|
|
29
|
+
const formResult = e.detail
|
|
30
|
+
console.log('form changed: ', formResult)
|
|
31
|
+
this.formScheme = getFormScheme(formResult)
|
|
32
|
+
this.formResult = formResult
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
})
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<style lang="stylus">
|
|
39
|
+
page
|
|
40
|
+
background-color #f5f5f5
|
|
41
|
+
|
|
42
|
+
.form-demo-container
|
|
43
|
+
background #fff
|
|
44
|
+
margin 24rpx
|
|
45
|
+
border-radius 16rpx
|
|
46
|
+
padding 24rpx
|
|
47
|
+
|
|
48
|
+
.form-render-container {
|
|
49
|
+
margin-top 24rpx
|
|
50
|
+
}
|
|
51
|
+
</style>
|
|
52
|
+
|
|
53
|
+
<script type="application/json">
|
|
54
|
+
{
|
|
55
|
+
"usingComponents": {
|
|
56
|
+
"mini-form-render": "../components/form"
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
</script>
|