c-radio-group

单选框列表

示例

<template>
<page title="radio group演示">
    <view class="box">
      <c-radio-group
        option="{{ radioGroupOption1 }}"
        c-bind:groupchange="groupChangeHandler1"
        >
      </c-radio-group>
    </view>
    <view class="title">
      <text>selected value: {{ radioSelect1 ? 'true' : 'false'}}</text>
    </view>
    <view class="box">
      <c-radio-group
        option="{{ radioGroupOption2 }}"
        position="right"
        c-bind:groupchange="groupChangeHandler2"
        >
      </c-radio-group>
    </view>
    <view class="title">
      <text>selected value: {{ radioSelect2 ? 'true' : 'false' }}</text>
    </view>
    <view class="box">
      <c-radio-group
        option="{{ radioGroupOption3 }}"
        horizontal="{{ true }}"
        c-bind:groupchange="groupChangeHandler3"
        >
      </c-radio-group>
    </view>
    <view class="title">
      <text>selected value: {{ radioSelect3 ? 'true' : 'false' }}</text>
    </view>
</page>
</template>
<script>
class CRadio {

  data = {
    radioGroupOption1: [{
      checked: false,
      label: 'Option1',
    }, {
      checked: false,
      label: 'Option2'
    }, {
      checked: false,
      label: 'Option3',
      disabled: true
    }],
    radioSelect1: '',
    radioGroupOption2: [{
      checked: true,
      label: 'Option1',
    }, {
      checked: false,
      label: 'Option2'
    }, {
      checked: false,
      label: 'Option3',
      disabled: true
    }],
    radioSelect2: 'Option1',
    radioGroupOption3: [{
      checked: true,
      label: 'Option1',
    }, {
      checked: false,
      label: 'Option2'
    }, {
      checked: false,
      label: 'Option3',
      disabled: true
    }],
    radioSelect3: 'Option1',
  }

  computed = {
  }

  watch  = {
  }

  methods = {
    groupChangeHandler1 (e) {
      this.radioSelect1 = this.radioGroupOption1[e.detail.index].label
    },
    groupChangeHandler2 (e) {
      this.radioSelect2 = this.radioGroupOption2[e.detail.index].label
    },
    groupChangeHandler3 (e) {
      this.radioSelect3 = this.radioGroupOption3[e.detail.index].label
    },
  }

  beforeCreate() {
  }

  created() {
  }

  beforeMount() {
  }

  mounted() {
  }

  beforeDestroy() {
  }

  destroyed() {
  }
}

export default new CRadio();
</script>
<style scoped>
.container {
  position: absolute;
  top: 88cpx;
  left: 0;
  right: 0;
  bottom: 0;
}
.title {
  font-size: 38cpx;
  font-weight: 400;
  margin: 20cpx 0;
  padding: 10cpx 30cpx;
  background: #eee
}
.radio-value {
  font-size: 32cpx;
}
.box {
  margin: 0 50cpx;
}
</style>
<script cml-type="json">
{
    "base": {
        "usingComponents": {
          "c-radio-group": "cml-ui/components/c-radio-group/c-radio-group"
        }
    }
}
</script>