hz/student-h5
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git synced 2025-12-10 11:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat:数组遍历和点击优化

Browse Source
This commit is contained in:
dongwug
2022-09-27 18:29:28 +08:00
parent e6635bda08
commit cdf3830ed3
2 changed files with 179 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/image/index.js Normal file
View File

@@ -0,0 +1,6 @@
const Images = {
//选择按钮
checkboxImg: require('./checkbox.png'),
checkbox2Img: require('./checkbox2.png')
}
export default Images

199
src/views/examination/ReadyExamination.vue
View File

@@ -18,20 +18,27 @@
</div> </div>
<!-- 循环遍历生成判断题的问题和选项 --> <!-- 循环遍历生成判断题的问题和选项 -->
<!-- <div class="questions" <div class="questions"
v-for="(q,index) in j_questions" v-for="(q,index) in questions"
:key="index"> :key="index">
<div class="questiontitle" > <div class="questiontitle" >
{{q.text}} {{q.text}}
</div> </div>
<div class="btnswitch" v-for="(j,index) in j_options" <div class="btnswitch" v-for="(j,index) in q.options"
:key="index"> :key="index"
<div class="checkoutbtn"></div> @click="selectBtn(j)"
>
<div class="checkoutbtn"
:style="{
backgroundImage:
'url('+( j.selected === true? Images.checkboxImg : Images.checkbox2Img )+')'
}"
></div>
<div class="select">{{j.text}}</div> <div class="select">{{j.text}}</div>
</div> </div>
</div> --> </div>
<div class="questions"> <!-- <div class="questions">
<div class="questiontitle"> <div class="questiontitle">
1、控制计划是由工艺部门完成 （4分） 1、控制计划是由工艺部门完成 （4分）
</div> </div>
@@ -69,7 +76,7 @@
<div class="checkoutbtn"></div> <div class="checkoutbtn"></div>
<div class="select">错误</div> <div class="select">错误</div>
</div> </div>
</div> </div> -->
<div class="questiontype clearfix"> <div class="questiontype clearfix">
@@ -79,7 +86,7 @@
</div> </div>
<!-- 循环遍历生成选择题的问题和选项 --> <!-- 循环遍历生成选择题的问题和选项 -->
<!-- <div class="questions" <div class="questions"
v-for="(q,index) in s_questions" v-for="(q,index) in s_questions"
:key="index"> :key="index">
<div class="questiontitle"> <div class="questiontitle">
@@ -87,21 +94,19 @@
</div> </div>
<div class="btnswitch" v-for="(s,index) in s_options" <div class="btnswitch" v-for="(s,index) in s_options"
:key="index" :key="index"
@click="selectBtn(value)" @click="selectBtn2(s)"
> >
<div class="checkoutbtn" <div class="checkoutbtn"
:style="{ :style="{
backgroundImage: backgroundImage:
value.selected === true 'url('+( s.selected === true? Images.checkboxImg : Images.checkbox2Img )+')'
? 'url( ../../assets/image/checkbox.png )'
: 'url( ../../assets/image/checkbox2.png )'
}" }"
></div> ></div>
<div class="select">{{s.text}}</div> <div class="select">{{s.text}}</div>
</div> </div>
</div> --> </div>
<div class="questions"> <!-- <div class="questions">
<div class="questiontitle"> <div class="questiontitle">
4、.FMEA 是一种（ ）工具（4分） 4、.FMEA 是一种（ ）工具（4分）
</div> </div>
@@ -121,7 +126,7 @@
<div class="checkoutbtn"></div> <div class="checkoutbtn"></div>
<div class="select">风险分析</div> <div class="select">风险分析</div>
</div> </div>
</div> </div> -->
<div class="btnbox"> <div class="btnbox">
<div class="submitbtn"> <div class="submitbtn">
@@ -136,15 +141,74 @@
</template> </template>
<script> <script>
// import { reactive,toRefs } from "vue"; import { reactive, toRefs } from "vue";
import Images from '../../assets/image/index'
import TitleHead from "@/components/TitleHead.vue"; import TitleHead from "@/components/TitleHead.vue";
export default { export default {
name: "ReadyExamination", name: "ReadyExamination",
components: { components: {
TitleHead, TitleHead,
}, },
// setup() { setup() {
// const state = reactive({ const state = reactive({
questions: [
{
id: 1,
text: "1、控制计划是由工艺部门完成 （4分）",
options: [
{
text: "正确",
select:"flase",
},
{
text: "错误",
select:"flase",
},
]
},
{
id: 2,
text: "2、.PFMEA假定所设计的产品能满足设计要求",
options: [
{
text: "正确",
select:"flase",
},
{
text: "错误",
select:"flase",
},
]
},
{
id: 3,
text: "3、控制计划是由工艺部门完成 （4分）",
options: [
{
text: "正确",
select:"flase",
},
{
text: "错误",
select:"flase",
},
]
},
{
id: 4,
text: "4、.PFMEA假定所设计的产品能满足设计要求",
options: [
{
text: "正确",
select:"flase",
},
{
text: "错误",
select:"flase",
},
]
},
],
// j_questions: [ // j_questions: [
// { // {
// type: "judge", // type: "judge",
@@ -162,13 +226,13 @@ export default {
// text: "3、PFMEA假定所设计的产品能满足设计要求 （4分）", // text: "3、PFMEA假定所设计的产品能满足设计要求 （4分）",
// }, // },
// ], // ],
// s_questions: [ s_questions: [
// { {
// type: "choice", type: "choice",
// id: 1, id: 1,
// text: "4、.FMEA 是一种（ ）工具（4分）", text: "4、.FMEA 是一种（ ）工具（4分）",
// }, },
// ], ],
// j_options: [ // j_options: [
// { // {
// id: 1, // id: 1,
@@ -181,43 +245,60 @@ export default {
// selected: false, // selected: false,
// }, // },
// ], // ],
// s_options: [ s_options: [
// { {
// id: 1, id: 1,
// text: "问题解决", text: "问题解决",
// selected: false, selected: false,
// }, },
// { {
// id: 2, id: 2,
// text: "项目策划", text: "项目策划",
// selected: false, selected: false,
// }, },
// { {
// id: 3, id: 3,
// text: "过程分析", text: "过程分析",
// selected: false, selected: false,
// }, },
// { {
// id: 4, id: 4,
// text: "风险分析", text: "风险分析",
// selected: false, selected: false,
// }, },
// ] ]
// }); });
// const selectBtn = (value) => { const selectBtn = (value) => {
// let arr = state.s_options; // let arr = state.questions;
// arr.map((i) => { const arry = []
state.questions.map((item) => {
arry.push(item.options)
})
console.log(arry)
console.log(value)
// arry.map((i) => {
// if (i.id === value.id) { // if (i.id === value.id) {
// i.selected = !i.selected; // i.selected = !i.selected;
// } // }
// }); // });
// state.s_options = arr; // state.questions = arry;
// }; };
// return { const selectBtn2 = (value) => {
// ...toRefs(state), let arr = state.s_options;
// selectBtn, arr.map((i) => {
// }; if (i.id === value.id) {
// } i.selected = !i.selected;
}
});
state.s_options = arr;
};
return {
...toRefs(state),
selectBtn,
selectBtn2,
Images,
};
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>