菜园前端

Appearance

Radio 单选框 ​

在一组选项中进行单选

按需引入方式 ​

如果是完整引入可跳过此步骤

javascript
import Vue from 'vue'
import { Radio, RadioGroup } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/radio.css'
import 'element-ui/lib/theme-chalk/radio-group.css'

Vue.use(Radio)
Vue.use(RadioGroup)
import Vue from 'vue'
import { Radio, RadioGroup } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/radio.css'
import 'element-ui/lib/theme-chalk/radio-group.css'

Vue.use(Radio)
Vue.use(RadioGroup)

基础使用 ​

适用于选项过少的情况下，若选项过多建议使用 Select 选择器。

vue
<template>
    <el-radio v-model="radio" label="1"> 选项 A </el-radio>
    <el-radio v-model="radio" label="2"> 选项 B </el-radio>
</template>

<script>
export default {
    data() {
        return {
            radio: '1'
        }
    }
}
</script>
<template>
    <el-radio v-model="radio" label="1"> 选项 A </el-radio>
    <el-radio v-model="radio" label="2"> 选项 B </el-radio>
</template>

<script>
export default {
    data() {
        return {
            radio: '1'
        }
    }
}
</script>

禁用状态 ​

vue
<template>
    <el-radio disabled v-model="radio" label="1"> 选项 A </el-radio>
    <el-radio disabled v-model="radio" label="2"> 选项 B </el-radio>
</template>

<script>
export default {
    data() {
        return {
            radio: '1'
        }
    }
}
</script>
<template>
    <el-radio disabled v-model="radio" label="1"> 选项 A </el-radio>
    <el-radio disabled v-model="radio" label="2"> 选项 B </el-radio>
</template>

<script>
export default {
    data() {
        return {
            radio: '1'
        }
    }
}
</script>

单选框组 ​

适用于多个场景中使用

vue
<template>
    <el-radio-group v-model="radio">
        <el-radio label="1">选项 A</el-radio>
        <el-radio label="2">选项 B</el-radio>
    </el-radio-group>
</template>

<script>
export default {
    data() {
        return {
            radio: '1'
        }
    }
}
</script>
<template>
    <el-radio-group v-model="radio">
        <el-radio label="1">选项 A</el-radio>
        <el-radio label="2">选项 B</el-radio>
    </el-radio-group>
</template>

<script>
export default {
    data() {
        return {
            radio: '1'
        }
    }
}
</script>

Radio Attributes ​

参数说明类型默认值
v-model绑定值string | number | boolean
labelRadio 的 valuestring | number | boolean
disabled是否禁用booleanfalse
...