uniapp ios 自签 uniapp签字组件

本文分享的label组件为uni-app的内置组件label，非扩展组件，两者在用法上其实大同小异，只是扩展组件的属性以及事件更多…没有本质上的区别～

《uni-app》表单组件-Label组件

• 一. 简介
• 二. 基础用法
• 三. for属性

• 3.1 说明
• 3.2 支持组件

• 3.2.1 label中的button
• 3.2.2 label中的checkbox
• 3.2.3 label中的switch
• 3.2.4 小结

• 3.3 注意事项

• 3.3.1 label多重嵌套组件
• 3.3.2 重复id

• 四. demo示例演示
• 五. 小结

一. 简介

label，标题扩展项组件，用于显示名字或标题，但 常用于表单中改进表单组件的可用性，如快速定位到内置的组件；

二. 基础用法

基础用法如下：

<label>这是一个测试标签</label>

其表现形态 效果图 如下：

但绝大部分的时候使用 并不会局限在基本用法，标题、说明的实现实际上很多标签都可以，如h1-h7，万能的view等等，那么label真正的用处在什么地方呢，其实就在于 它可以改进表单组件的用户体验，举个例子，表单中存在一组单选框，那么 默认用户选中的时候必须触碰到单选框这个部分，而非选项部分，如图：

移动端的屏幕绝大多数情况下远比web端来的小，因此小区域的操作非常容易出现误操作的情况，因此 实际上用户期望能操作的部分是整个选项，如下图

这时候 与其他标签的差异化就出现了，label组件能快速实现内部定位的功能，通过简单的for属性即可；

三. for属性

3.1 说明

for属性，用于快速定位label组件对应id内部的组件，依据不同的组件触发对应的效果，属性说明如下：

参数	说明	类型	默认值
for	绑定控件的 id	String

以radio为例，如果使用label标签包裹radio，那么点击非radio的部分也能触发点击效果，代码如下

<!-- raido label -->
<radio-group>
  <view>
    <label for="man">
      <radio id="man" value="man" />
      这是一位风度翩翩的男性
    </label>
  </view>
  <view>
    <label for="woman">
      <radio id="woman" value="woman" />
      这是一位英姿飒爽的女性
    </label>
  </view>
</radio-group>

例子中如上文所述使用label包裹radio标签，可实现的效果为：点击文字部分，也可以使得radio被选中，效果图 如下：

效果图中点的部分为中文汉字部分，但是点击时同样触发了radio的单项选择功能；

3.2 支持组件

for属性目前支持的组件仅为4个：button，checkbox， radio， switch，上面我们已经示例了在label中的radio，接下来我们继续示例另外三个

3.2.1 label中的button

在label中内嵌button实现代码如下，label标签内嵌了一个view以及button，label的for属性指向button，同时在button上绑定了点击事件click，当click事件触发后alert了一个内容为测试的弹窗：

<!-- button label -->
<label for="button">
  <view class="label-group">这是一段测试文字</view>
  <button id="button" @click="handleClick">这是一个按钮</button>
</label>

<script>
export default {
	methods: {
		handleClick() {
			alert('测试');
		}
	}
};
</script>

其表现形态 效果图 如下：

当点击文字部分的时候，显示了按钮的弹窗，这也就代表了label标签可以间接触发button的点击事件；

3.2.2 label中的checkbox

在label中 内嵌checkbox实现代码和上例中raido代码类似，仅将radio标签替换为checkbox标签即可

<checkbox-group>
  <view>
    <label for="man1">
      <checkbox id="man1" value="man" />
      这是一位风度翩翩的男性
    </label>
  </view>
  <view>
    <label for="woman1">
      <checkbox id="woman1" value="woman" />
      这是一位英姿飒爽的女性
    </label>
  </view>
</checkbox-group>

其表现形态 效果图 如下：

点击文字部分 同样触发如同点击复选框的时的选中效果，再次点击则实现取消选中；

3.2.3 label中的switch

在label中内嵌switch实现代码如下

<view class="label-group">
  <h4>switch中的用法</h4>
  <label for="switch">
    <view>
      <switch id="switch" />
      这是一段测试文字
    </view>
  </label>
</view>

其表现形态 效果图 如下：

当点击文字部分的时候，switch开关选择器也进行开关操作；

3.2.4 小结

通过这几个示例其实不难发现，在label中嵌套button，checkbox，radio，switch 最终实现的都是在区域外触发点击事件后，label将这个点击事件会被直接传递到组件上从而触发组件本身的点击事件，换句话说，也就相当于将组件的可操作区域扩大至整个label区域；

3.3 注意事项

3.3.1 label多重嵌套组件

实际上，不需要使用for也可以实现额外区域点击的效果，代码如下：

<checkbox-group>
  <view>
    <label>
      <checkbox value="man" />
      这是一位风度翩翩的男性
    </label>
  </view>
  <view>
    <label>
      <checkbox value="woman" />
      这是一位英姿飒爽的女性
    </label>
  </view>
</checkbox-group>

其表现形态 效果图 如下：

可以看出 即使没有for属性，同样也可以实现label扩展点击区域的效果，但为什么要有for属性？原因也很简单，假如一个label中存在多个可操作的组件，那么此时 没有for的话会永远只触发第一个组件，如下：

<view>
  <label>
    <view>
      <checkbox value="man" />
      测试文字1
    </view>
    <view>
      <checkbox value="man" />
      测试文字2
    </view>
  </label>
</view>

此时按顺序点击：测试文字1 -> 测试文字2，得到结果如下：

确实验证了上面的说法，只触发第一个组件；

3.3.2 重复id

使用for属性还要一个主意点，即 内部组件的id必须确保是唯一的，否则for属性的触发会传递到对应id的组件上，代码如下

<checkbox value="man1" id="demo" />
  测试文字demo
    
  <checkbox-group>
    <view>
      <label for="demo">
        <view>
          <checkbox value="man" />
          测试文字1
        </view>
      </label>
    </view>

    <view>
      <label>
        <checkbox value="woman" />
        这是一位英姿飒爽的女性
      </label>
    </view>
  </checkbox-group>

如上例代码，当点击“测试文字1”时，触发选中状态的chebox为上方id为demo的那个，而label非内部的checkbox，效果图如下：

四. demo示例演示

本节期望通过一个具体的示例来更加清晰的描述 label组件 的用法，demo实现的功能大致如下：从data中取到 radio 的list，使用 v-for指令 动态生成 radio，同时该radio外包裹了一个 label组件

<view class="label-group">
  <h4>关于radio请选择下方哪个说法是正确的:</h4>
  <radio-group @change="handleChange">
    <view v-for="item in list" :key="item.value">
      <label :for="item.value">
        <radio :value="item.value" :id="item.value">{{ item.title }}</radio>
      </label>
    </view>
  </radio-group>
</view>

<script>
export default {
	data() {
		return {
			list: [
				{
					title: '这是本题的正确答案',
					value: 'bb'
				},
				{
					title: '这是本题的错误答案1',
					value: 'fb'
				},
				{
					title: '这是本题的错误答案2',
					value: 'wb'
				}
			]
		};
	},
	methods: {}
};
</script>

其表现形态 效果图 如下：

五. 小结

本文主要分享了uni-app中内置组件label的一些用法，主要是 for属性，for属性是label组件中最重要的功能，它是实现改进表单组件的可用性的关键，之后我们了解它的两个注意点，多重嵌套以及重复ID，这两个的异常使用会导致for属性的定位异常，导致实现失败，最后我们以一个简单的demo结合radio更好的展示了label的使用；