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单选框相关推荐

MFC控件编程之复选框单选框分组框
MFC控件编程之复选框单选框分组框一丶分组框分组框英文叫做 GroubBox 添加了分组框主要就是分组.好看.不重点介绍二丶单选框英文: Raido Button 单选框需要注意的事项 1. ...
CSS3重新定义input中呆若木鸡的默认复选框CheckBox和单选框Radio样式
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><style>/* ...
[微信小程序]单选框以及多选框实例代码附讲解
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 效果图 <radio-group class="radio-group" b ...
js 实现多选框(复选框) 和单选框,下拉框功能完整示例代码附效果图
<!DOCTYPE html> <html><head><meta charset="utf-8" /><script src ...
HTML中单选框的设置，和提交按钮之间的组合
 <!DOCTYPE html> <html> <head> <meta charset="u ...
Python3+Selenium3 之滚动条操作实例与单选框的实例演示
Python3+Selenium3单选框代码如下: #coding:utf-8 #导入selenium from selenium import webdriver #设置等待时间导入pytho ...
jQuery对下拉框、单选框、多选框的处理
下拉框: //得到下拉菜单的选中项的文本(注意中间有空格) var cc1 = $(".formc select[@name='country'] option[@selected]&quo ...
jQuery --- 实现 checkbox 样式的单选框
早就想写点博客了一直懒着动最近发现一些写过的东西都不记得了,下决心把自己平时遇到的问题.得到的经验记录下来,希望能大家一点帮助这是之前写的一个模态框要求单选但是要求radio的默认样式 ...
纯css写单选框和复选框的样式和功能
只用纯css写的单选框和复选框的样式和功能该怎么写?看这里,复制下面的代码运行一遍就知道了,快试试吧! 效果截图: <!doctype html> <html lang=" ...

006_Radio单选框

006_Radio单选框相关推荐

最新文章

热门文章