# form

表单，将组件内的用户输入的<switch> <input> <checkbox> <slider> <radio> <picker> 提交。

当点击 <form> 表单中 formType 为 submit 的 <button> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

# 使用示例

扫码预览

<template>
  <view class="demo-ui-page">
    <view class="demo-title">form 表单</view>
    <form @submit="formSubmit" @reset="formReset">
      <demo-cell title="姓名" noDecorator TBPadding="0">
        <input class="bz-input" name="input" placeholder="请输入姓名" />
      </demo-cell>
      <demo-cell title="保留选项" noDecorator TBPadding="0">
        <switch name="switch" />
      </demo-cell>
      <demo-cell title="性别" noDecorator TBPadding="0">
        <radio-group name="radio">
          <label class="mr-10"><radio value="radio1" /><text>男</text></label>
          <label class="mr-10"><radio value="radio2" /><text>女</text></label>
        </radio-group>
      </demo-cell>
      <demo-cell title="爱好" noDecorator TBPadding="0">
        <checkbox-group name="checkbox">
          <label class="mr-10"><checkbox value="checkbox1" /><text>读书</text></label>
          <label class="mr-10"><checkbox value="checkbox2" /><text>写字</text></label>
        </checkbox-group>
      </demo-cell>
      <demo-cell title="年龄" noDecorator TBPadding="0">
        <slider value="50" name="slider" show-value></slider>
      </demo-cell>
      <view class="demo-padding-wrap">
        <button class="mb-10" form-type="submit" type="primary">提交</button>
        <button type="default" form-type="reset">重置</button>
      </view>
    </form>
  </view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
   methods: {
			formSubmit(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var formdata = e.detail.value
				bz.showModal({
					content: '表单数据内容：' + JSON.stringify(formdata),
					showCancel: false
				});
			},
			formReset(e) {
				console.log('清空数据')
			}
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

展开刷新关闭

# 属性说明

属性名	类型	说明
@submit	EventHandle	携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}，report-submit 为 true 时才会返回 formId
@reset	EventHandle	表单重置时会触发 reset 事件

← slider navigator →