# label

用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。

for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。

目前可以绑定的控件有：<button>, <checkbox>, <radio>, <switch>。

# 使用示例

扫码预览

<template>
  <view class="demo-ui-page">
    <view class="demo-title">label 标签</view>
    <demo-cell title="控件在label内" subTitle="内部有多个控件的时候默认触发第一个控件">
      <checkbox-group class="bz-list" @change="checkboxChange">
        <view class="mb-10" v-for="item in checkboxItems" :key="item.name">
          <label>
            <view>
              <checkbox :value="item.name" :checked="item.checked"></checkbox>
              {{item.value}}
            </view>
          </label>
        </view>
      </checkbox-group>
    </demo-cell>
    <demo-cell title="控件在label外" subTitle="通过for自动寻找对应id的控件">
      <checkbox-group class="bz-list" @change="checkboxChange">
        <view class="mb-10" v-for="item in checkboxItems" :key="item.name">
          <checkbox :id="`cb-${item.name}`" :value="item.name" :checked="item.checked"></checkbox>
          <label class="bz-list-cell bz-list-cell-pd" :for="`cb-${item.name}`">
            {{item.value}}
          </label>
        </view>
      </checkbox-group>
    </demo-cell>
    <demo-cell title="for优先级高">
      <checkbox-group class="bz-list" @change="checkboxChange">
        <view class="mb-10">
          <label for="cc-CHN">
            <view>
              <checkbox id="cc-USA" value="USA"></checkbox>美国(点文字依然选择在中国)
            </view>
          </label>
        </view>
        <view class="mb-10">
          <label for="cc-CHN">
            <view>
              <checkbox id="cc-CHN" value="CHN"></checkbox>中国
            </view>
          </label>
        </view>
      </checkbox-group>
    </demo-cell>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        checkboxItems: [{
            name: 'USA',
            value: '美国'
          },{
            name: 'CHN',
            value: '中国',
          }
        ],
			}
		},
	}
</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
59
60
61
62
63
64
65
66

展开刷新关闭

# 属性说明

属性名	类型	说明
for	String	绑定控件的 id

← input editor →