uniapp中單選按鈕的實(shí)現(xiàn)代碼示例

更新時(shí)間：2023年01月17日 09:16:58 作者：周小航.

uniapp官方雖然提供了uni-data-checkbox,含括了單選和多選框功能,但是它功能是在不能滿足需求,下面這篇文章主要給大家介紹了關(guān)于uniapp中單選按鈕的實(shí)現(xiàn)代碼,需要的朋友可以參考下

標(biāo)簽說(shuō)明：

radio-group：?jiǎn)雾?xiàng)選擇器，內(nèi)部由多個(gè) <radio> 組成。通過(guò)把多個(gè)radio包裹在一個(gè)radio-group下，實(shí)現(xiàn)這些radio的單選。

radio：?jiǎn)芜x項(xiàng)目

屬性說(shuō)明：

@change：<radio-group> 標(biāo)簽中的radio選中項(xiàng)發(fā)生變化時(shí)觸發(fā) change 事件，event.detail = {value: 選中項(xiàng)radio的value}

value：<radio> 標(biāo)識(shí)。當(dāng)該 <radio> 選中時(shí)，<radio-group> 的 change 事件會(huì)攜帶 <radio> 的 value

checked：當(dāng)前是否選中，默認(rèn)值false，類型是布爾值

disabled：是否禁用，默認(rèn)值是false，類型是布爾值

color：radio的顏色，同css的color

注意

radio的默認(rèn)顏色，在不同平臺(tái)不一樣。微信小程序是綠色的，字節(jié)跳動(dòng)小程序?yàn)榧t色，其他平臺(tái)是藍(lán)色的。更改顏色使用color屬性。
如需調(diào)節(jié)radio大小，可通過(guò)css的scale方法調(diào)節(jié)，如縮小到70%style="transform:scale(0.7)"
radio不是checkbox，點(diǎn)擊一個(gè)已經(jīng)選中的radio，不會(huì)將其取消選中

上代碼：

<!-- uniapp單選框 -->
		<view class="">
			<radio-group @change="chang">
				<label v-for="item in radioGroup" :key="item">
					<radio :value="item" :checked="item==activeRadio" />{{item}}
				</label>
			</radio-group>
		</view>
 
 
<script>
      export default {
		data() {
			return {
				// 單選框數(shù)據(jù)
				activeRadio: '', //存的是單選按鈕選中的value值
				radioGroup: ['蘋果', '香蕉', '梨', '西紅柿', '西瓜']
			}
		},
 
        methods: {
                // 單選按鈕發(fā)生改變時(shí)觸發(fā)的方法
			chang(e) {
				this.activeRadio = e.detail.value;  //選中按鈕的value值
				console.log(this.activeRadio);
			}
}
</script>

打印結(jié)果：

1.獲取選中按鈕的value值，e.detail.value，賦值給data中activeRadio聲明的變量

2.打印選中按鈕的值

實(shí)際場(chǎng)景案例，男女單選框

<radio-group @change="radioChange" class="value checked" style="font-size: 13px;">
	<label class="radio">
		<radio style="zoom: 0.8;" :color="roleColor" value="1" :checked="sex == '1'" />男
	</label>
	<label class="radio" style="margin-left: 15%;">
	    <radio style="zoom: 0.8;" :color="roleColor" value="2" :checked="sex == '2'" />女
	</label>
</radio-group>
 
 
<script>
    export default {
		data() {
			return {
 
				// 單選框數(shù)據(jù)
				sex: "", //存的是單選按鈕選中的value值,性別值
 
			}
		},
        methods: {
            radioChange(evt) {
				// console.log(evt);
				this.sex = evt.detail.value;
			},
}
    
</script>

效果圖：