Radio單選框

在一組備選項(xiàng)中進(jìn)行單選

基礎(chǔ)用法

使用Radio組件，只需要設(shè)置v-model綁定變量，選中意味著變量的值為相應(yīng)Radio?label屬性的值，label可以是string、number或boolean。

<template><el-radio v-model="radio" label="1">備選項(xiàng)</el-radio><el-radio v-model="radio" label="2">備選項(xiàng)</el-radio> </template><script>export default {data () {return {radio: '1'};}} </script>

效果圖如下圖所示:

?

禁用狀態(tài)

只要在el-radio元素中設(shè)置disable屬性即可，它接受一個(gè)boolean，true為禁用。

<template><el-radio disabled v-model="radio" label="禁用">備選項(xiàng)</el-radio><el-radio disabled v-model="radio" label="選中且禁用">備選項(xiàng)</el-radio> </template><script>export default {data () {return {radio: '選中且禁用'};}} </script>

效果圖如下圖所示:

?

?

單選框組

結(jié)合el-radio-group元素和子元素el-radio可以實(shí)現(xiàn)單選組，在el-radio-group中綁定v-model，在el-radio中設(shè)置label即可，無(wú)需再給每一個(gè)el-radio綁定變量，另外，還提供了change事件來(lái)響應(yīng)變化，它會(huì)傳入一個(gè)參數(shù)value。

<template><el-radio-group v-model="radio"><el-radio :label="3">備選項(xiàng)</el-radio><el-radio :label="6">備選項(xiàng)</el-radio><el-radio :label="9">備選項(xiàng)</el-radio></el-radio-group> </template><script>export default {data () {return {radio: 3};}} </script>

?

?

按鈕樣式

只需要把el-radio元素?fù)Q成el-radio-button元素即可，此外，Element還提供了size屬性

<template><div><el-radio-group v-model="radio1"><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="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="radio3" 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="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> </template><script>export default {data () {return {radio1: '上海',radio2: '上海',radio3: '上海',radio4: '上海'};}} </script>

效果圖如下所示:

?

?

?

?

?

?

?

?

帶有邊框

設(shè)置border屬性可以渲染為帶有邊框的單選框

<template><div><el-radio v-model="radio1" label="1" border>備選項(xiàng)1</el-radio><el-radio v-model="radio1" label="2" border>備選項(xiàng)2</el-radio></div><div style="margin-top: 20px"><el-radio v-model="radio2" label="1" border size="medium">備選項(xiàng)1</el-radio><el-radio v-model="radio2" label="2" border size="medium">備選項(xiàng)2</el-radio></div><div style="margin-top: 20px"><el-radio-group v-model="radio3" size="small"><el-radio label="1" border>備選項(xiàng)1</el-radio><el-radio label="2" border disabled>備選項(xiàng)2</el-radio></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="radio4" size="mini" disabled><el-radio label="1" border>備選項(xiàng)1</el-radio><el-radio label="2" border>備選項(xiàng)2</el-radio></el-radio-group></div> </template><script>export default {data () {return {radio1: '1',radio2: '1',radio3: '1',radio4: '1'};}} </script>

效果圖如下所示：

?

?

?

?

?

?

?

?

Radio?Attributes

參數(shù)說(shuō)明類(lèi)型可選值默認(rèn)值

value/v-model	綁定值	string/number/boolean	——	——
label	Radio的value	string/number/boolean	——	——
disable	是否禁用	boolean	——	false
?border	是否顯示邊框	boolean	——	false
size	Radio的尺寸，僅在border為真時(shí)有效	string	medium/small/mini	——
name	原生name屬性	string	——	——

?

?

?

?

?

?

?

?

?

?

?

?

Radio?Events

事件名稱(chēng)說(shuō)明回調(diào)函數(shù)

change	綁定值變化時(shí)觸發(fā)的事件	選中的Radio?label值

?

?

?

Radio-group?Attributes

參數(shù)說(shuō)明類(lèi)型可選值默認(rèn)值

value/v-model	綁定值	string/number/boolean	——	——
size	單選框組尺寸，僅對(duì)按鈕形式的Radio或帶有邊框的Radio有效	string	medium/small/mini	——
disable	是否禁用	boolean	——	false
text-color	按鈕形式的Radio激活時(shí)的文本顏色	string	——	#ffffff
fill	按鈕形式的Radio激活時(shí)的填充色和邊框色	string	——	#409EFF

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

Radio-group Events

事件名稱(chēng)說(shuō)明回調(diào)參數(shù)

change	綁定值變化時(shí)觸發(fā)的事件	選中的Radio?label的值

?

?

?

Radio-button?Attributes

參數(shù)說(shuō)明類(lèi)型可選值默認(rèn)值

label	Radio的value	string/number	——	——
disable	是否禁用	boolean	——	false
name	原生name屬性	string	——	——

?

總結(jié)

以上是生活随笔為你收集整理的Radio单选框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。