element-ui单选按钮
1、新建html文档。
2、书写hmtl代码。
<div id="myVue">
<h2>一款通用单选，基于element-ui</h2>
1.基础用法
<template>
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
</template>
2.禁用状态
<template>
<el-radio disabled v-model="radio1" label="禁用">禁用项</el-radio>
<el-radio v-model="radio1" label="选中且禁用">备选项</el-radio>
</template>
3.单选框组
<template>
<el-radio-group v-model="radio2">
<el-radio :label="3">备选项</el-radio>
<el-radio :label="6">备选项</el-radio>
<el-radio :label="9">备选项</el-radio>
</el-radio-group>
</template>
4.按钮样式
<template>
<div>
<el-radio-group v-model="radio3">
<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="radio4" 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="radio5" 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="radio6" 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>
5.带有边框
<template>
<div>
<el-radio v-model="radio7" label="1" border>备选项1</el-radio>
<el-radio v-model="radio7" label="2" border>备选项2</el-radio>
</div>
<div style="margin-top: 20px">
<el-radio v-model="radio8" label="1" border size="medium">备选项1</el-radio>
<el-radio v-model="radio8" label="2" border size="medium">备选项2</el-radio>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio9" 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="radio10" size="mini" disabled>
<el-radio label="1" border>备选项1</el-radio>
<el-radio label="2" border>备选项2</el-radio>
</el-radio-group>
</div>
</template>
参数：
<img src="img/7.png" />
<img src="img/3.png" />
</div>
3、书写css代码。
.el-loading-mask.is-fullscreen { position: fixed }
.el-loading-mask.is-fullscreen .el-loading-spinner { margin-top: -25px }
.el-loading-mask.is-fullscreen .el-loading-spinner .circular { height: 50px; width: 50px }
.el-loading-spinner { top: 50%; margin-top: -21px; width: 100%; text-align: center; position: absolute }
.el-col-pull-1, .el-col-pull-10, .el-col-pull-11, .el-col-pull-12, .el-col-pull-13, .el-col-pull-14, .el-col-pull-15, .el-col-pull-16, .el-col-pull-17, .el-col-pull-18, .el-col-pull-19, .el-col-pull-2, .el-col-pull-20, .el-col-pull-21, .el-col-pull-22, .el-col-pull-23, .el-col-pull-24, .el-col-pull-3, .el-col-pull-4, .el-col-pull-5, .el-col-pull-6, .el-col-pull-7, .el-col-pull-8, .el-col-pull-9, .el-col-push-1, .el-col-push-10, .el-col-push-11, .el-col-push-13, .el-col-push-14, .el-col-push-15, .el-col-push-16, .el-col-push-17, .el-col-push-18, .el-col-push-19, .el-col-push-2, .el-col-push-20, .el-col-push-21, .el-col-push-22, .el-col-push-23, .el-col-push-24, .el-col-push-3, .el-col-push-4, .el-col-push-5, .el-col-push-6, .el-col-push-7, .el-col-push-8, .el-col-push-9, .el-row { position: relative }
.el-loading-spinner .el-loading-text { color: #409EFF; margin: 3px 0; font-size: 14px }
.el-loading-spinner .circular { height: 42px; width: 42px; -webkit-animation: loading-rotate 2s linear infinite; animation: loading-rotate 2s linear infinite }
.el-loading-spinner .path { -webkit-animation: loading-dash 1.5s ease-in-out infinite; animation: loading-dash 1.5s ease-in-out infinite; stroke-dasharray: 90, 150; stroke-dashoffset: 0; stroke-width: 2; stroke: #409EFF; stroke-linecap: round }
.el-loading-spinner i { color: #409EFF }
4、书写并添加js代码。
<script src="js/vue.min.js" ></script>
<script src="js/element.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#myVue',
data() {
return {
radio: '1',
radio1: '选中且禁用',
radio2: 3,
radio3: '上海',
radio4: '上海',
radio5: '上海',
radio6: '上海',
radio7: '1',
radio8: '1',
radio9: '1',
radio10: '1'
}
},
methods: {
}
})
</script>
5、代码整体结构。
6、查看效果。
