一、组件简介

AppInput 的 radiogroup 类型的组件对 ant design <a-radio-group /> (opens new window) 组件的二次封装。

二、Props 参数

属性	说明	类型	可选值	默认值
columns	配置项	object		undefined
value	输入框内容	string		undefined
typeParams	类型参数	object		{}
size	控件大小，配置项中没有 size 属性时，使用此属性	string	large、default、small	small
reseal	是否要重新封装组件	boolean		false

2.1 columns 详细配置

属性	说明	类型	可选值	默认值
xtype	AppInput的类型	string		textfield
defaultValue	默认值	string	预设默认值	undefined
disabled	是否禁用(优先)	boolean, function(typeParams): boolean		false
readOnly	与 disabled 功能相同 (优先取disabled)	boolean		false
size	控件大小	string	large、default、small	small
name	RadioGroup 下所有 input[type="radio"] 的 name 属性	string		'radiogroup'
direction	RadioGroup 的方向	string	vertical、horizontal	'horizontal'
options	RadioGroup 选项配置	array	options详解

options 详解

属性	说明	类型	可选值	默认值
label	当前选项的标签	string		undefined
value	当前选项的值	string		undefined
disabled	当前选项是否禁用	string,function		false
display	当前选项的 css display 属性		MDN 文档 (opens new window)
lineHeight	当前选项的 css lineHeight 属性		MDN 文档 (opens new window)
height	当前选项的 css height 属性		MDN 文档 (opens new window)

2.2 typeParams 说明

typeParams 译为类型参数，用来标记当前输入组件的类型，它是一个对象，可以为其传递任意属性，当值发生变化后，会将其按原样返回。

例如：

• 在表格中使用时，希望为其添加行记录 :typeParams="{ row }"
• 在表单中使用时，希望为其添加表单数据 :typeParams="{ formData }"

三、Events 事件

属性	说明	参数
valueChange	当数据改变后触发	{ columns: 列配置对象, value: 当前值, oldValue: 旧值 }

提示

• Events 事件中的方法均可挂载在配置项下
• 当需要重新封装组件（reseal 为 true）时，若挂载在配置项下，则无效

四、简单示例

<template>
  <app-input :value.sync="radiogroup" :columns="radiogroupColumns" />
</template>
<script>
export default {
  name: '组件应有自己的名字，首字母大写，按目录使用驼峰命名',
  data () {
    radiogroup: undefined,
    radiogroupColumns: {
      xtype: 'radiogroup',
      options: [
        { label: 'Html', value: 'html' },
        { label: 'CSS', value: 'css', disabled: false },
        { label: 'JavaScript', value: 'javascript', disabled: true }
      ]
      // defaultValue: 0,
      // size: 'small',
      // disabled: true,
      // readOnly: true,
      // valueChange: ({ value }) => {
      //   console.log(value)
      // }
    }
  }
}
</script>