mini-form-render 0.0.5 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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>
|