radio/index.js

  1. /**
  2.  * @component Radio
  3.  * @description
  4.  *
  5.  * ## 表单组件 / Radio单选框组件
  6.  *
  7.  * ### 注意
  8.  *
  9.  * 使用v-modal切换状态(数据控制), 不支持checked属性, value为纯string字段, 用于唯一标识;
  10.  *
  11.  * ### 其他
  12.  *
  13.  * - 组件支持异步操作实例化
  14.  * - 目前组件的层级嵌套关系如下:  List -> Item -> Radio
  15.  * - 动态设置了单个radio的禁用状态, 如果之前是选中的则取消选中, 手动点击和数据选中都会生效
  16.  *
  17.  * ### 如何引入
  18.  * ```
  19.  * // 引入
  20.  * import {Radio} from 'vimon'
  21.  * // 安装
  22.  * Vue.component(Radio.name, Radio)
  23.  * // 或者
  24.  * export default{
  25.  *   components: {
  26.  *    Radio
  27.  *  }
  28.  * }
  29.  * ```
  30.  *
  31.  * @props {String} [mode='ios'] - 模式
  32.  * @props {String} [color] - 颜色
  33.  * @props {Boolean} [disabled=false] - 单向选择, 点击且换并不对父组件传递
  34.  *
  35.  * @fire component:Radio#onSelect - 点按选择时触发
  36.  * @demo #/radio
  37.  * @usage
  38.  * <List radio-group v-model="fruits" :disabled="isListDisabled">
  39.  *    <ListHeader>Fruits</ListHeader>
  40.  *    <Item>
  41.  *        <Label>Apple</Label>
  42.  *        <Radio value="apple" :disabled="isAppleDisabled" @onSelect="onSelectHandler"></Radio>
  43.  *    </Item>
  44.  *    <Item>
  45.  *        <Label>Banana</Label>
  46.  *        <Radio value="banana" color="danger" @onSelect="onSelectHandler"></Radio>
  47.  *    </Item>
  48.  *    <Item>
  49.  *        <Label>Cherry (secondary color)</Label>
  50.  *        <Radio value="cherry" color="secondary" @onSelect="onSelectHandler"></Radio>
  51.  *    </Item>
  52.  *    <Item>
  53.  *         <Label>Disabled</Label>
  54.  *        <Radio value="disabled" :disabled="true" @onSelect="onSelectHandler"></Radio>
  55.  *    </Item>
  56.  *    <Item>
  57.  *        <Label>Default</Label>
  58.  *        <Radio value="default" @onSelect="onSelectHandler"></Radio>
  59.  *    </Item>
  60.  * </List>
  61.  *
  62.  **/
  63. export { default } from './radio.vue'