<template>
    <div class="radio-container">
        <vab-card shadow="never">
            <template #header>
                <span>基础用法</span>
            </template>
            <el-radio v-model="radio" label="1">备选项</el-radio>
            <el-radio v-model="radio" label="2">备选项</el-radio>
        </vab-card>
        <vab-card shadow="never">
            <template #header>
                <span>禁用状态</span>
            </template>
            <el-radio v-model="radio2" disabled label="禁用">备选项</el-radio>
            <el-radio v-model="radio2" disabled label="选中且禁用">
                备选项
            </el-radio>
        </vab-card>
        <vab-card shadow="never">
            <template #header>
                <span>单选框组</span>
            </template>
            <el-radio-group v-model="radio3">
                <el-radio :label="3" value="3">备选项</el-radio>
                <el-radio :label="6" value="6">备选项</el-radio>
                <el-radio :label="9" value="9">备选项</el-radio>
            </el-radio-group>
        </vab-card>
        <vab-card shadow="never">
            <template #header>
                <span>按钮样式</span>
            </template>
            <el-radio-group v-model="radio4">
                <el-radio-button label="上海" value="上海" />
                <el-radio-button label="北京" value="北京" />
                <el-radio-button label="广州" value="广州" />
                <el-radio-button label="深圳" value="深圳" />
            </el-radio-group>
        </vab-card>
        <vab-card shadow="never">
            <template #header>
                <span>带有边框</span>
            </template>
            <el-radio v-model="radio5" border label="1">备选项1</el-radio>
            <el-radio v-model="radio5" border label="2">备选项2</el-radio>
        </vab-card>
    </div>
</template>

<script>
    export default defineComponent({
        name: 'Radio',
        setup() {
            const state = reactive({
                radio: '1',
                radio2: '选中且禁用',
                radio3: 3,
                radio4: '上海',
                radio5: '1',
            })

            return {
                ...toRefs(state),
            }
        },
    })
</script>

<style lang="scss" scoped>
    .radio-container {
        padding: 0 !important;
        background: $base-color-background !important;
    }
</style>
