一、Radio 选择框
参数
| 参数 |
类型 |
必选 |
默认值 |
说明 |
| checked |
Boolean |
否 |
false |
按钮是否选中 |
| value |
Boolean, String, Number |
’’ |
按钮被选中后的值 |
—— |
| borderColor |
string |
否 |
#7383a2 |
边框样式 |
Events
| 事件名称 |
参数 |
说明 |
| change |
(value) |
按钮被选中时，触发该事件，参数为按钮值。取消选中时，不会触发该事件 |
使用示例
<template>
<div>
<Radio :checked="checked" @change="onChange" :borderColor="'red'"/>
</div>
</template>
<script>
import { Radio } from 'genie-ui'
export default {
components: {
Radio
},
data () {
return {
checked: false
}
},
methods: {
// 按钮被选中时，触发该事件，参数为按钮值。取消选中时，不会触发该事件
onChange() {
this.checked = !this.checked;
}
}
}
</script>
二、RadioGroup
单选按钮组，实际使用按钮时，使用该组件更为方便。
参数
| 参数 |
类型 |
必选 |
默认值 |
说明 |
| value |
Boolean, String, Number |
是 |
’’ |
按钮组中，当前被选中的按钮值 |
| options |
Array |
是 |
[] |
初始化按钮列表，其属性见下表说明 |
| borderColor |
string |
否 |
#7383a2 |
边框样式 |
options
| 参数 |
类型 |
必选 |
默认值 |
说明 |
| value |
Boolean, String, Number |
是 |
—— |
该按钮被选中时的值 |
| title |
String |
是 |
—— |
该按钮选项标题 |
Events
| 事件名称 |
参数 |
说明 |
| change |
(value) |
按钮被选中时，触发该事件，参数为按钮值 |
使用示例
<template>
<div>
<h2>选中值: {{value}}</h2>
<radio-group
v-model="value"
:options="options"
@change="onChange"
></radio-group>
</div>
</template>
<script>
import { RadioGroup } from 'genie-ui'
export default {
components: {
RadioGroup
},
data () {
return {
options: [{ value: 1, checked: true, title: '东方红' }, { value: 2, checked: false, title: '东方红2' }],
value: 1
}
},
methods: {
onChange (v) {
console.log('radio changed, new value:', v)
}
}
}
</script>
FAQ
关于此文档暂时还没有FAQ
