• label

    label

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

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

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

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

    示例代码：

    1. <view class="section section_gap">
    2.   <view class="section__title">表单组件在label内</view>
    3.   <checkbox-group class="group" bindchange="checkboxChange">
    4.     <view class="label-1" qq:for="{{checkboxItems}}">
    5.       <label>
    6.         <checkbox
    7.           hidden
    8.           value="{{item.name}}"
    9.           checked="{{item.checked}}"
    10.         ></checkbox>
    11.         <view class="label-1__icon">
    12.           <view
    13.             class="label-1__icon-checked"
    14.             style="opacity:{{item.checked ? 1: 0}}"
    15.           ></view>
    16.         </view>
    17.         <text class="label-1__text">{{item.value}}</text>
    18.       </label>
    19.     </view>
    20.   </checkbox-group>
    21. </view>
    23. <view class="section section_gap">
    24.   <view class="section__title">label用for标识表单组件</view>
    25.   <radio-group class="group" bindchange="radioChange">
    26.     <view class="label-2" qq:for="{{radioItems}}">
    27.       <radio
    28.         id="{{item.name}}"
    29.         hidden
    30.         value="{{item.name}}"
    31.         checked="{{item.checked}}"
    32.       ></radio>
    33.       <view class="label-2__icon">
    34.         <view
    35.           class="label-2__icon-checked"
    36.           style="opacity:{{item.checked ? 1: 0}}"
    37.         ></view>
    38.       </view>
    39.       <label class="label-2__text" for="{{item.name}}">
    40.         <text>{{item.name}}</text>
    41.       </label>
    42.     </view>
    43.   </radio-group>
    44. </view>
    1. Page({
    2.   data: {
    3.     checkboxItems: [
    4.       {name: 'USA', value: '美国'},
    5.       {name: 'CHN', value: '中国', checked: 'true'},
    6.       {name: 'BRA', value: '巴西'},
    7.       {name: 'JPN', value: '日本', checked: 'true'},
    8.       {name: 'ENG', value: '英国'},
    9.       {name: 'TUR', value: '法国'},
    10.     ],
    11.     radioItems: [
    12.       {name: 'USA', value: '美国'},
    13.       {name: 'CHN', value: '中国', checked: 'true'},
    14.       {name: 'BRA', value: '巴西'},
    15.       {name: 'JPN', value: '日本'},
    16.       {name: 'ENG', value: '英国'},
    17.       {name: 'TUR', value: '法国'},
    18.     ],
    19.     hidden: false
    20.   },
    21.   checkboxChange(e) {
    22.     const checked = e.detail.value
    23.     const changed = {}
    24.     for (let i = 0; i < this.data.checkboxItems.length; i++) {
    25.       if (checked.indexOf(this.data.checkboxItems[i].name) !== -1) {
    26.         changed['checkboxItems[' + i + '].checked'] = true
    27.       } else {
    28.         changed['checkboxItems[' + i + '].checked'] = false
    29.       }
    30.     }
    31.     this.setData(changed)
    32.   },
    33.   radioChange(e) {
    34.     const checked = e.detail.value
    35.     const changed = {}
    36.     for (let i = 0; i < this.data.radioItems.length; i++) {
    37.       if (checked.indexOf(this.data.radioItems[i].name) !== -1) {
    38.         changed['radioItems[' + i + '].checked'] = true
    39.       } else {
    40.         changed['radioItems[' + i + '].checked'] = false
    41.       }
    42.     }
    43.     this.setData(changed)
    44.   }
    45. })
    1. .label-1,
    2. .label-2 {
    3.   margin-bottom: 15px;
    4. }
    5. .label-1__text,
    6. .label-2__text {
    7.   display: inline-block;
    8.   vertical-align: middle;
    9. }
    11. .label-1__icon {
    12.   position: relative;
    13.   margin-right: 10px;
    14.   display: inline-block;
    15.   vertical-align: middle;
    16.   width: 18px;
    17.   height: 18px;
    18.   background: #fcfff4;
    19. }
    21. .label-1__icon-checked {
    22.   position: absolute;
    23.   top: 3px;
    24.   left: 3px;
    25.   width: 12px;
    26.   height: 12px;
    27.   background: #1aad19;
    28. }
    30. .label-2__icon {
    31.   position: relative;
    32.   display: inline-block;
    33.   vertical-align: middle;
    34.   margin-right: 10px;
    35.   width: 18px;
    36.   height: 18px;
    37.   background: #fcfff4;
    38.   border-radius: 50px;
    39. }
    41. .label-2__icon-checked {
    42.   position: absolute;
    43.   left: 3px;
    44.   top: 3px;
    45.   width: 12px;
    46.   height: 12px;
    47.   background: #1aad19;
    48.   border-radius: 50%;
    49. }
    51. .label-4_text {
    52.   text-align: center;
    53.   margin-top: 15px;
    54. }

    label