c-radio-group

单选框列表

示例

  1. <template>
  2. <page title="radio group演示">
  3.     <view class="box">
  4.       <c-radio-group
  5.         option="{{ radioGroupOption1 }}"
  6.         c-bind:groupchange="groupChangeHandler1"
  7.         >
  8.       </c-radio-group>
  9.     </view>
  10.     <view class="title">
  11.       <text>selected value: {{ radioSelect1 ? 'true' : 'false'}}</text>
  12.     </view>
  13.     <view class="box">
  14.       <c-radio-group
  15.         option="{{ radioGroupOption2 }}"
  16.         position="right"
  17.         c-bind:groupchange="groupChangeHandler2"
  18.         >
  19.       </c-radio-group>
  20.     </view>
  21.     <view class="title">
  22.       <text>selected value: {{ radioSelect2 ? 'true' : 'false' }}</text>
  23.     </view>
  24.     <view class="box">
  25.       <c-radio-group
  26.         option="{{ radioGroupOption3 }}"
  27.         horizontal="{{ true }}"
  28.         c-bind:groupchange="groupChangeHandler3"
  29.         >
  30.       </c-radio-group>
  31.     </view>
  32.     <view class="title">
  33.       <text>selected value: {{ radioSelect3 ? 'true' : 'false' }}</text>
  34.     </view>
  35. </page>
  36. </template>
  37. <script>
  38. class CRadio {
  40.   data = {
  41.     radioGroupOption1: [{
  42.       checked: false,
  43.       label: 'Option1',
  44.     }, {
  45.       checked: false,
  46.       label: 'Option2'
  47.     }, {
  48.       checked: false,
  49.       label: 'Option3',
  50.       disabled: true
  51.     }],
  52.     radioSelect1: '',
  53.     radioGroupOption2: [{
  54.       checked: true,
  55.       label: 'Option1',
  56.     }, {
  57.       checked: false,
  58.       label: 'Option2'
  59.     }, {
  60.       checked: false,
  61.       label: 'Option3',
  62.       disabled: true
  63.     }],
  64.     radioSelect2: 'Option1',
  65.     radioGroupOption3: [{
  66.       checked: true,
  67.       label: 'Option1',
  68.     }, {
  69.       checked: false,
  70.       label: 'Option2'
  71.     }, {
  72.       checked: false,
  73.       label: 'Option3',
  74.       disabled: true
  75.     }],
  76.     radioSelect3: 'Option1',
  77.   }
  79.   computed = {
  80.   }
  82.   watch  = {
  83.   }
  85.   methods = {
  86.     groupChangeHandler1 (e) {
  87.       this.radioSelect1 = this.radioGroupOption1[e.detail.index].label
  88.     },
  89.     groupChangeHandler2 (e) {
  90.       this.radioSelect2 = this.radioGroupOption2[e.detail.index].label
  91.     },
  92.     groupChangeHandler3 (e) {
  93.       this.radioSelect3 = this.radioGroupOption3[e.detail.index].label
  94.     },
  95.   }
  97.   beforeCreate() {
  98.   }
  100.   created() {
  101.   }
  103.   beforeMount() {
  104.   }
  106.   mounted() {
  107.   }
  109.   beforeDestroy() {
  110.   }
  112.   destroyed() {
  113.   }
  114. }
  116. export default new CRadio();
  117. </script>
  118. <style scoped>
  119. .container {
  120.   position: absolute;
  121.   top: 88cpx;
  122.   left: 0;
  123.   right: 0;
  124.   bottom: 0;
  125. }
  126. .title {
  127.   font-size: 38cpx;
  128.   font-weight: 400;
  129.   margin: 20cpx 0;
  130.   padding: 10cpx 30cpx;
  131.   background: #eee
  132. }
  133. .radio-value {
  134.   font-size: 32cpx;
  135. }
  136. .box {
  137.   margin: 0 50cpx;
  138. }
  139. </style>
  140. <script cml-type="json">
  141. {
  142.     "base": {
  143.         "usingComponents": {
  144.           "c-radio-group": "cml-ui/components/c-radio-group/c-radio-group"
  145.         }
  146.     }
  147. }
  148. </script>