1、新建html文档。
2、书写hmtl代艨位雅剖码。<div id="myVue"> <h2>一款通用单选，基于element-ui</h2> <p>1.基础用法</p> <template> <el-radio v-model="radio" label="1">备选项</el-radio> <el-radio v-model="radio" label="2">备选项</el-radio> </template> <p>2.禁用状态</p> <template> <el-radio disabled v-model="radio1" label="禁用">禁用项</el-radio> <el-radio v-model="radio1" label="选中且禁用">备选项</el-radio> </template> <p>3.单选框组</p> <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> <p>4.按钮样式</p> <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> <p>5.带有边框</p> <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> <p>参数：</p> <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、查看效果。
