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

4月底立得flag，五月底插上小旗，结果拖到六月底七月初才来执行。说什么工作忙都是借口，就是睡的比猪早，起的比猪晚。

本来实现多选单选这个功能，vue组件中在表单方面提供了一个v-model指令，非常的善解“猿”意，

能把我们的多选单选功能很完美且很强大得双向绑定起来，实现多选、单选、任意选...根本不在话下。

但是，凡事都有一个但是！

但是奈何这个项目设计稿的缘故，使用原生的表单组件是不可能使用了，请看ui图：

1 export default {
2   name: 'question',
3   data () {
4     return {
5       state: {
6         dataUrl: this.$store.state.ownSet.dataUrl,
7         progress: this.$store.state.init.ActiveProgressEnum,
8         ExamInfo: this.$store.state.init.ExamInfo,
9         PersonID: this.$store.state.init.PersonID,
10         TeamID: this.$store.state.init.TeamID,
11       },
12       unclickable: true, // 判断是否已选择答案，不选择不能下一题，并置灰按钮
13       showLayer: false, //是否显示弹层
14       layerItem: {
15         isQuestion: false,
16         isSubmit: false, //是否是最后一道题时触发“下一题"按钮，点击了提交
17         isSuccess: false,
18         isLoading: false
19       },
20       chooseNum: null,
21       isFocus: false,
22       isLast: false,
23       isClicked: false//是否已经点击下一题，防止二次提交
24     }
25   },
26   created(){
27     // 点击开始答题，新页面应该定位到顶头题干位置
28     document.body.scrollTop = 0;
29     if(this.state.progress > 100107 && this.state.progress !== 100112){
30       alert('您已答题完毕！');
31     }
32     if(this.state.ExamInfo.QuestionID == 15){//答到14题退出的情况
33       //判断切换下一题和提交按钮
34       this.isLast = true;
35     }
36   },
37   methods: {
38     choosed(index){
39       this.chooseNumStr = '';//初始化
40       // 单选or多选
41       if(this.state.ExamInfo.IsMulti){
42         // 多选
43         if(this.$refs.liId[index].className.length <= 0){
44           // 添加类
45           this.$refs.liId[index].className = 'li-focus';
46         }else{
47           // 选中再取消
48           this.$refs.liId[index].className = '';
49         }
50         // 获取选中结果
51         for (let i = 0; i < this.$refs.liId.length; i++) {
52           if(this.$refs.liId[i].className.length > 0){
53             this.chooseNumStr += this.$refs.liId[i].innerText.substring(0,1);
54           }
55         }
56         // 置灰提交按钮与否
57         if(this.chooseNumStr.length > 0){
58           this.unclickable = false;
59         }else{
60           // 没有选东西，就置灰按钮
61           this.unclickable = true;
62           // 注意，再添加按钮的不可点击状态
63         }
64       }else{
65         // 单选
66         this.unclickable = false;
67         this.chooseNum = index;
68         //索引0-3对应答案A-B
69         // 注意，这里看看最多的选项是多少个，进行下配置，当前只是配置到了F
70         switch(index){
71           case 0: this.chooseNumStr = 'A';
72           break;
73           case 1: this.chooseNumStr = 'B';
74           break;
75           case 2: this.chooseNumStr = 'C';
76           break;
77           case 3: this.chooseNumStr = 'D';
78           break;
79           case 4: this.chooseNumStr = 'E';
80           break;
81           case 5: this.chooseNumStr = 'F';
82           break;
83         }
84       }
85     },
86     nextItem(){//下一题
87       if(this.state.progress > 100107 && this.state.progress != 100112){
88         alert('您已答题完毕！不能重复答题。');
89       }else{
90         if(!this.isClicked){
91           // 按钮可以点击-如果提交过一次，不能二次提交，如果提交失败，可以二次提交
92           if(this.unclickable){
93             alert('您还没有选择答案哦！');
94           }else{
95             this.isClicked = true; // 还没提交过，可以提交
96             let postData = `Type=2&PersonID=${this.state.PersonID}&QuestionID=${this.state.ExamInfo.QuestionID}&Result=${this.chooseNumStr}`;//2为下一题
97             if(this.state.TeamID > 0){
98               postData+= `&TeamID=${this.state.TeamID}`;
99             }
100             this.ajaxFun(postData,false)
101             .then((response)=>{
102               // console.log(this.state.ExamInfo.ExamQuestionNo)
103             })
104             .catch((err)=>{
105               this.isClicked = false;
106               console.log(err);
107             });
108           }
109         }
110       }
111     },
112     submitItem(){//提交按钮
113       if(!this.isClicked){
114         if(this.unclickable){
115           alert('您还没有选择答案哦！');
116         }else if(this.state.progress > 100107){
117           alert('您已答题完毕！不能重复答题。');
118         }else{
119           this.showLayer = true;
120           this.layerItem.isSubmit = true;
121         }
122       }
123     },
124     confirmSubmit(data){// 提交弹层 之 确定
125       if(!this.isClicked){
126         this.isClicked = true;
127         // 发送ajax
128         let postData = `Type=3&PersonID=${this.state.PersonID}&QuestionID=${this.state.ExamInfo.QuestionID}&Result=${this.chooseNumStr}`;//3为提交
129         if(this.state.TeamID > 0){
130           postData+= `&TeamID=${this.state.TeamID}`;
131         }
132         this.ajaxFun(postData,true)
133         .then((response)=>{
134           // 关闭提交弹层
135         })
136         .catch((err)=>{
137           this.isClicked = false;
138           console.log(err);
139         });
140       }
141     },
142     changeLayerShow(data){// 提交弹层 之 取消 + 状态重置
143       this.showLayer = false;
144       this.layerItem.isSubmit = false;
145     },
146     hideLayer(data){
147       this.showLayer = false;
148     },
149     ajaxFun(postData,submitFun){
150       let _this = this;
151       return new Promise(function(resolve,reject){
152         console.log(postData)
153         if(submitFun){
154           // 关闭提交弹层
155           _this.layerItem.isSubmit = false;
156         }
157         _this.layerItem.isQuestion = false;
158         _this.showLayer = true;
159         _this.layerItem.isLoading = true;
160         $axios.get(_this.state.dataUrl+'ExamAnswer?'+postData)
161         .then((response)=>{
162           console.log(response);
163           if(response && response.data && response.data.result === 1){
164             _this.layerItem.isLoading = false;
165             _this.layerItem.isQuestion = true;
166             // 判断返回结果
167             if(response.data.RetValue.proResult){
168               _this.layerItem.isSuccess = true;
169             }else{
170               _this.layerItem.isSuccess = false;
171             }
172             resolve(response);
173             setTimeout(()=>{
174               if(submitFun){
175                 // 提交
176                 // resolve(response);
177                 _this.$store.dispatch('setUser',response.data.RetValue);
178                 _this.$router.replace('redpacket');
179               }else{
180                 // 下一题
181                 if(_this.state.ExamInfo.QuestionID == 14){ //ExamQuestionNo
182                 //判断切换下一题和提交按钮
183                   _this.isLast = true;
184                 }
185                 // 下一题重新赋值
186                 _this.state.ExamInfo = response.data.RetValue;
187                 // 点击下一题，新页面应该定位到顶头题干位置
188                 document.body.scrollTop = 0;
189                 // 样式清空
190                 for (let i = 0; i < _this.$refs.liId.length; i++) {
191                   _this.$refs.liId[i].className = '';
192                 }
193               }
194               _this.showLayer = false;
195               _this.layerItem.isQuestion = false;
196               _this.chooseNumStr = '';
197               _this.chooseNum = null;
198               _this.unclickable = true;
199               _this.isClicked = false;
200             }, 2000);
201           }else{
202             _this.showLayer = false;
203             _this.layerItem.isQuestion = false;
204             _this.isClicked = false;
205             reject('数据提交失败，请刷新重试！')
206           }
207         })
208         .catch((err)=>{
209           _this.showLayer = false;
210           _this.layerItem.isQuestion = false;
211           _this.isClicked = false;
212           reject(err)
213         });
214       });
215     }
216   }
217 }

完整js代码

写完这个发现，我好像总是喜欢绕着弯的踩坑。

虽然问题最终都解决了，但是很能说明其实我基础还是薄弱的，不会很好利用每一个代码的特性，简而言之就是不高级！

2018-07-04 23:18:23 - 2018-07-05 00:00:44好累~

个人学习理解和总结，很多不足还请指正~

声明：

　　请尊重博客园原创精神，转载或使用图片请注明：

　　博主：xing.org1^

　　出处：http://www.cnblogs.com/padding1015/