mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-09 10:56:47 +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 class="questions"
|
||||
v-for="(q,index) in j_questions"
|
||||
<div class="questions"
|
||||
v-for="(q,index) in questions"
|
||||
:key="index">
|
||||
<div class="questiontitle" >
|
||||
{{q.text}}
|
||||
</div>
|
||||
<div class="btnswitch" v-for="(j,index) in j_options"
|
||||
:key="index">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="btnswitch" v-for="(j,index) in q.options"
|
||||
:key="index"
|
||||
@click="selectBtn(j)"
|
||||
>
|
||||
<div class="checkoutbtn"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
'url('+( j.selected === true? Images.checkboxImg : Images.checkbox2Img )+')'
|
||||
}"
|
||||
></div>
|
||||
<div class="select">{{j.text}}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="questions">
|
||||
<!-- <div class="questions">
|
||||
<div class="questiontitle">
|
||||
1、控制计划是由工艺部门完成 （4分）
|
||||
</div>
|
||||
@@ -69,7 +76,7 @@
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">错误</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
<div class="questiontype clearfix">
|
||||
@@ -79,7 +86,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 循环遍历生成选择题的问题和选项 -->
|
||||
<!-- <div class="questions"
|
||||
<div class="questions"
|
||||
v-for="(q,index) in s_questions"
|
||||
:key="index">
|
||||
<div class="questiontitle">
|
||||
@@ -87,21 +94,19 @@
|
||||
</div>
|
||||
<div class="btnswitch" v-for="(s,index) in s_options"
|
||||
:key="index"
|
||||
@click="selectBtn(value)"
|
||||
@click="selectBtn2(s)"
|
||||
>
|
||||
<div class="checkoutbtn"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
value.selected === true
|
||||
? 'url( ../../assets/image/checkbox.png )'
|
||||
: 'url( ../../assets/image/checkbox2.png )'
|
||||
'url('+( s.selected === true? Images.checkboxImg : Images.checkbox2Img )+')'
|
||||
}"
|
||||
></div>
|
||||
<div class="select">{{s.text}}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="questions">
|
||||
<!-- <div class="questions">
|
||||
<div class="questiontitle">
|
||||
4、.FMEA 是一种（ ）工具（4分）
|
||||
</div>
|
||||
@@ -121,7 +126,7 @@
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">风险分析</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="btnbox">
|
||||
<div class="submitbtn">
|
||||
@@ -136,88 +141,164 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { reactive,toRefs } from "vue";
|
||||
import { reactive, toRefs } from "vue";
|
||||
import Images from '../../assets/image/index'
|
||||
import TitleHead from "@/components/TitleHead.vue";
|
||||
export default {
|
||||
name: "ReadyExamination",
|
||||
components: {
|
||||
TitleHead,
|
||||
},
|
||||
// setup() {
|
||||
// const state = reactive({
|
||||
// j_questions: [
|
||||
// {
|
||||
// type: "judge",
|
||||
// id: 1,
|
||||
// text: "1、控制计划是由工艺部门完成 （4分）",
|
||||
// },
|
||||
// {
|
||||
// type: "judge",
|
||||
// id: 2,
|
||||
// text: "2、.PFMEA假定所设计的产品能满足设计要求",
|
||||
// },
|
||||
// {
|
||||
// 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.s_options;
|
||||
// arr.map((i) => {
|
||||
// if (i.id === value.id) {
|
||||
// i.selected = !i.selected;
|
||||
// }
|
||||
// });
|
||||
// state.s_options = arr;
|
||||
// };
|
||||
// return {
|
||||
// ...toRefs(state),
|
||||
// selectBtn,
|
||||
// };
|
||||
// }
|
||||
setup() {
|
||||
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: [
|
||||
// {
|
||||
// type: "judge",
|
||||
// id: 1,
|
||||
// text: "1、控制计划是由工艺部门完成 （4分）",
|
||||
// },
|
||||
// {
|
||||
// type: "judge",
|
||||
// id: 2,
|
||||
// text: "2、.PFMEA假定所设计的产品能满足设计要求",
|
||||
// },
|
||||
// {
|
||||
// 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>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user