Radio單選框

在一組備選項中進行單選

基礎用法

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

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

效果圖如下圖所示:

?

禁用狀態

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

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

效果圖如下圖所示:

?

?

單選框組

結合el-radio-group元素和子元素el-radio可以實現單選組，在el-radio-group中綁定v-model，在el-radio中設置label即可，無需再給每一個el-radio綁定變量，另外，還提供了change事件來響應變化，它會傳入一個參數value。

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

?

?

按鈕樣式

只需要把el-radio元素換成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>

效果圖如下所示:

?

?

?

?

?

?

?

?

帶有邊框

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

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

效果圖如下所示：

?

?

?

?

?

?

?

?

Radio?Attributes

參數說明類型可選值默認值

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

?

?

?

?

?

?

?

?

?

?

?

?

Radio?Events

事件名稱說明回調函數

change	綁定值變化時觸發的事件	選中的Radio?label值

?

?

?

Radio-group?Attributes

參數說明類型可選值默認值

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

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

Radio-group Events

事件名稱說明回調參數

change	綁定值變化時觸發的事件	選中的Radio?label的值

?

?

?

Radio-button?Attributes

參數說明類型可選值默認值

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

?

總結

以上是生活随笔為你收集整理的Radio单选框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。