全部产品

复选框(AMCheckBox)

更新时间:2020-03-26 15:08:00

本文介绍复选框(AMCheckBox)。

属性名 描述 类型 默认值 必选
value 组件值,选中时 change 事件会携带的 value String - false
checked 当前是否选中,可用来设置默认选中 Boolean false false
disabled 是否禁用 Boolean false false
onChange change 事件触发的回调函数 (e: Object) => void - false
id 与 label 组件的 for 属性组合使用 String - false

代码示例

  1. {
  2. "defaultTitle": "小程序 AntUI 组件库",
  3. "usingComponents": {
  4. "list": "mini-antui/es/list/index",
  5. "list-item": "mini-antui/es/list/list-item/index",
  6. "am-checkbox": "mini-antui/es/am-checkbox/index"
  7. }
  8. }
  1. <list>
  2. <view slot="header">
  3. 列表+复选框
  4. </view>
  5. <block a:for="{{items}}">
  6. <list-item
  7. thumb=""
  8. arrow="{{false}}"
  9. index="{{index}}"
  10. key="items-{{index}}"
  11. last="{{index === (items.length - 1)}}"
  12. >
  13. <view slot="prefix" style="display: flex; align-items: center;">
  14. <am-checkbox id="{{item.id}}" data-name="{{item.value}}" disabled="{{item.disabled}}" checked="{{item.checked}}" onChange="onChange" />
  15. </view>
  16. <label for="{{item.id}}">{{item.title}}</label>
  17. </list-item>
  18. </block>
  19. </list>
  20. <view style="padding: 16px;">
  21. <view style="color: #888; font-size: 14px;">
  22. 协议
  23. </view>
  24. <view style="margin-top: 10px;">
  25. <label style="display: flex; line-height: 24px;">
  26. <am-checkbox />
  27. <text style="text-indent: 8px; color: #888">同意 《信用支付服务合同》</text>
  28. </label>
  29. </view>
  30. </view>
  31. <view style="padding: 16px; background-color: #fff;">
  32. <form onSubmit="onSubmit" onReset="onReset">
  33. <view>
  34. <view style="color: #666; font-size: 14px; margin-bottom: 5px;">选择你用过的框架:</view>
  35. <view>
  36. <checkbox-group name="libs">
  37. <label a:for="{{items2}}" style="display: flex; align-items: center; height: 30px;">
  38. <am-checkbox value="{{item.name}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />
  39. <text style="color: #888; font-size: 14px; margin-left: 8px;">{{item.value}}</text>
  40. </label>
  41. </checkbox-group>
  42. </view>
  43. <view style="margin-top: 10px;">
  44. <button type="primary" size="mini" formType="submit">submit</button>
  45. </view>
  46. </view>
  47. </form>
  48. </view>
  1. Page({
  2. data: {
  3. items: [
  4. { checked: true, disabled: false, value: 'a', title: '复选框-默认选中', id: 'checkbox1' },
  5. { checked: false, disabled: false, value: 'b', title: '复选框-默认未选中', id: 'checkbox2' },
  6. { checked: true, disabled: true, value: 'c', title: '复选框-默认选中disabled', id: 'checkbox3' },
  7. { checked: false, disabled: true, value: 'd', title: '复选框-默认未选中disabled', id: 'checkbox4' },
  8. ],
  9. items2: [
  10. { name: 'react', value: 'React', checked: true },
  11. { name: 'vue', value: 'Vue.js' },
  12. { name: 'ember', value: 'Ember.js' },
  13. { name: 'backbone', value: 'Backbone.js', disabled: true },
  14. ],
  15. },
  16. onSubmit(e) {
  17. my.alert({
  18. content: `你选择的框架是 ${e.detail.value.libs.join(', ')}`,
  19. });
  20. },
  21. onReset() {},
  22. onChange(e) { console.log(e); },
  23. });