checkbox

复选框

示例

  1. <template>
  2.   <view>
  3.     <text class="title">Checkbox</text>
  4.     <view class="box">
  5.       <checkbox
  6.         checked="{{checkboxValue1}}"
  7.         disabled="{{false}}"
  8.         label="Checkbox1"
  9.         c-bind:change="valueChange1"
  10.       >
  11.       </checkbox>
  12.     </view>
  13.     <view class="title"><text>value: {{ checkboxValue1 ? 'true' : 'false' }}</text></view>
  14.     <view class="box">
  15.       <checkbox
  16.         checked="{{checkboxValue2}}"
  17.         label="Checkbox2"
  18.         position="right"
  19.         c-bind:change="valueChange2"
  20.       >
  21.       </checkbox>
  22.     </view>
  23.     <view class="title"><text>value: {{ checkboxValue2 ? 'true' : 'false' }}</text></view>
  24.     <view class="box">
  25.       <checkbox
  26.         checked="{{checkboxValue3}}"
  27.         label="Checkbox3"
  28.         position="right"
  29.         disabled="{{true}}"
  30.       >
  31.       </checkbox>
  32.     </view>
  33.     <view class="title"><text>value: {{ checkboxValue3 ? 'true' : 'false' }}</text></view>
  34.   </view>
  35. </template>
  36. <script>
  37. class Checkbox {
  38.   data = {
  39.     checkboxValue1: true,
  40.     checkboxValue2: true,
  41.     checkboxValue3: true
  42.   }
  43.   methods = {
  44.     valueChange1 (e) {
  45.       this.checkboxValue1 = e.detail.value
  46.     },
  47.     valueChange2 (e) {
  48.       this.checkboxValue2 = e.detail.value
  49.     }
  50.   }
  51. }
  53. export default new Checkbox();
  54. </script>
  55. <style scoped>
  56. .container {
  57.   position: absolute;
  58.   top: 88cpx;
  59.   left: 0;
  60.   right: 0;
  61.   bottom: 0;
  62. }
  63. .title {
  64.   font-size: 38cpx;
  65.   font-weight: 400;
  66.   margin: 20cpx 0;
  67.   padding: 8cpx 30cpx;
  68.   background: #eee
  69. }
  70. .checkbox-value {
  71.   font-size: 32cpx;
  72. }
  73. .box {
  74.   margin: 10cpx 50cpx;
  75. }
  76. </style>
  78. <script cml-type="json">
  79. {
  80.   "base": {}
  81. }
  82. </script>