
## 单选

```html
<template>
  <div class="cl-radio">
    <cl-radio 
    v-model="radioVal"
    option-layout="vertical"
    permission="w"
    :rdlist="options"
    :props="{key:'code',value:'desc'}"
    ></cl-radio>
  </div>
</template>
<script>

  export default {
    data() {
      return {
        radioVal:'',
        options: '[{"code":1,"desc":"是"},{"code":0,"desc":"否"}]'
      }
    },
  }
</script>
<!-- radio.vue -->
```

### 禁用状态
1.使用disabled或者readonly可禁用整个单选框
2.禁用单个单选框时在option对象中设置disabled

```html
<template>
  <el-row>
    <cl-radio v-model="inputVal" :rdlist="options1" readonly :props="props"></cl-radio>
    <cl-radio v-model="inputVal" :rdlist="options2" disabled :props="props"></cl-radio>
  </el-row>
  <el-row>
    <cl-radio v-model="inputVal3" :rdlist="options3" :props="props"></cl-radio>
  </el-row>
</template>
<script>
    export default {
        data() {
            return {
              inputVal: '1',
              inputVal3: '3',
              options1: JSON.stringify([{value: "1", label: 'radio1'}]),
              options2: JSON.stringify([{value: "2", label: 'radio2'}]),
              options3: JSON.stringify([
                {value: "1", label: '单选框1'},
                {value: "2", label: '单选框2',disabled: true},
              ]),
              props: {
                key: 'value',
                value: 'label'
              }
            }
        }
    }
</script>
<style>
  .el-row{
    margin-bottom:10px;
  }
</style>
<!-- radioDisabled.vue -->
```

### 动态选项

```html
<template>
  <div class="cl-radio">
    <cl-radio
      v-model="radioVal"
      :ganged="{
        alias: 'dcsj',
        valueBind: 'F_factory_code',
        noInit: '',
        labelBind: 'F_factory_name',
        PId: '',
        gangedBind: '{}',
        bind: {},
      }"
    ></cl-radio>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        radioVal: "",
      };
    },
  };
</script>

<!-- radio-dynamic.vue -->
```


#### 联动配置
配置联动时必须使用`v-form`指令声明为一个域
选择爬山时仅显示爬山，选择游泳时游泳必填，选择下棋时爬山只读
```html
<template>
  <el-form  v-form>
    <cl-form-item label="爱好">
      <cl-radio
        v-model="linkageForm.linkage"
        class="m-r"
        :rdlist="options"
        :linkage="linkage" />
    </cl-form-item>
    <cl-form-item label="爬山">
      <cl-input :permission="permission.climb" v-model="linkageForm.climb" placeholder="喜欢爬哪座山" />
    </cl-form-item>
    <cl-form-item label="游泳" v-if="permission.swim !== 'n'">
      <cl-input :permission="permission.swim" v-model="linkageForm.swim" placeholder="喜欢哪种泳姿" />
    </cl-form-item>
    <cl-form-item label="下棋" v-if="permission.chess !== 'n'">
      <cl-input :permission="permission.chess" v-model="linkageForm.chess" placeholder="喜欢哪种棋" />
    </cl-form-item>
  </el-form>
</template>
<script>
    export default {
      data() {
        return {
        linkageForm:{
          linkage:'',
          swim:'',
          climb:'白云山',
          chess:'',
        },
        permission:{
          swim:'w',
          climb:'w',
          chess:'w'
        },
        options:JSON.stringify([{ key: '1', value: '爬山' },{ key: '2', value: '游泳' },{ key: '3', value: '下棋' }]),
        linkage:[{'value':'1','effect':[{'target': 'permission.chess', 'type': '=','value': 'n'},{'target': 'permission.swim', 'type': '=','value': 'n'}]},
        {'value':'2','effect':[{'target': 'permission.swim', 'type': '=', 'value': 'b'}]},
        {'value':'3','effect':[{'target': 'permission.climb', 'type': '=', 'value': 'r'}]}]
        };
      },
    };
</script>
<!-- linkage-radio.vue -->
```

### 属性说明
|属性|类型|默认值|说明|
|:---         |:---         |:---         |:---      |
|validate     |     string/object|    —   |   校验规则  |
|value/v-model|     string/number/boolean    |  —  |   绑定值    |
|name  |   string   | — |  原生 name 属性 |
|permission  | string | —  |   权限值:可选值:` b,w,r,n `,分别代表` 必填,编辑,只读,无权限` |
|rdlist| string |—|  传入的radio选项，为JSON格式的字符串，优先级高于`options` |
|options| array |—|  传入的radio选项，为JSON格式的数组对象，优先级低于`rdlist` |
|props|object|`{key:'key',value:'value'}`|options数组对象中自定义key,value值|
|optionLayout|string|horizontal|布局方式:可选值:`horizontal(水平布局),vertical(垂直布局)`|
|readonly|boolean|false|是否只读|
|disabled|boolean|false|是否禁用|
|linkage|object/array|—|联动配置更多使用方法请前往 [联动规则](/linkage)|
|ganged|object|—|动态选项,传入值:`{alias:别名,valueBind:绑定的key,labelBind:显示的label,bind:{绑定值对象}} `|


