单选 (bui-radio)

用法
1. <bui-radio :items="radioItems" direction="horizontal" @change="radioChange" ></bui-radio>
2. <bui-radio-list v-model="selectedValue" @change="changeValue" :items="items"></bui-radio-list>
1. data () {
2. return {
3. selectedValue:"2",
4. items:[
5. {value:"1",title:'全部'},
6. {value:"2",title:'选项一'},
7. {value:"3",title:'选项二'},
8. {value:"4",title:'选项三'}
9. ]
10. }
11. },
12. methods: {
13. changeValue(value){
14. this.$toast(value);
15. }
16. }
Example: bui-radio
属性
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
value |
string |
Y |
可使用v-model双向绑定数据 |
|
items |
array |
Y |
数据项 | |
direction |
string |
N |
horizontal |
方向: horizontal vertical |
fontSize |
number |
N |
48 |
大小 |
iconSize |
number |
N |
32 |
大小 |
selectedColor |
string |
N |
#00cc66 |
颜色 |
unSelectedColor |
string |
N |
#9ea7b4 |
颜色 |
items: 赋值单选组数据列表,传一个数组,单个数组的属性如下: |
||||
| * value :单选项值 | ||||
| * title :单选项文本 | ||||
| * disabled :表明是否激活按钮, true为激活、false为不激活、默认值为false |
事件
@change:选中时触发的事件,返回选中的value
