本來(lái)實(shí)現(xiàn)多選單選這個(gè)功能，vue組件中在表單方面提供了一個(gè)v-model指令，非常的善解“猿”意，

能把我們的多選單選功能很完美的且很強(qiáng)大得雙向綁定起來(lái)，實(shí)現(xiàn)多選單選任意選根本不在話下。

但是，凡事都有一個(gè)但是！

但是奈何這個(gè)項(xiàng)目設(shè)計(jì)稿的緣故，使用原生的表單組件是不可能使用了，請(qǐng)看ui圖： 

可悲的是，這個(gè)項(xiàng)目?jī)蓚€(gè)月后，我才來(lái)做項(xiàng)目復(fù)盤，

話說(shuō)也就在此時(shí)，我才發(fā)現(xiàn)有一種更簡(jiǎn)單的方式來(lái)實(shí)現(xiàn)并且應(yīng)用上v-model，

為什么要為了樣式放棄功能然后自己吭哧吭哧傻-滴-呼呼的用js來(lái)實(shí)現(xiàn)了類似雙向綁定的感覺(jué)?。?！

flag：今天先專注把我費(fèi)勁巴拉手動(dòng)搬得磚總結(jié)一下，明天（07-05）我再把所謂的最簡(jiǎn)單的方法做出來(lái)貼這里~

這個(gè)需求的難點(diǎn)在于以下幾點(diǎn)：

1．單選點(diǎn)擊后選中狀態(tài)，需滿足如下：X

a) 每次點(diǎn)擊只能選中其中一個(gè)

b) 當(dāng)選中時(shí)再次點(diǎn)擊其他選項(xiàng)需要切換選擇對(duì)應(yīng)點(diǎn)擊項(xiàng)

c) 選中時(shí)點(diǎn)擊自身無(wú)顯示上的反應(yīng)(同樣的邏輯再做一遍也無(wú)妨，即再加一遍類名也看不出來(lái))

2．多選樣式展示，需滿足如下：

a) 同時(shí)可以選中多個(gè)X

b) 多選已選中狀態(tài)再次點(diǎn)擊取消選中X

3．多選選中項(xiàng)的記錄，需滿足如下：

a) 選擇幾個(gè)記錄幾個(gè)

b) 選中再取消時(shí)需要將本條記錄的數(shù)據(jù)通時(shí)消除(依據(jù)點(diǎn)擊事件，事件點(diǎn)擊觸發(fā)判斷哪個(gè)被選中了)

4．單選選中項(xiàng)的記錄，方便提交數(shù)據(jù)

5．未點(diǎn)擊選項(xiàng)不可提交，并給提示

6．可提交狀態(tài)，需滿足如下：

a) 單選選中任意一個(gè)，即可提交。再次修改對(duì)提交沒(méi)有影響

b) 多選至少選中一個(gè)可提交，再次修改需判斷是不是沒(méi)選東西

7．第十四題點(diǎn)下一題切換提交按鈕

8．快速點(diǎn)擊下一題，多次提交

9．點(diǎn)擊下一題提交數(shù)據(jù)后，拿響應(yīng)結(jié)果調(diào)取彈層提示用戶選擇是否正確

=============接下來(lái)一 一解決====================

首先先說(shuō)結(jié)構(gòu)

看似十道題，其實(shí)是一道題不停的換數(shù)據(jù)，所以我的外部結(jié)構(gòu)就是一個(gè)form加一個(gè)空的div

別問(wèn)我為什么多余一個(gè)空的，我也很無(wú)措。

form.question(v-if="state.ExamInfo")
　div

然后題目標(biāo)題很傻瓜式得使用了h3

h3.qus-title(:data-id="state.ExamInfo.QuestionID") {{state.ExamInfo.ExamQuestionNo}} {{state.ExamInfo.Description}}

選項(xiàng)上，我使用ul>li的形式描述了多個(gè)選項(xiàng)

ul.qus-list
  li(v-for="(item,index) in state.ExamInfo.QuestionAnswerCode" @click="choosed(index)" v-bind:class="{'li-focus' : chooseNum==index}" ref="liId") {{item.Code}}、{{item.Description}}

大致幾個(gè)屬性

• v-for是為了遍歷題中的每一個(gè)選項(xiàng)，
• click綁定了點(diǎn)擊當(dāng)前l(fā)i時(shí)的事件，v-bind同步click綁定了動(dòng)態(tài)的類名，用于展示選中狀態(tài)。
• 這里值得注意的一個(gè)點(diǎn)也是當(dāng)時(shí)抓蝦的一個(gè)點(diǎn)是，v-on:click和v-bind:class結(jié)合，
• click的時(shí)候，每次把當(dāng)前點(diǎn)擊的li的index值傳出去，

然后定義一個(gè)變量chooseNum，點(diǎn)擊函數(shù)中，將參數(shù)index賦給他
this.chooseNum = index;

靠這種間接拿到點(diǎn)擊索引值得曲線救國(guó)方式，在v-bind的監(jiān)視下，每次點(diǎn)擊獲得的索引chooseNum

和這幾個(gè)li中自己的index對(duì)上眼以后，就如正確的鑰匙對(duì)上了合適的鎖，類名綁定就成了。

也就是那十幾條難題中的第一個(gè)被輕松干掉的難題的前半部分： 單選點(diǎn)擊后選中狀態(tài) 。

費(fèi)這么半天勁，才解決一個(gè)點(diǎn)啊！我不服！別急，接下來(lái)還有好戲。

但其實(shí)這個(gè)思路還是挺重要的，靠這一點(diǎn)“死皮賴臉”拉關(guān)系的勁頭，這個(gè)法子以后還倒是可以有很多用武之地。

好戲在下一個(gè)屬性，沒(méi)錯(cuò)就是ref，這也是我步入萬(wàn)丈深淵一去不復(fù)返的梯子??！

ref

要知道人家可以vue里邊的特殊特性，

要知道人家可是很有能力的，

要知道我老是連著打不出妖之道這三個(gè)字！我就不行了啊！

好了不皮了。

官網(wǎng)記載ref這個(gè)特殊特性，被用來(lái)給元素或子組件注冊(cè)引用信息。 引用信息將會(huì)注冊(cè)在父組件的 $refs 對(duì)象上。

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素； 如果用在子組件上，引用就指向組件實(shí)例。

我的理解大白話來(lái)說(shuō)，他就是給dom元素或者組件實(shí)例一個(gè)身份證號(hào)，身份證號(hào)有的特性他也就有，那就是唯一不重復(fù)。

如果配合上v-for，就能獲取這一批帶有ref特性所組成的數(shù)組。

通過(guò)數(shù)組下標(biāo)索引出來(lái)的個(gè)體，也就是對(duì)應(yīng)的dom元素本身或者組件實(shí)例本人無(wú)疑了。

就好像拿著身份證號(hào)去公安局查人一樣，快速不說(shuō)，還很高效有沒(méi)有，一查一個(gè)準(zhǔn)！

但需要說(shuō)明的是，在created鉤子中，這個(gè)特性拿不到東西，生命周期鉤子里只有在mounted里（可能還有后邊的鉤子里，我沒(méi)用過(guò)不準(zhǔn)確）可以用，畢竟你想啊，身份證號(hào)雖說(shuō)一出生就有了，但是只有掛載到網(wǎng)上你才能查到大的嘛！

所以，我究竟用它做了什么呢?那就是多選功能??！

還是先回到上邊說(shuō)的，綁定了一個(gè)事件，并且會(huì)傳遞一個(gè)當(dāng)前點(diǎn)擊li的索引號(hào)，并且前邊也提到過(guò)，

ref返回的是數(shù)組，有數(shù)組有索引號(hào)，簡(jiǎn)直是萬(wàn)事俱備啊。于是乎讓我們來(lái)呼喚東風(fēng)（別看了，就是說(shuō)我們自己）！

在choose點(diǎn)擊函數(shù)中就有了這么一段：

if(this.$refs.liId[index].className.length <= 0){
  //首先先判斷當(dāng)前l(fā)i有沒(méi)有被選中，因?yàn)槲疫@里li除了選中狀態(tài)的有類名，其他沒(méi)有類名，所以我就這么判斷了。
  //這么看有時(shí)候舍棄一小丟丟規(guī)范的東西反而省力。
  this.$refs.liId[index].className = 'li-focus';// 添加類
}else{
  //當(dāng)前l(fā)i已經(jīng)被選中，那么在多選的邏輯里，是允許人們選中后再取消選中的，所以前端展示層面上把樣式去掉。
  this.$refs.liId[index].className = '';// 選中再取消的情況
}

好了，第二個(gè) 多選樣式 搞定。

那么接下來(lái)，選擇的結(jié)果呢，能不能來(lái)一次“趁火打劫”趁點(diǎn)擊的時(shí)候偷偷記錄下用戶的選擇？答案當(dāng)然是可以的啦！

首先說(shuō)多選功能的趁火打劫吧，就著上邊增刪類名的熱乎勁，緊接著在每次點(diǎn)擊時(shí)我們記錄下當(dāng)前點(diǎn)擊的是誰(shuí)

// 獲取選中結(jié)果
    for (let i = 0; i < this.$refs.liId.length; i++) {
      if(this.$refs.liId[i].className.length > 0){
        this.chooseNumStr += this.$refs.liId[i].innerText.substring(0,1);
      }
    }

這一段再次利用了ref的特性，找到當(dāng)前點(diǎn)擊的dom，截取人家選項(xiàng)里的第一個(gè)字，那就是ABC or D；

拼接到事先準(zhǔn)備好的字符串chooseNumStr中(要發(fā)給數(shù)據(jù)用的)，因?yàn)檫@里和后端提前約定的就是將選擇結(jié)果以字符串的形式提交。

if判斷那里，條件再次是利用了li誰(shuí)有類名就是選了誰(shuí)的不講理原則。第三個(gè) 多選記錄選項(xiàng)功能 問(wèn)題搞定。

第四個(gè)問(wèn)題是，既然多選記錄搞定了，那么單選呢，也應(yīng)該在每次點(diǎn)擊的時(shí)候搞定他吧？那是自然！

這里我剛剛突然又想到了一個(gè)解決方法，于是這里我將呈現(xiàn)倆個(gè)：

1.那就是我當(dāng)時(shí)腦殘的解決方法，不過(guò)這種方法唯一的好處可能是，

產(chǎn)品大大過(guò)來(lái)說(shuō)，那sei，你把選項(xiàng)中的ABCD去掉吧，不好看，那我就傻逼了。

事實(shí)上，本來(lái)人家設(shè)計(jì)稿里選項(xiàng)處就沒(méi)有ABCD，我本著你好我好大家好的原則，說(shuō)服了他們加上的。。。。。

不廢話了，我發(fā)現(xiàn)我進(jìn)入中年了，絮絮叨叨總是進(jìn)不了正題，或許這和我上課愛走神有關(guān)吧。

//索引0-3對(duì)應(yīng)答案A-B,依次類推
    // 注意，這里看看最多的選項(xiàng)是多少個(gè)，進(jìn)行下配置，當(dāng)前只是配置到了F
    switch(index){
     case 0: this.chooseNumStr = 'A';
     break;
     case 1: this.chooseNumStr = 'B';
     break;
     case 2: this.chooseNumStr = 'C';
     break;
     case 3: this.chooseNumStr = 'D';
     break;
     case 4: this.chooseNumStr = 'E';
     break;
     case 5: this.chooseNumStr = 'F';
     break;
    }

沒(méi)錯(cuò)，還是在choose中，我判斷是單選后，用switch來(lái)判斷index的值，進(jìn)而匹配到chooseNumStr的結(jié)果。

雖然這種方法很笨拙，而且有超出設(shè)置范圍的選項(xiàng)的危險(xiǎn)，但是，我傻啊！哪有什么方法！

當(dāng)初就是覺(jué)得這么干很不妥，可是直到今天我再看自己的代碼才想到更好的解決方案的??！那他是啥??？！那就是：

2. 就還是強(qiáng)大的ref登場(chǎng)，規(guī)則和選擇多選一樣，只不過(guò)不用for循環(huán)。你是不是已經(jīng)想到了啊哈！

對(duì)的，每次單選點(diǎn)的是那個(gè)就截取 this.$refs.liId[i].innerText.substring(0,1);   簡(jiǎn)直soeasy

好了，第四個(gè)問(wèn)題 單選的答案記錄 問(wèn)題解決。

然后，我們接著趁熱打鐵（才發(fā)現(xiàn)他和趁火打劫好像是兄弟?。。?解決下邊點(diǎn)擊按鈕的問(wèn)題。

需求是沒(méi)選是灰色，選擇選項(xiàng)后可提交：

首先是兩個(gè)按鈕的結(jié)構(gòu)，為了避免后期下一題和提交按鈕的交班時(shí)我還得判斷點(diǎn)擊事件是他倆誰(shuí)和誰(shuí)，

所以我用了兩個(gè)按鈕，綁了兩個(gè)事件，把不同功能的事件分開綁定了。

.public-btn(v-if="!isLast" @click="nextItem" v-bind:class="{'public-btn-gray': unclickable}") 下一題
.public-btn(v-else @click="submitItem" v-bind:class="{'public-btn-gray': unclickable}") 提交

可以看到，除了事件我還綁定了class，那個(gè)public-btn-gray的生存與否取決于unclickable。

先說(shuō)沒(méi)選是灰色的處理：

這個(gè)思路上就是肯定是默認(rèn)提交按鈕就是灰色的，也就是有著public-btn-gray類名的。

這里有一個(gè)用于描述按鈕是不可點(diǎn)擊狀態(tài)的變量unclickable，專門管理按鈕是否可點(diǎn)擊的。

初始化時(shí)是true不可點(diǎn)擊的。這樣，按鈕的gray類名public-btn-gray就加了。

邏輯上，點(diǎn)擊按鈕的時(shí)候先判斷這個(gè)值，如果為true就提示用戶要先選擇答案：

if(this.unclickable){
  alert('您還沒(méi)有選擇答案哦！');
}else{// do someting you wanted;}

然后是 選擇選項(xiàng)后可提交 。

那這不好說(shuō)嘛！我只要點(diǎn)擊事件一觸發(fā)，就把可點(diǎn)擊狀態(tài)放開不就好了嘛！

那好，我是用戶，我在如圖第15題選擇a、c解鎖提交按鈕，然后我再點(diǎn)擊a、c抹掉我的記錄，

但這時(shí)我的提交按鈕已打開，我可以在他毫無(wú)防備的情況下趁虛而入（中華文化真博大，這是第三個(gè)同意義的成語(yǔ)了）！哈哈哈。

這當(dāng)然不可以了，直接點(diǎn)擊事件就放開下一題按鈕，在單選場(chǎng)景下是通的。但是多選的時(shí)候我們還要再防御一層。

那就是：

// 置灰提交按鈕與否
    if(this.chooseNumStr.length > 0){
    //多選的時(shí)候，因?yàn)樵俅吸c(diǎn)擊會(huì)把記錄抹除，所以chooseNumStr會(huì)是動(dòng)態(tài)改變的，
    //如果一個(gè)也沒(méi)選擇，多選也好單選也罷，這個(gè)字符串肯定是空的，故而判斷長(zhǎng)度小于0就不讓他提交！
     this.unclickable = false;
    }else{
     // 沒(méi)有選東西，就置灰按鈕
     this.unclickable = true;
    }

耶！第六點(diǎn) 多選功能與下一題 按鈕高亮可跳轉(zhuǎn)功能 的結(jié)合也完成啦

至此，關(guān)于按鈕的樣式和邏輯就完畢了，每次點(diǎn)擊下一題下一題的功能就跑通了。

但是，一直跑到 第十四題點(diǎn)擊下一題 ，15題內(nèi)按鈕文案還是下一題，可是這是最后一題了啊，講點(diǎn)理吧！

好，那就講理點(diǎn)，讓他改成提交，這時(shí)下一題和提交按鈕換崗。

換崗的時(shí)機(jī)我是在數(shù)據(jù)響應(yīng)回來(lái)后判斷本題目的題號(hào)/id，如果是14題，那么下一題就是最后一題，點(diǎn)擊下一題就讓提交按鈕上崗，下一題退休。

說(shuō)了這么多，說(shuō)的最多的是點(diǎn)擊下一題。所以在下一題里綁定的事件，就有一個(gè)角落是來(lái)干這個(gè)事的：

// 下一題
if(_this.state.ExamInfo.QuestionID == 14){ 
  //點(diǎn)擊下一題，數(shù)據(jù)響應(yīng)回來(lái)后，新數(shù)據(jù)替換前，判斷如果當(dāng)前是第14題就改變按鈕。
  //判斷切換下一題和提交按鈕
   _this.isLast = true;
}

然后，提交和下一題倆按鈕的樣式就靠這個(gè)狀態(tài)值控制，只要在事實(shí)的時(shí)候改變狀態(tài)值讓他倆交崗即可。

（仔細(xì)總結(jié)會(huì)發(fā)現(xiàn)，都是這么一個(gè)套路，數(shù)據(jù)改變某個(gè)狀態(tài)值，狀態(tài)值綁定在結(jié)構(gòu)上，影響視圖的不同展示）
后來(lái)，還發(fā)現(xiàn)一個(gè)隱藏的問(wèn)題：

點(diǎn)擊下一題后，因?yàn)槭菃雾?yè)應(yīng)用，頁(yè)面結(jié)構(gòu)和數(shù)據(jù)都沒(méi)有刷新， 上一道題用戶選擇的結(jié)果綁在li上邊的樣式還需要清空，

所以每次點(diǎn)擊下一題甚至提交后都需要在重新填新題目數(shù)據(jù)時(shí)把li的樣式選中都清空，也就是把類名都清空。

// 樣式清空
for (let i = 0; i < _this.$refs.liId.length; i++) {
   _this.$refs.liId[i].className = '';
}

也需要把上一題的選擇數(shù)據(jù)清空，也就是 chooseNumStr字符串='';

且如果用戶翻到下邊再還數(shù)據(jù)，雖然用戶看著像換了頁(yè)面，但其實(shí)還在這一頁(yè)。為了把假象做的更逼真點(diǎn)，需要頁(yè)面定位到頂部：

// 點(diǎn)擊下一題，新頁(yè)面應(yīng)該定位到頂頭題干位置
document.body.scrollTop = 0;

正當(dāng)我看著這個(gè)天衣無(wú)縫的假功能玩的開心的時(shí)候，測(cè)試大大跑過(guò)來(lái)說(shuō):

~我快速點(diǎn)擊多次提交就提交了好多次。。

~exm??!你沒(méi)事一直點(diǎn)提交干嘛？

~我是測(cè)試

~好，大大，你別說(shuō)了，我這就改嘎。

第⑧個(gè)問(wèn)題： 多次點(diǎn)擊下一題/提交按鈕

好吧，這個(gè)問(wèn)題確實(shí)是我沒(méi)考慮到，以后做這種表單提交的，肯定要防御用戶多次點(diǎn)擊提交。

有了上面幾次的經(jīng)驗(yàn)，我現(xiàn)在很會(huì)利用data里某個(gè)變量來(lái)充當(dāng)狀態(tài)記錄了！

定義一個(gè)變量isClicked專門用于看管按鈕是否被提交過(guò)，如果在可點(diǎn)擊的狀態(tài)下點(diǎn)擊過(guò)，那么抱歉，邏輯中斷！

初始化這個(gè)isClicked肯定是沒(méi)有點(diǎn)擊狀態(tài)，為false，然后在下一題和提交按鈕的點(diǎn)擊事件中判斷

if(!this.isClicked){//沒(méi)點(diǎn)擊過(guò)
  //該干啥干啥！
}else{
  //該干嘛干嘛去！
}

所以，到底應(yīng)該干嗎？！

終于說(shuō)到最后，我好困，如果不是自?shī)首詷?lè)我可能坐著睜眼就睡著了，不，我已經(jīng)進(jìn)入夢(mèng)鄉(xiāng)了

說(shuō)到拿響應(yīng)結(jié)果,，這無(wú)非就是 根據(jù)相應(yīng)結(jié)果彈層 而已，我不想說(shuō)什么了。

睡了。晚安世界~

總結(jié)

以上所述是小編給大家介紹的vue實(shí)現(xiàn)自定義多選與單選的答題功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論