uniapp下單選框的實(shí)現(xiàn)方法詳解
uniapp官方雖然提供了uni-data-checkbox
,含括了單選和多選框功能。但是它功能實(shí)在不能滿足需求:
- 單選框不支持再次點(diǎn)擊取消
- 無(wú)法與父組件的數(shù)據(jù)源進(jìn)行聯(lián)動(dòng),無(wú)法實(shí)現(xiàn)如多規(guī)格選擇的那種聯(lián)動(dòng)
- 源碼每次點(diǎn)擊都是對(duì)數(shù)據(jù)源進(jìn)行拷貝,然后再進(jìn)行json解析等操作,看著就很不靠譜,數(shù)據(jù)量大必然有性能問(wèn)題。
其實(shí)我放棄uni-data-checkbox
,選擇自己實(shí)現(xiàn)也是因?yàn)樯唐芬?guī)格展示是比較復(fù)雜的,不自己實(shí)現(xiàn)的話無(wú)法達(dá)到目的:
看圖中,三組規(guī)格選項(xiàng)是要相互聯(lián)動(dòng)的,選擇了其中一個(gè)后,就得判斷其余的是否可選。然后我認(rèn)為也可以將已選中的取消。所以得自己實(shí)現(xiàn),好根據(jù)業(yè)務(wù)定制。
代碼如下:
<template> <!-- uniapp內(nèi)置的單選組件,見https://uniapp.dcloud.io/component/radio.html --> <radio-group class="checklist-group" @change="change"> <label class="checklist-box is--tag" v-for="item in radioData.option" :class="[radioData.selected === item.id ? 'is-checked' : '', item.disable ? 'is-disable' : '']"> <radio class="hidden" :disabled="item.disable" :value="String(item.id)" :checked="radioData.selected === item.id" /> <view class="checklist-content"> <text class="checklist-text">{{ item.text }}</text> </view> </label> </radio-group> </template> <script setup lang="ts"> const props = defineProps({ // 該id設(shè)計(jì)的目的是為了應(yīng)對(duì)數(shù)組,記錄數(shù)組的下標(biāo),這樣父類就不需要遍歷查找了。當(dāng)然也可以根據(jù)業(yè)務(wù)用于其他方面,不需要就不用即可。 id: { type: [Number, String], }, /*數(shù)據(jù)源,它的數(shù)據(jù)結(jié)構(gòu)應(yīng)該:{selected:,option:[{id:,disable:,text:,}...]} 其中selected 的值應(yīng)取自option的id。 */ radioData: { type: Object, required: true, }, }); // 點(diǎn)擊后回調(diào)父類的change方法 const emit = defineEmits(["change"]); // 點(diǎn)擊后觸發(fā) function change(e: any) { // 參數(shù):tag的id;props.id emit("change", e.detail.value, props.id); } </script> <style lang="scss"> $checked-color: #2979ff; $border-color: #dcdfe6; $disable: 0.4; @mixin flex { /* #ifndef APP-NVUE */ display: flex; /* #endif */ } .checklist-group { @include flex; flex-direction: row; flex-wrap: wrap; .checklist-box { @include flex; flex-direction: row; align-items: center; position: relative; margin: 5px 0; margin-right: 25px; .hidden { position: absolute; opacity: 0; } // 文字樣式 .checklist-content { @include flex; flex: 1; flex-direction: row; align-items: center; justify-content: space-between; .checklist-text { font-size: 14px; color: #666; margin-left: 5px; line-height: 14px; } } // 單選樣式 .radio__inner { @include flex; /* #ifndef APP-NVUE */ flex-shrink: 0; box-sizing: border-box; /* #endif */ justify-content: center; align-items: center; position: relative; width: 16px; height: 16px; border: 1px solid $border-color; border-radius: 16px; background-color: #fff; z-index: 1; .radio__inner-icon { width: 8px; height: 8px; border-radius: 10px; opacity: 0; } } // 標(biāo)簽樣式 &.is--tag { margin-right: 10px; padding: 5px 10px; border: 1px $border-color solid; border-radius: 3px; background-color: #f5f5f5; .checklist-text { margin: 0; color: #666; } // 禁用 &.is-disable { /* #ifdef H5 */ cursor: not-allowed; /* #endif */ opacity: $disable; } &.is-checked { background-color: $checked-color; border-color: $checked-color; .checklist-text { color: #fff; } } } } } </style>
其實(shí)代碼本身內(nèi)容很少,是樣式的代碼多,我樣式是直接照抄uni-data-checkbox
的。
傳入的數(shù)據(jù)結(jié)構(gòu)應(yīng)該是:
interface radio{ selected: number; option: { id: number; text: string; disable: boolean; }[]; }
selected
和id
可以是別的類型,但selected
是取值于id
這里得注意,數(shù)據(jù)源必須是響應(yīng)式的,考慮這里肯定是個(gè)對(duì)象,那么就是要用reactive
去包圍數(shù)據(jù),使其具有響應(yīng)性,否則頁(yè)面不會(huì)更新,例如下面:
const radioData= reactive(radio);
PS1:由于vue3規(guī)范建議:子組件不修改父組件的數(shù)據(jù)源,否則會(huì)導(dǎo)致數(shù)據(jù)的變化難以理解。所以change方法中沒(méi)有做任何修改數(shù)據(jù)的動(dòng)作。比如將selected直接修改也是完全可以的,但是我這里還是交由父組件去決定如何修改。
PS2:咋一看change方法僅傳遞了當(dāng)前選擇的選項(xiàng),并沒(méi)有告知之前的選項(xiàng)是什么,如果要對(duì)比前后的時(shí)候不是沒(méi)有辦法?其實(shí)selected就是存儲(chǔ)的之前的選項(xiàng),在修改它之前用它作比較即可。
PS3:由于radio本身是不支持選中之后再取消的,我們這里采用將selected
賦值為一個(gè)不存在的id,這樣就會(huì)取消選擇了。但是會(huì)報(bào)錯(cuò):
uni-shared.es.js:470 Uncaught TypeError: Cannot destructure property 'id' of 'el' as it is null. at normalizeTarget (uni-shared.es.js:470:13) at createNativeEvent (uni-h5.es.js:1260:13) at $nne (uni-h5.es.js:1234:15) at HTMLElement.invoker (vue.runtime.esm.js:9397:19)
但是不影響功能哈。
PS4:目前僅在H5下測(cè)試功能時(shí)正常的。
總結(jié)
到此這篇關(guān)于uniapp下單選框?qū)崿F(xiàn)的文章就介紹到這了,更多相關(guān)uniapp下單選框?qū)崿F(xiàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript消除window.close()的提示窗口
有人問(wèn)起,怎么去掉js調(diào)用window.close()時(shí)怎么去掉那可惡的提示,咋一看好像還真不好弄,IE的安全機(jī)制好像就不允許通過(guò)腳本關(guān)閉本頁(yè)面,但是IE好像可以允許js關(guān)閉彈出窗口,那我們是不是可以通過(guò)一定的技巧欺騙一下IE,繞過(guò)去呢。鼓搗了幾下,似乎還真可以做到2015-05-05javascript實(shí)現(xiàn)數(shù)組最大值和最小值的6種方法
比較數(shù)組中數(shù)值的大小是比較常見的操作,本文主要介紹了javascript實(shí)現(xiàn)數(shù)組最大值和最小值的6種方法,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05淺析JavaScript回調(diào)函數(shù)應(yīng)用
這篇文章主要為大家詳細(xì)介紹了JavaScript回調(diào)函數(shù)應(yīng)用,感興趣的朋友可以參考一下2016-05-05使用 JavaScript如何獲取當(dāng)月的第一天和最后一天
這篇文章主要介紹了使用 JavaScript如何獲取當(dāng)月的第一天和最后一天,通過(guò)本文學(xué)習(xí)了如何使用 JavaScript 中的Date.getFullYear()和?Date.getMonth()方法獲得某個(gè)特定月份的第一天和最后一天,需要的朋友可以參考下2023-05-05JavaScript中對(duì)循環(huán)語(yǔ)句的優(yōu)化技巧深入探討
這篇文章主要介紹了JavaScript中對(duì)循環(huán)語(yǔ)句的優(yōu)化技巧深入探討,本文翻譯自一個(gè)臺(tái)灣朋友的文章,需要的朋友可以參考下2014-06-06微信小程序使用slider實(shí)現(xiàn)音頻進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了微信小程序使用slider實(shí)現(xiàn)音頻進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06JavaScript關(guān)于prototype實(shí)例詳解(超重點(diǎn))
prototype是js里面給類增加功能擴(kuò)展的一種模式,這篇文章主要介紹了JavaScript關(guān)于prototype(超重點(diǎn)),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08微信小程序?qū)崿F(xiàn)頁(yè)面浮動(dòng)導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頁(yè)面浮動(dòng)導(dǎo)航,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01