简体中文
FxRadio
约 1178 字大约 4 分钟
2025-12-16
在一组备选项中进行单选
基础用法
由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器。
<template>
<fx-radio v-model="radio" label="1">备选项</fx-radio>
<fx-radio v-model="radio" label="2">备选项</fx-radio>
</template>
<script>
export default {
data () {
return {
radio: '1'
};
}
}
</script>禁用状态
单选框不可用的状态。
<template>
<fx-radio disabled v-model="radio" label="禁用">备选项</fx-radio>
<fx-radio disabled v-model="radio" label="选中且禁用">备选项</fx-radio>
</template>
<script>
export default {
data () {
return {
radio: '选中且禁用'
};
}
}
</script>单选框组
适用于在多个互斥的选项中选择的场景
<template>
<fx-radio-group v-model="radio">
<fx-radio :label="3">备选项</fx-radio>
<fx-radio :label="6">备选项</fx-radio>
<fx-radio :label="9">备选项</fx-radio>
</fx-radio-group>
</template>
<script>
export default {
data () {
return {
radio: 3
};
}
}
</script>按钮样式
按钮样式的单选组合。
<template>
<div>
<fx-radio-group v-model="radio1">
<fx-radio-button label="上海"></fx-radio-button>
<fx-radio-button label="北京"></fx-radio-button>
<fx-radio-button label="广州"></fx-radio-button>
<fx-radio-button label="深圳"></fx-radio-button>
</fx-radio-group>
</div>
<div style="margin-top: 20px">
<fx-radio-group v-model="radio2" size="medium">
<fx-radio-button label="上海" ></fx-radio-button>
<fx-radio-button label="北京"></fx-radio-button>
<fx-radio-button label="广州"></fx-radio-button>
<fx-radio-button label="深圳"></fx-radio-button>
</fx-radio-group>
</div>
<div style="margin-top: 20px">
<fx-radio-group v-model="radio3" size="small">
<fx-radio-button label="上海"></fx-radio-button>
<fx-radio-button label="北京" disabled ></fx-radio-button>
<fx-radio-button label="广州"></fx-radio-button>
<fx-radio-button label="深圳"></fx-radio-button>
</fx-radio-group>
</div>
<div style="margin-top: 20px">
<fx-radio-group v-model="radio4" disabled size="mini">
<fx-radio-button label="上海"></fx-radio-button>
<fx-radio-button label="北京"></fx-radio-button>
<fx-radio-button label="广州"></fx-radio-button>
<fx-radio-button label="深圳"></fx-radio-button>
</fx-radio-group>
</div>
</template>
<script>
export default {
data () {
return {
radio1: '上海',
radio2: '上海',
radio3: '上海',
radio4: '上海'
};
}
}
</script>带有边框
<template>
<div>
<fx-radio v-model="radio1" label="1" border>备选项1</fx-radio>
<fx-radio v-model="radio1" label="2" border>备选项2</fx-radio>
</div>
<div style="margin-top: 20px">
<fx-radio v-model="radio2" label="1" border size="medium">备选项1</fx-radio>
<fx-radio v-model="radio2" label="2" border size="medium">备选项2</fx-radio>
</div>
<div style="margin-top: 20px">
<fx-radio-group v-model="radio3" size="small">
<fx-radio label="1" border>备选项1</fx-radio>
<fx-radio label="2" border disabled>备选项2</fx-radio>
</fx-radio-group>
</div>
<div style="margin-top: 20px">
<fx-radio-group v-model="radio4" size="mini" disabled>
<fx-radio label="1" border>备选项1</fx-radio>
<fx-radio label="2" border>备选项2</fx-radio>
</fx-radio-group>
</div>
</template>
<script>
export default {
data () {
return {
radio1: '1',
radio2: '1',
radio3: '1',
radio4: '1'
};
}
}
</script>Radio Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | PC/移动端支持情况 |
|---|---|---|---|---|---|
| value / v-model | 绑定值 | string / number / boolean | — | — | PC/移动端 |
| label | Radio 的 value | string / number / boolean | — | — | PC/移动端 |
| disabled | 是否禁用 | boolean | — | false | PC/移动端 |
| border | 是否显示边框 | boolean | — | false | 仅PC |
| size | Radio 的尺寸,仅在 border 为真时有效 | string | medium / small / mini | — | 仅PC |
| name | 原生 name 属性 | string | — | — | 仅PC |
Radio Events
| 事件名称 | 说明 | 回调参数 | PC/移动端支持情况 |
|---|---|---|---|
| change | 绑定值变化时触发的事件 | 选中的 Radio label 值 | PC/移动端 |
Radio-group Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |PC/移动端支持情况 | |---------- |-------- |---------- |------------- |-------- |-------- |-------- | | value / v-model | 绑定值 | string / number / boolean | — | — |PC/移动端 | | size | 单选框组尺寸,仅对按钮形式的 Radio 或带有边框的 Radio 有效 | string | medium / small / mini | — |仅PC | | disabled | 是否禁用 | boolean | — | false |PC/移动端 | | text-color | 按钮形式的 Radio 激活时的文本颜色 | string | — | #ffffff |仅PC | | fill | 按钮形式的 Radio 激活时的填充色和边框色 | string | — | #409EFF |仅PC |
Radio-group Events
| 事件名称 | 说明 | 回调参数 | PC/移动端支持情况 |
|---|---|---|---|
| change | 绑定值变化时触发的事件 | 选中的 Radio label 值 | PC/移动端 |
Radio-button Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | PC/移动端支持情况 |
|---|---|---|---|---|---|
| label | Radio 的 value | string / number | — | — | PC/移动端 |
| disabled | 是否禁用 | boolean | — | false | PC/移动端 |
| name | 原生 name 属性 | string | — | — | 仅PC |
