label

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

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

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

属性名类型默认值说明
forString绑定控件的 id

示例

  2. <view class="page-section page-section-space">
  3.   <view class="page-section-title">表单组件在label内</view>
  4.   <checkbox-group class="group" bindchange="checkboxChange">
  5.     <view class="label-1" :for="{{checkboxItems}}">
  6.       <label>
  7.         <checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox>
  8.         <text class="label-1-text">{{item.value}}</text>
  9.       </label>
  10.     </view>
  11.   </checkbox-group>
  12. </view>
  14. <view class="page-section page-section-space">
  15.   <view class="page-section-title">label用for标识表单组件</view>
  16.   <radio-group class="group" bindchange="radioChange">
  17.     <view class="label-2" :for="{{radioItems}}">
  18.       <radio id="{{item.name}}" value="{{item.name}}" checked="{{item.checked}}"></radio>
  19.       <label class="label-2-text" for="{{item.name}}"><text>{{item.name}}</text></label>
  20.     </view>
  21.   </radio-group>
  22. </view>
  24. <view class="page-section page-section-space">
  25.   <view class="page-section-title">label内有多个时选中第一个</view>
  26.   <label class="label-3">
  27.     <checkbox class="checkbox-3">选项一</checkbox>
  28.     <checkbox class="checkbox-3">选项二</checkbox>
  29.     <view class="label-3-text">点击该label下的文字默认选中第一个checkbox</view>
  30.   </label>
  31. </view>
  1. Page({
  2.   data: {
  3.     checkboxItems: [
  4.       {name: 'tt', value: '头条'},
  5.       {name: 'xigua', value: '西瓜视频', checked: 'true'}
  6.     ],
  7.     radioItems: [
  8.       {name: 'Toutiao', value: '头条'},
  9.       {name: 'Xigua', value: '西瓜视频', checked: 'true'}
  10.     ],
  11.     hidden: false
  12.   },
  13.   checkboxChange: function (e) {
  14.     var checked = e.detail.value
  15.     var changed = {}
  16.     for (var i = 0; i < this.data.checkboxItems.length; i++) {
  17.       if (checked.indexOf(this.data.checkboxItems[i].name) !== -1) {
  18.         changed['checkboxItems[' + i + '].checked'] = true
  19.       } else {
  20.         changed['checkboxItems[' + i + '].checked'] = false
  21.       }
  22.     }
  23.     this.setData(changed)
  24.   },
  25.   radioChange: function (e) {
  26.     var checked = e.detail.value
  27.     var changed = {}
  28.     for (var i = 0; i < this.data.radioItems.length; i ++) {
  29.       if (checked.indexOf(this.data.radioItems[i].name) !== -1) {
  30.         changed['radioItems[' + i + '].checked'] = true
  31.       } else {
  32.         changed['radioItems[' + i + '].checked'] = false
  33.       }
  34.     }
  35.     this.setData(changed)
  36.   },
  37.   tapEvent: function (e) {
  38.     console.log('按钮被点击')
  39.   }
  40. })

label - 图1

原文: https://developer.toutiao.com/docs/comp/label.html