Ant Design Vue教程

Ant Design Vue Radio属性和事件

Ant Design Vue Radio属性和事件列表

Radio属性

属性名称
说明类型默认值
autoFocus自动获取焦点
<a-radio :autoFocus="true">Radio</a-radio>                  
cdn引入js开发方式(把大写用-隔开)
<a-radio :auto-focus="true">Radio</a-radio>
booleanfalse
checked设置当前项是否选中booleanfalse
defaultChecked初始是否选中booleanfalse
value对应的值any-

RadioGroup属性

属性名称说明类型默认值
defaultValue初始是否选中any
disabled禁选所有子radio单选器booleanfalse
name通过设置name来区分按钮组string-
options以配置形式设置子元素 string[] | Array<{ label: string value: string disabled?: boolean }>
具体用法请看网页底部
size控件大小,只对按钮样式生效large | default | smalldefault
value(v-model)设置当前选中的值any
buttonStyleRadioButton 按钮组的风格样式,目前有描边和填色两种风格outline | solidoutline

RadioGroup 事件

事件名称说明参数
change选中值改变时触发事件function(e:Event)

Radio方法

事件名称说明
blur()移除焦点
focus()获取焦点

options属性例子

<template>
  <div>
    <div>
      <a-radio-group  :options="options" > 
      </a-radio-group>
    </div> 
  </div>
</template>
<script>
export default {
  data() {
    return {
      options:[
        {label:'浙江',value:'zj',disabled:false},
        {label:'江西',value:'jx',disabled:false},
        {label:'深圳',value:'jx',disabled:true}]
    };
  },
  methods: {
    onChange(e) {
      console.log(`checked = ${e.target.value}`);
    },
  },
};
</script>


Catalog
快速入门 Dropdown 下拉菜单 Menu 导航菜单 Pagination 分页 Steps 步骤条 AutoComplete 自动填充 Cascader 级联选择 Checkbox 多选框 DatePicker 日期选择框 Input 输入框 InputNumber 数字输入框 Mentions 提及 Radio 单选框 Radio 单选框用法 Radio 单选框分组 Radio 按钮样式 Radio 属性事件 Rate 评分组件 Select 下拉框 Slider 滑动输入条 Switch 开关