c-radio-group

单选框列表

属性

属性名类型必填默认值说明
optionArray是[]选项数组
horizontalBoolean否false单选框排列方向，默认纵向排列
positionString否left按钮相对于文案的位置，可选值包括：left、right
c-bind:groupchangeEventHandle否点击按钮出发 返回事件对象： event.detail 返回值： event.detail.value - 修改后的选项数组 event.detail.index - 修改的单选框索引

示例

  1. <template>
  2.   <c-radio-group
  3.     option="{{ radioGroupOption }}"
  4.     c-bind:groupchange="groupChangeHandler"
  5.     >
  6.   </c-radio-group>
  7. </template>
  8. <script>
  9. class CRadio {
  10.   data = {
  11.     radioGroupOption: [
  12.       {
  13.         checked: false,
  14.         label: 'Option1',
  15.       }, 
  16.       {
  17.         checked: false,
  18.         label: 'Option2'
  19.       }, 
  20.       {
  21.         checked: false,
  22.         label: 'Option3',
  23.         disabled: true
  24.       }
  25.     ],
  26.     radioSelect: ''
  27.   }
  29.   methods = {
  30.     groupChangeHandler (e) {
  31.       this.radioSelect = this.radioGroupOption[e.detail.index].label
  32.     }
  33.   }
  34. }
  36. export default new CRadio();
  37. </script>
  38. <script cml-type="json">
  39. {
  40.   "base": {
  41.       "usingComponents": {
  42.           "c-radio-group": "cml-ui/components/c-radio-group/c-radio-group"
  43.       }
  44.   }
  45. }
  46. </script>

c-radio-group - 图1wx

c-radio-group - 图2web

c-radio-group - 图3native

查看完整示例