[comp: Radio] add Radio component

[lwh2015]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

• 用于在多个备选项中选中单个状态。
• 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。

What does the proposed API look like?

Radio Attributes

属性	说明	类型	全局配置
value / v-model	绑定值	string / number / boolean	-
label	Radio 的 value	string / number / boolean	-
disabled	是否禁用	boolean	-
name	原生的name属性	string	-

Radio Events

事件名称	说明	回调参数
change	绑定值变化时触发的事件	选中的 Radio label 值

Radio-group Attributes

参数	说明	类型	全局配置
value / v-model	绑定值	string / number / boolean	-
size	单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效	string	-
disabled	是否禁用	boolean	-
mode	填充模式	string	-

Radio-group Events

事件名称	说明	回调参数
change	绑定值变化时触发的事件	选中的 Radio label 值

Radio-button Attributes

参数	说明	类型	全局配置
label	Radio 的 value	string / number	-
disabled	是否禁用	boolean	-
name	原生 name 属性	string	-
border	是否显示边框	boolean	-
size	Radio 的尺寸，仅在 border 为true时有效	string	-

[danranVm]

@coolyuantao @danranVm 负责此组件的 review， API 设计完成后请 @ 他们

[coolyuantao]

radio

1. label 这个配置都用slot的方式
2. border 没这个必要，即使有后面也应该是皮肤处理即可。radio-button的也需要不这个配置，意义不大
3. 单个radio没必要搞个size

这样radio跟radio-button单项配置可以一样，其它配置都放在 radio-group上面

radio-group

1. size配置跟button的保留一样的命名吧：large, medium, small，仅在radio-button下生效
2. border, fill, text-color 建议改成：mode: 'fill' | 'border', 表示填充或者只是边框高亮，然后再添加 color 配置这个为选中后的颜色（包含边框文字 或者 是填充色），即把三个配置变成两个。特别说明：color在radio的场景也可以生效

<radio-group v-model="xxxx" size="medium" mode="fill" color=“#F00”>
    <radio-button :value="1">我是选项1<radio-button>
    <radio-button :value="2">我是选项2<radio-button>
</radiogroup>

<radio-group v-model="xxx" color=“#F00”>
    <radio :value="1">我是选项1<radio-button>
    <radio :value="2">我是选项2<radio-button>
</radiogroup>

[lwh2015]

radio

1. label 这个配置都用slot的方式
2. border 没这个必要，即使有后面也应该是皮肤处理即可。radio-button的也需要不这个配置，意义不大
3. 单个radio没必要搞个size

这样radio跟radio-button单项配置可以一样，其它配置都放在 radio-group上面

radio-group

1. size配置跟button的保留一样的命名吧：large, medium, small，仅在radio-button下生效
2. border, fill, text-color 建议改成：mode: 'fill' | 'border', 表示填充或者只是边框高亮，然后再添加 color 配置这个为选中后的颜色（包含边框文字 或者 是填充色），即把三个配置变成两个。特别说明：color在radio的场景也可以生效

<radio-group v-model="xxxx" size="medium" mode="fill" color=“#F00”>
    <radio-button :value="1">我是选项1<radio-button>
    <radio-button :value="2">我是选项2<radio-button>
</radiogroup>

<radio-group v-model="xxx" color=“#F00”>
    <radio :value="1">我是选项1<radio-button>
    <radio :value="2">我是选项2<radio-button>
</radiogroup>

radio

1. label这个配置相当于例子中的value，作为用户在没有使用slot方式时默认显示label的内容
2. border和size，在单个radio的时候不直接暴露给用户使用，会经过validator方法判断父节点是否是radio-button才会生效

radio-group

1. size与button命名一致
2. color是要做到支持单个radio也能配置？还是仅仅在组的模式下才支持？

[coolyuantao]

radio

1. label 这个配置都用slot的方式
2. border 没这个必要，即使有后面也应该是皮肤处理即可。radio-button的也需要不这个配置，意义不大
3. 单个radio没必要搞个size

这样radio跟radio-button单项配置可以一样，其它配置都放在 radio-group上面

radio-group

1. size配置跟button的保留一样的命名吧：large, medium, small，仅在radio-button下生效
2. border, fill, text-color 建议改成：mode: 'fill' | 'border', 表示填充或者只是边框高亮，然后再添加 color 配置这个为选中后的颜色（包含边框文字 或者 是填充色），即把三个配置变成两个。特别说明：color在radio的场景也可以生效

<radio-group v-model="xxxx" size="medium" mode="fill" color=“#F00”>
    <radio-button :value="1">我是选项1<radio-button>
    <radio-button :value="2">我是选项2<radio-button>
</radiogroup>

<radio-group v-model="xxx" color=“#F00”>
    <radio :value="1">我是选项1<radio-button>
    <radio :value="2">我是选项2<radio-button>
</radiogroup>

radio

1. label这个配置相当于例子中的value，作为用户在没有使用slot方式时默认显示label的内容
2. border和size，在单个radio的时候不直接暴露给用户使用，会经过validator方法判断父节点是否是radio-button才会生效

radio-group

1. size与button命名一致
2. color是要做到支持单个radio也能配置？还是仅仅在组的模式下才支持？

仅在radiogroup生效就好吧，单个没必要。话说有单个radio的使用场景？这个又像 checkbox 应该只有组件库内部可能使用到

[lwh2015]

radio

1. label 这个配置都用slot的方式
2. border 没这个必要，即使有后面也应该是皮肤处理即可。radio-button的也需要不这个配置，意义不大
3. 单个radio没必要搞个size

这样radio跟radio-button单项配置可以一样，其它配置都放在 radio-group上面

radio-group

1. size配置跟button的保留一样的命名吧：large, medium, small，仅在radio-button下生效
2. border, fill, text-color 建议改成：mode: 'fill' | 'border', 表示填充或者只是边框高亮，然后再添加 color 配置这个为选中后的颜色（包含边框文字 或者 是填充色），即把三个配置变成两个。特别说明：color在radio的场景也可以生效

<radio-group v-model="xxxx" size="medium" mode="fill" color=“#F00”>
    <radio-button :value="1">我是选项1<radio-button>
    <radio-button :value="2">我是选项2<radio-button>
</radiogroup>

<radio-group v-model="xxx" color=“#F00”>
    <radio :value="1">我是选项1<radio-button>
    <radio :value="2">我是选项2<radio-button>
</radiogroup>

radio

1. label这个配置相当于例子中的value，作为用户在没有使用slot方式时默认显示label的内容
2. border和size，在单个radio的时候不直接暴露给用户使用，会经过validator方法判断父节点是否是radio-button才会生效

radio-group

1. size与button命名一致
2. color是要做到支持单个radio也能配置？还是仅仅在组的模式下才支持？

仅在radiogroup生效就好吧，单个没必要。话说有单个radio的使用场景？这个又像 checkbox 应该只有组件库内部可能使用到

是的，只有内部可能会使用到，不会暴露给用户去使用，这些个api会进行父节点判断是否生效

[lwh2015]

@coolyuantao 这里稍加做了修改，会分为ix-radio和ix-radio-button两个组件，ix-radio-group通过slot渲染子组件，ix-radio不接收border和size属性，api已经更新。这样子去实现是否可行

[danranVm]

我们在实现一个表单组件的时候，需要尽可能的跟原生表单的行为一致
实现也尽可能的使用原生表单组件, 例如你在实现的时候可以使用 <input type="radio" />
建议 API 调整一下, ix-radio 和 ix-radio-buuton 的 props 完全一致。

ix-radio & ix-radio-buuton

Props

名称	说明	类型	默认值	全局配置	备注
checked(v-model)	当前是否选中	boolean	false	-	-
value	设置值，与 ix-radio-group 搭配使用	any	-	-	-
disabled	是否禁用	boolean	false	-	-

Emits

radio 组件无序提供 change 的 emit, 直接 watch 绑定 v-model 的值即可。

ix-radio-group

Props

名称	说明	类型	默认值	全局配置	备注
value(v-model)	选中的 ix-radio 或 ix-radio-button 的 value 值	any	-	-	-
name	所有 input[type="radio"] 的 name 属性	string	false	-	-
disabled	是否禁用	boolean	false	-	-
size	尺寸	large|medium|small	medium	✅	-

Emits

名称	说明	参数类型	备注
change	选中变化时回调	any	选中 Radio 的 value 值

[danranVm]

同时也强调一下，我们的 API 设计参考 antd

[coolyuantao]

change这个还是要保留，表单组件这些都保持一致更好

[lwh2015]

在设计按钮组时，使用的size是否需要在表单的时候进行配置？ 例如

const radioGroupSize = computed(() => {
      return props.size || form.size||radioGroupConfig.size
 })

@danranVm @coolyuantao

[danranVm]

在设计按钮组时，使用的size是否需要在表单的时候进行配置？ 例如

const radioGroupSize = computed(() => {
      return props.size || form.size||radioGroupConfig.size
 })

@danranVm @coolyuantao

form 暂时不会有 size 的配置