vue实现自定义多选与单选的答题功能

2020-06-13 10:48:13易采站长站整理

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;
}

没错,还是在choose中,我判断是单选后,用switch来判断index的值,进而匹配到chooseNumStr的结果。

虽然这种方法很笨拙,而且有超出设置范围的选项的危险,但是,我傻啊!哪有什么方法!

当初就是觉得这么干很不妥,可是直到今天我再看自己的代码才想到更好的解决方案的啊!那他是啥啊?!那就是:

2. 就还是强大的ref登场,规则和选择多选一样,只不过不用for循环。你是不是已经想到了啊哈!

对的,每次单选点的是那个就截取

this.$refs.liId[i].innerText.substring(0,1);   
简直soeasy

好了,第四个问题 单选的答案记录 问题解决。

然后,我们接着趁热打铁(才发现他和趁火打劫好像是兄弟啊!),解决下边点击按钮的问题。

需求是没选是灰色,选择选项后可提交:

首先是两个按钮的结构,为了避免后期下一题和提交按钮的交班时我还得判断点击事件是他俩谁和谁,

所以我用了两个按钮,绑了两个事件,把不同功能的事件分开绑定了。


.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,那个public-btn-gray的生存与否取决于unclickable。

先说没选是灰色的处理:

这个思路上就是肯定是默认提交按钮就是灰色的,也就是有着public-btn-gray类名的。

这里有一个用于描述按钮是不可点击状态的变量unclickable,专门管理按钮是否可点击的。

初始化时是true不可点击的。这样,按钮的gray类名public-btn-gray就加了。

逻辑上,点击按钮的时候先判断这个值,如果为true就提示用户要先选择答案:


if(this.unclickable){
alert('您还没有选择答案哦!');
}else{// do someting you wanted;}

 

然后是 选择选项后可提交 。

那这不好说嘛!我只要点击事件一触发,就把可点击状态放开不就好了嘛!

那好,我是用户,我在如图第15题选择a、c解锁提交按钮,然后我再点击a、c抹掉我的记录,

但这时我的提交按钮已打开,我可以在他毫无防备的情况下趁虚而入(中华文化真博大,这是第三个同意义的成语了)!哈哈哈。