2020-08-13 15:18:26 +08:00
|
|
|
|
## Radio 单选框
|
|
|
|
|
|
|
|
|
|
在一组备选项中进行单选
|
|
|
|
|
|
|
|
|
|
### 基础用法
|
|
|
|
|
|
|
|
|
|
由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器。
|
|
|
|
|
|
|
|
|
|
:::demo 要使用 Radio 组件,只需要设置`v-model`绑定变量,选中意味着变量的值为相应 Radio `label`属性的值,`label`可以是`String`、`Number`或`Boolean`。
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<template>
|
|
|
|
|
<el-radio v-model="radio" label="1">备选项</el-radio>
|
|
|
|
|
<el-radio v-model="radio" label="2">备选项</el-radio>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
radio: '1'
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2021-05-31 14:31:01 +08:00
|
|
|
|
<!--
|
|
|
|
|
<setup>
|
2021-07-16 10:53:22 +08:00
|
|
|
|
import { defineComponent, ref } from 'vue'
|
2021-05-31 14:31:01 +08:00
|
|
|
|
|
2021-07-16 10:53:22 +08:00
|
|
|
|
export default defineComponent({
|
2021-05-31 14:31:01 +08:00
|
|
|
|
setup() {
|
2021-07-16 10:53:22 +08:00
|
|
|
|
return {
|
|
|
|
|
radio: ref('1'),
|
|
|
|
|
}
|
2021-05-31 14:31:01 +08:00
|
|
|
|
}
|
2021-07-16 10:53:22 +08:00
|
|
|
|
})
|
2021-05-31 14:31:01 +08:00
|
|
|
|
</setup>
|
|
|
|
|
-->
|
2020-08-13 15:18:26 +08:00
|
|
|
|
```
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
### 禁用状态
|
|
|
|
|
|
|
|
|
|
单选框不可用的状态。
|
|
|
|
|
|
|
|
|
|
:::demo 只要在`el-radio`元素中设置`disabled`属性即可,它接受一个`Boolean`,`true`为禁用。
|
|
|
|
|
```html
|
|
|
|
|
<template>
|
|
|
|
|
<el-radio disabled v-model="radio" label="禁用">备选项</el-radio>
|
|
|
|
|
<el-radio disabled v-model="radio" label="选中且禁用">备选项</el-radio>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
radio: '选中且禁用'
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2021-06-30 15:11:12 +08:00
|
|
|
|
<!--
|
|
|
|
|
<setup>
|
2021-07-16 10:53:22 +08:00
|
|
|
|
import { defineComponent, ref } from 'vue'
|
2021-06-30 15:11:12 +08:00
|
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
|
setup() {
|
|
|
|
|
return {
|
|
|
|
|
radio: ref('选中且禁用'),
|
2021-07-16 10:53:22 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
2021-06-30 15:11:12 +08:00
|
|
|
|
</setup>
|
|
|
|
|
-->
|
2020-08-13 15:18:26 +08:00
|
|
|
|
```
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
### 单选框组
|
|
|
|
|
|
|
|
|
|
适用于在多个互斥的选项中选择的场景
|
|
|
|
|
|
|
|
|
|
:::demo 结合`el-radio-group`元素和子元素`el-radio`可以实现单选组,在`el-radio-group`中绑定`v-model`,在`el-radio`中设置好`label`即可,无需再给每一个`el-radio`绑定变量,另外,还提供了`change`事件来响应变化,它会传入一个参数`value`。
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<template>
|
|
|
|
|
<el-radio-group v-model="radio">
|
|
|
|
|
<el-radio :label="3">备选项</el-radio>
|
|
|
|
|
<el-radio :label="6">备选项</el-radio>
|
|
|
|
|
<el-radio :label="9">备选项</el-radio>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
radio: 3
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2021-06-30 15:11:12 +08:00
|
|
|
|
<!--
|
|
|
|
|
<setup>
|
2021-07-16 10:53:22 +08:00
|
|
|
|
import { defineComponent, ref } from 'vue'
|
2021-06-30 15:11:12 +08:00
|
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
|
setup() {
|
|
|
|
|
return {
|
|
|
|
|
radio: ref(3),
|
2021-07-16 10:53:22 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
2021-06-30 15:11:12 +08:00
|
|
|
|
</setup>
|
|
|
|
|
-->
|
2020-08-13 15:18:26 +08:00
|
|
|
|
```
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
### 按钮样式
|
|
|
|
|
|
|
|
|
|
按钮样式的单选组合。
|
|
|
|
|
|
2020-10-16 11:14:34 +08:00
|
|
|
|
:::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可,此外,Element Plus 还提供了`size`属性。
|
2020-08-13 15:18:26 +08:00
|
|
|
|
```html
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<el-radio-group v-model="radio1">
|
|
|
|
|
<el-radio-button label="上海"></el-radio-button>
|
|
|
|
|
<el-radio-button label="北京"></el-radio-button>
|
|
|
|
|
<el-radio-button label="广州"></el-radio-button>
|
|
|
|
|
<el-radio-button label="深圳"></el-radio-button>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 20px">
|
|
|
|
|
<el-radio-group v-model="radio2" size="medium">
|
|
|
|
|
<el-radio-button label="上海" ></el-radio-button>
|
|
|
|
|
<el-radio-button label="北京"></el-radio-button>
|
|
|
|
|
<el-radio-button label="广州"></el-radio-button>
|
|
|
|
|
<el-radio-button label="深圳"></el-radio-button>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 20px">
|
|
|
|
|
<el-radio-group v-model="radio3" size="small">
|
|
|
|
|
<el-radio-button label="上海"></el-radio-button>
|
|
|
|
|
<el-radio-button label="北京" disabled ></el-radio-button>
|
|
|
|
|
<el-radio-button label="广州"></el-radio-button>
|
|
|
|
|
<el-radio-button label="深圳"></el-radio-button>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 20px">
|
|
|
|
|
<el-radio-group v-model="radio4" disabled size="mini">
|
|
|
|
|
<el-radio-button label="上海"></el-radio-button>
|
|
|
|
|
<el-radio-button label="北京"></el-radio-button>
|
|
|
|
|
<el-radio-button label="广州"></el-radio-button>
|
|
|
|
|
<el-radio-button label="深圳"></el-radio-button>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
radio1: '上海',
|
|
|
|
|
radio2: '上海',
|
|
|
|
|
radio3: '上海',
|
|
|
|
|
radio4: '上海'
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2021-06-30 15:11:12 +08:00
|
|
|
|
<!--
|
|
|
|
|
<setup>
|
2021-07-16 10:53:22 +08:00
|
|
|
|
import { defineComponent, ref } from 'vue'
|
2021-06-30 15:11:12 +08:00
|
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
|
setup() {
|
|
|
|
|
return {
|
|
|
|
|
radio1: ref('上海'),
|
|
|
|
|
radio2: ref('上海'),
|
|
|
|
|
radio3: ref('上海'),
|
|
|
|
|
radio4: ref('上海'),
|
2021-07-16 10:53:22 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
2021-06-30 15:11:12 +08:00
|
|
|
|
</setup>
|
|
|
|
|
-->
|
2020-08-13 15:18:26 +08:00
|
|
|
|
```
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
### 带有边框
|
|
|
|
|
|
|
|
|
|
:::demo 设置`border`属性可以渲染为带有边框的单选框。
|
|
|
|
|
```html
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<el-radio v-model="radio1" label="1" border>备选项1</el-radio>
|
|
|
|
|
<el-radio v-model="radio1" label="2" border>备选项2</el-radio>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 20px">
|
|
|
|
|
<el-radio v-model="radio2" label="1" border size="medium">备选项1</el-radio>
|
|
|
|
|
<el-radio v-model="radio2" label="2" border size="medium">备选项2</el-radio>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 20px">
|
|
|
|
|
<el-radio-group v-model="radio3" size="small">
|
|
|
|
|
<el-radio label="1" border>备选项1</el-radio>
|
|
|
|
|
<el-radio label="2" border disabled>备选项2</el-radio>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 20px">
|
|
|
|
|
<el-radio-group v-model="radio4" size="mini" disabled>
|
|
|
|
|
<el-radio label="1" border>备选项1</el-radio>
|
|
|
|
|
<el-radio label="2" border>备选项2</el-radio>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
radio1: '1',
|
|
|
|
|
radio2: '1',
|
|
|
|
|
radio3: '1',
|
|
|
|
|
radio4: '1'
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2021-06-30 15:11:12 +08:00
|
|
|
|
<!--
|
|
|
|
|
<setup>
|
2021-07-16 10:53:22 +08:00
|
|
|
|
import { defineComponent, ref } from 'vue'
|
2021-06-30 15:11:12 +08:00
|
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
|
setup() {
|
|
|
|
|
return {
|
|
|
|
|
radio1: ref('1'),
|
|
|
|
|
radio2: ref('1'),
|
|
|
|
|
radio3: ref('1'),
|
|
|
|
|
radio4: ref('1'),
|
2021-07-16 10:53:22 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
2021-06-30 15:11:12 +08:00
|
|
|
|
</setup>
|
|
|
|
|
-->
|
2020-08-13 15:18:26 +08:00
|
|
|
|
```
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
### Radio Attributes
|
|
|
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
|
|
|
|---------- |-------- |---------- |------------- |-------- |
|
2021-05-24 11:10:53 +08:00
|
|
|
|
| model-value / v-model | 绑定值 | string / number / boolean | — | — |
|
2020-08-13 15:18:26 +08:00
|
|
|
|
| label | Radio 的 value | string / number / boolean | — | — |
|
|
|
|
|
| disabled | 是否禁用 | boolean | — | false |
|
|
|
|
|
| border | 是否显示边框 | boolean | — | false |
|
|
|
|
|
| size | Radio 的尺寸,仅在 border 为真时有效 | string | medium / small / mini | — |
|
|
|
|
|
| name | 原生 name 属性 | string | — | — |
|
|
|
|
|
|
|
|
|
|
### Radio Events
|
|
|
|
|
| 事件名称 | 说明 | 回调参数 |
|
|
|
|
|
|---------- |-------- |---------- |
|
|
|
|
|
| change | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
|
|
|
|
|
|
|
|
|
|
### Radio-group Attributes
|
|
|
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
|
|
|
|---------- |-------- |---------- |------------- |-------- |
|
2021-05-24 11:10:53 +08:00
|
|
|
|
| model-value / v-model | 绑定值 | string / number / boolean | — | — |
|
2020-08-13 15:18:26 +08:00
|
|
|
|
| size | 单选框组尺寸,仅对按钮形式的 Radio 或带有边框的 Radio 有效 | string | medium / small / mini | — |
|
|
|
|
|
| disabled | 是否禁用 | boolean | — | false |
|
|
|
|
|
| text-color | 按钮形式的 Radio 激活时的文本颜色 | string | — | #ffffff |
|
|
|
|
|
| fill | 按钮形式的 Radio 激活时的填充色和边框色 | string | — | #409EFF |
|
|
|
|
|
|
|
|
|
|
### Radio-group Events
|
|
|
|
|
| 事件名称 | 说明 | 回调参数 |
|
|
|
|
|
|---------- |-------- |---------- |
|
|
|
|
|
| change | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
|
|
|
|
|
|
|
|
|
|
### Radio-button Attributes
|
|
|
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
|
|
|
|---------- |-------- |---------- |------------- |-------- |
|
|
|
|
|
| label | Radio 的 value | string / number | — | — |
|
|
|
|
|
| disabled | 是否禁用 | boolean | — | false |
|
|
|
|
|
| name | 原生 name 属性 | string | — | — |
|