c-checkbox-group

复选框列表

示例

  1. <template>
  2. <page title="checkbox group演示">
  3.   <view class="box">
  4.     <c-checkbox-group
  5.       option="{{ checkboxGroupOption1 }}"
  6.       c-bind:groupchange="groupChangeHandler1"
  7.       >
  8.     </c-checkbox-group>
  9.   </view>
  10.   <view class="title">
  11.     <text>selected value: {{ selected1 }}</text>
  12.   </view>
  14.   <view class="box">
  15.     <c-checkbox-group
  16.       option="{{ checkboxGroupOption2 }}"
  17.       position="right"
  18.       c-bind:groupchange="groupChangeHandler2"
  19.       >
  20.     </c-checkbox-group>
  21.   </view>
  22.   <view class="title">
  23.     <text>selected value: {{ selected2 }}</text>
  24.   </view>
  26.   <view class="box">
  27.     <c-checkbox-group
  28.       option="{{ checkboxGroupOption3 }}"
  29.       c-bind:groupchange="groupChangeHandler3"
  30.       horizontal="{{ true }}"
  31.       >
  32.     </c-checkbox-group>
  33.   </view>
  34.   <view class="title">
  35.     <text>selected value: {{ selected3 }}</text>
  36.   </view>
  38. </page>
  39. </template>
  40. <script>
  41. class CCheckbox {
  43.   data = {
  44.     checkboxGroupOption1: [{
  45.       checked: true,
  46.       label: 'one',
  47.       disabled: true
  48.     }, {
  49.       checked: false,
  50.       label: 'two'
  51.     }, {
  52.       checked: false,
  53.       label: 'three'
  54.     }],
  55.     selected1: 'one',
  56.     checkboxGroupOption2: [{
  57.       checked: true,
  58.       label: 'one',
  59.       disabled: true
  60.     }, {
  61.       checked: false,
  62.       label: 'two'
  63.     }, {
  64.       checked: false,
  65.       label: 'three'
  66.     }],
  67.     selected2: 'one',
  68.     checkboxGroupOption3: [{
  69.       checked: true,
  70.       label: 'one',
  71.       disabled: true
  72.     }, {
  73.       checked: false,
  74.       label: 'two'
  75.     }, {
  76.       checked: false,
  77.       label: 'three'
  78.     }],
  79.     selected3: 'one'
  80.   }
  81.   methods = {
  82.     valueChange1 (e) {
  83.       this.checkboxValue1 = e.detail.value
  84.     },
  85.     groupChangeHandler1 (e) {
  86.       this.checkboxGroupOption1 = e.detail.value
  87.       this.selected1 = e.detail.selected.join(', ')
  88.     },
  89.     groupChangeHandler2 (e) {
  90.       this.checkboxGroupOption2 = e.detail.value
  91.       this.selected2 = e.detail.selected.join(', ')
  92.     },
  93.     groupChangeHandler3 (e) {
  94.       this.checkboxGroupOption3 = e.detail.value
  95.       this.selected3 = e.detail.selected.join(', ')
  96.     },
  97.     valueChange2 (e) {
  98.       this.checkboxValue2 = e.detail.value
  99.     }
  100.   }
  101. }
  103. export default new CCheckbox();
  104. </script>
  105. <style scoped>
  106. .container {
  107.   position: absolute;
  108.   top: 88cpx;
  109.   left: 0;
  110.   right: 0;
  111.   bottom: 0;
  112. }
  113. .title {
  114.   font-size: 38cpx;
  115.   font-weight: 400;
  116.   margin: 20cpx 0;
  117.   padding: 8cpx 30cpx;
  118.   background: #eee
  119. }
  120. .checkbox-value {
  121.   font-size: 32cpx;
  122. }
  123. .box {
  124.   margin: 10cpx 50cpx;
  125. }
  126. </style>
  127. <script cml-type="json">
  128. {
  129.     "base": {
  130.         "usingComponents": {
  131.           "c-checkbox-group": "cml-ui/components/c-checkbox-group/c-checkbox-group"
  132.         }
  133.     }
  134. }
  135. </script>