RadioGroup
单选按钮组。
示例
默认用法
<nut-radiogroup :data="data1"></nut-radiogroup>
export default {
data(){
return{
data1:[
{id:1,name:'test1',value:1},
{id:2,name:'test1',value:2},
{id:3,name:'test1',value:3},
{id:4,name:'test1',value:4},
{id:5,name:'test1',value:5}
]
}
}
}
回调事件
<nut-radiogroup
:data="data2"
:inline="true"
@radio-check="radioChecked">
</nut-radiogroup>
export default {
data(){
return{
data2:[
{id:10,name:'test',value:'是',checked:true},
{id:12,name:'test',value:'否'},
]
}
},
methods:{
radioChecked(item,index,event){
alert(item.value);
}
}
}
禁用选项
<nut-radiogroup
:className="'radiolist'"
:data="data3"
@radio-check="radioChecked2">
</nut-radiogroup>
export default {
data(){
return{
data3:[
{id:11,name:'test2',value:'足球'},
{id:22,name:'test2',value:'篮球',checked:true},
{id:33,name:'test2',value:'羽毛球'},
{id:44,name:'test2',value:'乒乓球',disabled:true},
{id:55,name:'test2',value:'排球'}
]
}
},
methods:{
radioChecked2(item,index,event){
console.log(item,index,event);
}
}
}
Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|
data | 单选数组的数据,此项为必填项,渲染整个单选组件 | Array | '' | checked属性值为true默认选中,disabled属性值为true禁用选项 |
inline | 展示成一行 | Boolean | false | — |
Events
事件名 | 说明 | 回调参数 |
---|
radio-check | 选择时触发回调函数 | item,index,event |