<template>
    <div class="content">
        <e-row :gutter="24">
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>基本用法</span>
                    </div>
                    <div>
                        <e-radio v-model="radio" label="1" @change="change">备选项</e-radio>
                        <e-radio v-model="radio" label="2" @change="change">备选项</e-radio>
                    </div>
                </e-card>
            </e-col>
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>禁用状态</span>
                    </div>
                    <div>
                        <e-radio disabled v-model="radio1" label="禁用">备选项</e-radio>
                        <e-radio disabled v-model="radio1" label="选中且禁用">备选项</e-radio>
                    </div>
                </e-card>
            </e-col>
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>单选框组</span>
                    </div>
                    <div>
                        <e-radio-group v-model="radio2">
                            <e-radio :label="3">备选项</e-radio>
                            <e-radio :label="6">备选项</e-radio>
                            <e-radio :label="9">备选项</e-radio>
                        </e-radio-group>
                    </div>
                </e-card>
            </e-col>
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>按钮样式</span>
                    </div>
                    <div>
                        <div>
                            <e-radio-group v-model="radio3">
                            <e-radio-button label="上海"></e-radio-button>
                            <e-radio-button label="北京"></e-radio-button>
                            <e-radio-button label="广州"></e-radio-button>
                            <e-radio-button label="深圳"></e-radio-button>
                            </e-radio-group>
                        </div>
                        <div style="margin-top: 20px">
                            <e-radio-group v-model="radio4" size="medium">
                            <e-radio-button label="上海" ></e-radio-button>
                            <e-radio-button label="北京"></e-radio-button>
                            <e-radio-button label="广州"></e-radio-button>
                            <e-radio-button label="深圳"></e-radio-button>
                            </e-radio-group>
                        </div>
                        <div style="margin-top: 20px">
                            <e-radio-group v-model="radio5" size="small">
                            <e-radio-button label="上海"></e-radio-button>
                            <e-radio-button label="北京" disabled ></e-radio-button>
                            <e-radio-button label="广州"></e-radio-button>
                            <e-radio-button label="深圳"></e-radio-button>
                            </e-radio-group>
                        </div>
                        <div style="margin-top: 20px">
                            <e-radio-group v-model="radio6" disabled size="mini">
                            <e-radio-button label="上海"></e-radio-button>
                            <e-radio-button label="北京"></e-radio-button>
                            <e-radio-button label="广州"></e-radio-button>
                            <e-radio-button label="深圳"></e-radio-button>
                            </e-radio-group>
                        </div>
                    </div>
                </e-card>
            </e-col>
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>带有边框</span>
                    </div>
                    <div>
                        <div>
                            <e-radio v-model="radio7" label="1" border>备选项1</e-radio>
                            <e-radio v-model="radio7" label="2" border>备选项2</e-radio>
                        </div>
                        <div style="margin-top: 20px">
                            <e-radio v-model="radio8" label="1" border size="medium">备选项1</e-radio>
                            <e-radio v-model="radio8" label="2" border size="medium">备选项2</e-radio>
                        </div>
                        <div style="margin-top: 20px">
                            <e-radio-group v-model="radio9" size="small">
                            <e-radio label="1" border>备选项1</e-radio>
                            <e-radio label="2" border disabled>备选项2</e-radio>
                            </e-radio-group>
                        </div>
                        <div style="margin-top: 20px">
                            <e-radio-group v-model="radio10" size="mini" disabled>
                            <e-radio label="1" border>备选项1</e-radio>
                            <e-radio label="2" border>备选项2</e-radio>
                            </e-radio-group>
                        </div>
                    </div>
                </e-card>
            </e-col>
        </e-row>
    </div>
</template>
<script>

export default {
    components: {},
    data() {
        return {
            radio: '1',
            radio1: '选中且禁用',
            radio2: 3,
            radio3: '上海',
            radio4: '上海',
            radio5: '上海',
            radio6: '上海',
            radio7: '1',
            radio8: '1',
            radio9: '1',
            radio10: '1'
        }
    },
    mounted() {
    },
    methods: {
        change(e){
            console.info("切换:::::",e)
        }
    }
}
</script>
  
<style>
.marginLeft {
    margin-left: 10px
}
.content {
    height: 100%;
    padding: 30px;
    background:#fff;
}

.block {
    display: inline-block;
    margin-left: 10px;
}

.box-card .el-col{
    margin-bottom:10px;
}
  </style>
