006_Radio单选框

1. Radio单选框

1.1. 在一组备选项中进行单选。

1.2. Radio属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值	string / number / boolean	无	无
label	Radio的value	string / number / boolean	无	无
disabled	是否禁用	boolean	无	false
border	是否显示边框	boolean	无	false
size	单选框组尺寸, 仅对按钮形式的Radio或带有边框的Radio有效	string	medium / small / mini	无
name	原生name属性	string	无	无

1.3. Radio事件

事件名称	说明	回调参数
change	绑定值变化时触发的事件	选中的Radio label值

1.4. Radio-group属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值	string / number / boolean	无	无
size	单选框组尺寸, 仅对按钮形式的Radio或带有边框的Radio有效	string	medium / small / mini	无
disabled	是否禁用	boolean	无	false
text-color	按钮形式的Radio激活时的文本颜色	string	无	#ffffff
fill	按钮形式的Radio激活时的填充色和边框色	string	无	#409EFF

1.5. Radio-group事件

事件名称	说明	回调参数
change	绑定值变化时触发的事件	选中的Radio label值

1.6. Radio-button属性

参数	说明	类型	可选值	默认值
label	Radio的value	string / number	无	无
disabled	是否禁用	boolean	无	false
name	原生name属性	string	无	无

2. Radio单选框例子

2.1. 使用脚手架新建一个名为element-ui-radio的前端项目, 同时安装Element插件。

2.2. 编写index.js 

import Vue from 'vue' import VueRouter from 'vue-router' import Radio from '../components/Radio.vue' import ButtonRadio from '../components/ButtonRadio.vue' import BorderRadio from '../components/BorderRadio.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Radio' },{ path: '/Radio', component: Radio },{ path: '/ButtonRadio', component: ButtonRadio },{ path: '/BorderRadio', component: BorderRadio } ]const router = new VueRouter({routes })export default router

2.3. 在components下创建Radio.vue

<template><div><h1>基础用法</h1><h4>要使用Radio组件, 只需要设置v-model绑定变量, 选中意味着变量的值为相应Radio label属性的值, label可以是String、Number或Boolean。</h4><template><el-radio v-model="base_radio" label="男" @change="radioChange">男</el-radio><el-radio v-model="base_radio" label="女" @change="radioChange">女</el-radio></template><h1>禁用状态-单选框不可用的状态</h1><h4>只要在el-radio元素中设置disabled属性即可, 它接受一个Boolean, true为禁用。</h4><template><el-radio disabled v-model="disabled_radio" :label="true">男</el-radio><el-radio disabled v-model="disabled_radio" :label="false">女</el-radio></template><h1>单选框组-适用于在多个互斥的选项中选择的场景</h1><h4>结合el-radio-group元素和子元素el-radio可以实现单选组, 在el-radio-group中绑定v-model, 在el-radio中设置好label即可, 无需再给每一个el-radio绑定变量, 另外, 还提供了change事件来响应变化, 它会传入一个参数value。</h4><template><el-radio-group v-model="group_radio"><el-radio :label="1">男</el-radio><el-radio :label="2">女</el-radio><el-radio :label="3">未知</el-radio></el-radio-group></template></div> </template><script> export default {data () {return {base_radio: '男',disabled_radio: false,group_radio: 3}},methods: {radioChange (val) {console.log(val)}} } </script>

2.4. 在components下创建ButtonRadio.vue

<template><div><h1>按钮样式</h1><h4>只需要把el-radio元素换成el-radio-button元素即可, 此外, Element 还提供了size属性。</h4><div><el-radio-group v-model="button_radio1" text-color="#F56C6C" fill="#67C23A" @change="radioGroupChange"><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="button_radio2" 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="button_radio3" size="small"><el-radio-button label="北京" disabled ></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="button_radio4" 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></div> </template><script> export default {data () {return {button_radio1: '北京',button_radio2: '上海',button_radio3: '广州',button_radio4: '深圳'}},methods: {radioGroupChange (val) {console.log(val)}} } </script>

2.5. 在components下创建BorderRadio.vue

<template><div><h1>带有边框</h1><h4>设置border属性可以渲染为带有边框的单选框。</h4><div><el-radio v-model="border_radio1" label="男" border>男</el-radio><el-radio v-model="border_radio1" label="女" border>女</el-radio></div><div style="margin-top: 20px"><el-radio v-model="border_radio2" label="男" border size="medium">男</el-radio><el-radio v-model="border_radio2" label="女" border size="medium">女</el-radio></div><div style="margin-top: 20px"><el-radio-group v-model="border_radio3" size="small"><el-radio label="男" border>男</el-radio><el-radio label="女" border disabled>女</el-radio></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="border_radio4" size="mini" disabled><el-radio label="男" border>男</el-radio><el-radio label="女" border>女</el-radio></el-radio-group></div></div> </template><script> export default {data () {return {border_radio1: '男',border_radio2: '男',border_radio3: '男',border_radio4: '男'}} } </script>

2.6. 运行项目, 访问http://localhost:8080/#/Radio

2.7. 运行项目, 访问http://localhost:8080/#/ButtonRadio 

2.8. 运行项目, 访问http://localhost:8080/#/BorderRadio 

总结

以上是生活随笔为你收集整理的006_Radio单选框的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。