Radio 单选框组

1.4.0 新增

单选框组，可设置单选框组内容，样式等。

示例

基本用法

  1. <cube-radio-group v-model="selected" :options="options">
  1. export default {
  2.   data() {
  3.     return {
  4.       selected: '',
  5.       options: ['Option1', 'Option2']
  6.     }
  7.   }
  8. }

options 为选项数组，默认不选中任何的选项，点击其中一个，则对应的 selected 的值就为选中项的值。

设置 value，禁用状态，图标样式

  1. <cube-radio-group v-model="selected2" :options="options2" position="right" :hollow-style="true">
  1. export default {
  2.   data() {
  3.     return {
  4.       selected2: 3,
  5.       options2: [
  6.         {
  7.           label: 'Option1',
  8.           value: 1
  9.         },
  10.         {
  11.           label: 'Option2',
  12.           value: 2
  13.         },
  14.         {
  15.           label: 'Option3',
  16.           value: 3,
  17.           disabled: true
  18.         }
  19.       ]
  20.     }
  21.   }
  22. }

options 的值可以是对象组成的数组，默认可以设置 label 和 value 分别代表的是显示文案和单选框的值，如果对象中包含了 disabled 为 true 的值，那么此单选框就处于禁用状态。

设置 position 为 ‘right’，则单选框图标位置在右边。设置 hollow-style 为 true 则使用镂空样式。

水平排列

  1. <cube-radio-group v-model="selected3" :options="options3" :horizontal="true">
  1. export default {
  2.   data() {
  3.     return {
  4.       selected3: '3',
  5.       options3: [
  6.         {
  7.           label: '1',
  8.           value: '1'
  9.         },
  10.         {
  11.           label: '2',
  12.           value: '2'
  13.         },
  14.         {
  15.           label: '3',
  16.           value: '3',
  17.           disabled: true
  18.         }
  19.       ]
  20.     }
  21.   }
  22. }

可通过设置 horizontal 为 true 改变样式为水平排列。

使用默认插槽

  1. <cube-radio-group>
  2.   <cube-radio v-for="(option, index) in options4" :key="index" :option="option" v-model="selected4">
  3.     <img :src="option.src"/>
  4.   </cube-radio>
  5. </cube-radio-group>
  1. export default {
  2.   data() {
  3.     return {
  4.       selected4: '1',
  5.       options4: [
  6.         {
  7.           label: '1',
  8.           value: '1',
  9.           src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516805611092&di=80d0f229dd999ffa3be79d6e317832b0&imgtype=0&src=http%3A%2F%2Fimglf0.ph.126.net%2F1EnYPI5Vzo2fCkyy2GsJKg%3D%3D%2F2829667940890114965.jpg'
  10.         },
  11.         {
  12.           label: '2',
  13.           value: '2',
  14.           src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516805611092&di=80d0f229dd999ffa3be79d6e317832b0&imgtype=0&src=http%3A%2F%2Fimglf0.ph.126.net%2F1EnYPI5Vzo2fCkyy2GsJKg%3D%3D%2F2829667940890114965.jpg'
  15.         },
  16.         {
  17.           label: '3',
  18.           value: '3',
  19.           src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516805611092&di=80d0f229dd999ffa3be79d6e317832b0&imgtype=0&src=http%3A%2F%2Fimglf0.ph.126.net%2F1EnYPI5Vzo2fCkyy2GsJKg%3D%3D%2F2829667940890114965.jpg',
  20.           disabled: true
  21.         }
  22.       ]
  23.     }
  24.   }
  25. }

Props 配置

参数 说明 类型 可选值 默认值
options 选项数组 Array - -
position 图标位置 String left/right left
horizontal 是否水平排列 Boolean true/false false
hollowStyle 是否是镂空样式的 Boolean true/false false
  • options 子配置项
参数 说明 类型
label 单选框显示文字 String
value 单选框的值 String/Number
disabled 单选框是否被禁用 Boolean

注：如果 options 中的项为字符串也是可以的，此时默认 label 和 value 的值都为该字符串的值。

cube-radio Props 配置

参数 说明 类型 可选值 默认值
option 选项配置 Object/String - -
position 图标位置 String left/right left
hollow-style 是否是镂空样式的 Boolean true/false false
  • option 子配置项
参数 说明 类型
label 单选框显示文字 String
value 单选框的值 String/Number
disabled 单选框是否被禁用 Boolean

原文:

https://didi.github.io/cube-ui/#/zh-CN/docs/radio