mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-10 11:26:48 +08:00
feat:数组遍历和点击优化
This commit is contained in:
dongwug
6
src/assets/image/index.js
Normal file
6
src/assets/image/index.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
const Images = {
|
||||||
|
//选择按钮
|
||||||
|
checkboxImg: require('./checkbox.png'),
|
||||||
|
checkbox2Img: require('./checkbox2.png')
|
||||||
|
}
|
||||||
|
export default Images
|
||||||
@@ -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,88 +141,164 @@
|
|||||||
</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({
|
||||||
// j_questions: [
|
questions: [
|
||||||
// {
|
{
|
||||||
// type: "judge",
|
id: 1,
|
||||||
// id: 1,
|
text: "1、控制计划是由工艺部门完成 （4分）",
|
||||||
// text: "1、控制计划是由工艺部门完成 （4分）",
|
options: [
|
||||||
// },
|
{
|
||||||
// {
|
text: "正确",
|
||||||
// type: "judge",
|
select:"flase",
|
||||||
// id: 2,
|
},
|
||||||
// text: "2、.PFMEA假定所设计的产品能满足设计要求",
|
{
|
||||||
// },
|
text: "错误",
|
||||||
// {
|
select:"flase",
|
||||||
// type: "judge",
|
},
|
||||||
// id: 3,
|
]
|
||||||
// text: "3、PFMEA假定所设计的产品能满足设计要求 （4分）",
|
},
|
||||||
// },
|
{
|
||||||
// ],
|
id: 2,
|
||||||
// s_questions: [
|
text: "2、.PFMEA假定所设计的产品能满足设计要求",
|
||||||
// {
|
options: [
|
||||||
// type: "choice",
|
{
|
||||||
// id: 1,
|
text: "正确",
|
||||||
// text: "4、.FMEA 是一种（ ）工具（4分）",
|
select:"flase",
|
||||||
// },
|
},
|
||||||
// ],
|
{
|
||||||
// j_options: [
|
text: "错误",
|
||||||
// {
|
select:"flase",
|
||||||
// id: 1,
|
},
|
||||||
// text: "正确",
|
]
|
||||||
// selected: false,
|
},
|
||||||
// },
|
{
|
||||||
// {
|
id: 3,
|
||||||
// id: 2,
|
text: "3、控制计划是由工艺部门完成 （4分）",
|
||||||
// text: "错误",
|
options: [
|
||||||
// selected: false,
|
{
|
||||||
// },
|
text: "正确",
|
||||||
// ],
|
select:"flase",
|
||||||
// s_options: [
|
},
|
||||||
// {
|
{
|
||||||
// id: 1,
|
text: "错误",
|
||||||
// text: "问题解决",
|
select:"flase",
|
||||||
// selected: false,
|
},
|
||||||
// },
|
]
|
||||||
// {
|
},
|
||||||
// id: 2,
|
{
|
||||||
// text: "项目策划",
|
id: 4,
|
||||||
// selected: false,
|
text: "4、.PFMEA假定所设计的产品能满足设计要求",
|
||||||
// },
|
options: [
|
||||||
// {
|
{
|
||||||
// id: 3,
|
text: "正确",
|
||||||
// text: "过程分析",
|
select:"flase",
|
||||||
// selected: false,
|
},
|
||||||
// },
|
{
|
||||||
// {
|
text: "错误",
|
||||||
// id: 4,
|
select:"flase",
|
||||||
// text: "风险分析",
|
},
|
||||||
// selected: false,
|
]
|
||||||
// },
|
},
|
||||||
// ]
|
],
|
||||||
// });
|
// j_questions: [
|
||||||
// const selectBtn = (value) => {
|
// {
|
||||||
// let arr = state.s_options;
|
// type: "judge",
|
||||||
// arr.map((i) => {
|
// id: 1,
|
||||||
// if (i.id === value.id) {
|
// text: "1、控制计划是由工艺部门完成 （4分）",
|
||||||
// i.selected = !i.selected;
|
// },
|
||||||
// }
|
// {
|
||||||
// });
|
// type: "judge",
|
||||||
// state.s_options = arr;
|
// id: 2,
|
||||||
// };
|
// text: "2、.PFMEA假定所设计的产品能满足设计要求",
|
||||||
// return {
|
// },
|
||||||
// ...toRefs(state),
|
// {
|
||||||
// selectBtn,
|
// type: "judge",
|
||||||
// };
|
// id: 3,
|
||||||
// }
|
// text: "3、PFMEA假定所设计的产品能满足设计要求 （4分）",
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
s_questions: [
|
||||||
|
{
|
||||||
|
type: "choice",
|
||||||
|
id: 1,
|
||||||
|
text: "4、.FMEA 是一种（ ）工具（4分）",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// j_options: [
|
||||||
|
// {
|
||||||
|
// id: 1,
|
||||||
|
// text: "正确",
|
||||||
|
// selected: false,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// id: 2,
|
||||||
|
// text: "错误",
|
||||||
|
// selected: false,
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
s_options: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
text: "问题解决",
|
||||||
|
selected: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
text: "项目策划",
|
||||||
|
selected: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
text: "过程分析",
|
||||||
|
selected: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
text: "风险分析",
|
||||||
|
selected: false,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
});
|
||||||
|
const selectBtn = (value) => {
|
||||||
|
// let arr = state.questions;
|
||||||
|
const arry = []
|
||||||
|
state.questions.map((item) => {
|
||||||
|
arry.push(item.options)
|
||||||
|
})
|
||||||
|
console.log(arry)
|
||||||
|
console.log(value)
|
||||||
|
// arry.map((i) => {
|
||||||
|
// if (i.id === value.id) {
|
||||||
|
// i.selected = !i.selected;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// state.questions = arry;
|
||||||
|
};
|
||||||
|
const selectBtn2 = (value) => {
|
||||||
|
let arr = state.s_options;
|
||||||
|
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>
|
||||||
|
|||||||
Reference in New Issue
Block a user