直接打域名访问网站,中装建设集团有限公司,赣州网站建设中心,网上购物哪个商城好H5 中 van-popup 的使用以及题目的切换
在移动端开发中#xff0c;弹窗组件是一个常见的需求。vant 是一个轻量、可靠的移动端 Vue 组件库#xff0c;其中的 van-popup 组件可以方便地实现弹窗效果。本文将介绍如何使用 van-popup 实现题目详情的弹窗展示#xff0c;并实现…H5 中 van-popup 的使用以及题目的切换
在移动端开发中弹窗组件是一个常见的需求。vant 是一个轻量、可靠的移动端 Vue 组件库其中的 van-popup 组件可以方便地实现弹窗效果。本文将介绍如何使用 van-popup 实现题目详情的弹窗展示并实现题目的切换功能。
关键点总结 引入 van-popup 组件 在 Vue 项目中引入 vant 组件库并使用 van-popup 组件实现弹窗效果。 import { createApp } from vue
import Vant from vantconst app createApp(App)
app.use(Vant)
app.mount(#app) 弹窗内容的条件渲染 根据不同的题目类型如互动题和练习题在弹窗中显示不同的内容。 题目详情的展示 使用 computed 属性计算当前题目的详情并在弹窗中展示题目的相关信息。 题目的切换 通过按钮实现题目的上一题和下一题的切换并更新当前题目的索引。
代码示例
以下是实现上述功能的关键代码片段
questions.vue---子组件
templatevan-popup v-model:showlocalVisible positionbottom round :style{ height: 80% } closeclosediv v-iftype interactivediv classpicker-headerdiv classpicker-title题目详情button clickclose classclose-buttonX/button/divdiv classpicker-infodiv classleft-infospan classnumber第{{ currentQuestion.serial_number }}题/spanspan classstatus{{ getStatusText(currentQuestion.status) }}/span/divdiv classright-infobutton v-if!isFirstQuestion clickprevQuestionvan-icon namearrow-left //buttonspan{{ currentQuestion.serial_number }}/{{ questions.length }}/spanbutton v-if!isLastQuestion clicknextQuestionvan-icon namearrow //button/div/div/divdiv classpicker-contentdiv classsection-title课件页面/diviframe :srccurrentQuestion.previewUrl frameborder0/iframediv classuse-duration我的用时span classtime-number{{ formattedDuration.minutes }}/span分 span classtime-number{{formattedDuration.seconds }}/span秒/div/div/divdiv v-else-iftype practice// 其他内容/div/van-popup
/templatescript setup
import { defineProps, defineEmits, computed, ref, watch } from vue
import { Popup } from vantconst props defineProps({visible: Boolean,questions: {type: Array,required: true,},currentQuestionIndex: {type: Number,required: true,},type: {type: String,required: true,},
})const emits defineEmits([close, changeQuestion])const localVisible ref(props.visible)watch(() props.visible,newVal {localVisible.value newVal},
)const currentQuestion computed(() {const question props.questions[props.currentQuestionIndex] || {}if (props.type practice !question.serial_number) {question.serial_number props.currentQuestionIndex 1}return question
})const getStatusText status {switch (status) {case 1:return 正确case 2:return 错误case 3:return 半对半错default:return 未作答}
}const formatDuration duration {const minutes String(Math.floor(duration / 60)).padStart(2, 0)const seconds String(duration % 60).padStart(2, 0)return { minutes, seconds }
}const formattedDuration computed(() formatDuration(currentQuestion.value.use_duration))const isFirstQuestion computed(() props.currentQuestionIndex 0)
const isLastQuestion computed(() props.currentQuestionIndex props.questions.length - 1)const prevQuestion () {if (!isFirstQuestion.value) {emits(changeQuestion, props.currentQuestionIndex - 1)}
}const nextQuestion () {if (!isLastQuestion.value) {emits(changeQuestion, props.currentQuestionIndex 1)}
}const close () {emits(close)
}
/scriptstyle langless scoped
.picker-header {padding: 10px;
}.picker-title {font-size: 18px;font-weight: bold;justify-content: space-between;align-items: center;margin-bottom: 10px;color: #000;margin-top: 10px;display: flex;width: 100%;.close-button {background: none;border: none;font-size: 16px;margin-left: auto;color: #a9aeb8;cursor: pointer;}
}.picker-info {display: flex;justify-content: space-between;align-items: center;padding: 0 10px 0 10px;
}.left-info {display: flex;flex-direction: row;.number {margin-right: 20px;font-size: 16px;font-weight: 500;}.status {font-size: 16px;font-weight: 500;color: #1f70ff;}
}.right-info {display: flex;position: absolute;right: 10px;color: #a9aeb8;.right-icon {width: 28px;height: 28px;}
}.right-info button {background: none;border: none;font-size: 16px;cursor: pointer;margin: 0 5px;
}.picker-content {padding: 10px 20px 0 20px;
}.section-title {font-size: 16px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #2b2f38;
}iframe {width: 100%;height: 300px;border: none;margin-bottom: 10px;
}.use-duration {font-size: 16px;color: #2b2f38;
}.time-number {font-weight: bold;color: #0074fc;font-size: 24px;
}.van-popup {height: 50%;z-index: 99999;
}.practice-content {padding: 0px 20px 0 20px;
}
/stylecourseDetail.vue---父组件
// template关键代码
div v-for(item, index) in period.interactive_performance.list :keyindex :class[performance-item,getStatusClass(item.status),{ selected: selectedQuestion index },] clickselectQuestion(index, period.interactive_performance.list, interactive)span :classgetQuestionTextClass(item.status, selectedQuestion index){{item.serial_number}}/span/divdiv v-for(item, index) in period.practice_detail.list :keyindex :class[practice-item,getStatusClass(item.status),{ selected: selectedPracticeQuestion index },] clickselectPracticeQuestion(index, period.practice_detail.list, practice)div classquestion-numberspan{{ index 1 }}/span/div
/divQuestionDetail :visibleshowQuestionDetail :questionscurrentQuestions :typecurrentType:currentQuestionIndexcurrentQuestionIndex closecloseQuestionDetail changeQuestionchangeQuestion /// script关键代码
const selectQuestion (index, questions, type) {selectedQuestion.value indexcurrentQuestions.value questionscurrentType.value typecurrentQuestionIndex.value indexshowQuestionDetail.value true
}const selectPracticeQuestion (index, questions, type) {selectedPracticeQuestion.value indexcurrentQuestions.value questionscurrentQuestionIndex.value index// 设置 serial_number 属性currentQuestions.value.forEach((question, idx) {question.serial_number idx 1})currentType.value typeshowQuestionDetail.value true
}
const changeQuestion index {currentQuestionIndex.value index
}
数据结构 关键点解析 引入 van-popup 组件 在模板中使用 van-popup 标签并通过 v-model:show 绑定弹窗的显示状态。设置 positionbottom 和 round 属性使弹窗从底部弹出并带有圆角。 弹窗内容的条件渲染 使用 v-if 和 v-else-if 根据 type 属性的值渲染不同的内容。当 type 为 interactive 时显示互动题的详情当 type 为 practice 时显示练习题的详情。 题目详情的展示 使用 computed 属性计算当前题目的详情并在弹窗中展示题目的相关信息。通过 currentQuestion 计算属性获取当前题目的详细信息。 题目的切换 通过按钮实现题目的上一题和下一题的切换并更新当前题目的索引。使用 isFirstQuestion 和 isLastQuestion 计算属性判断当前题目是否为第一题或最后一题以控制按钮的显示和隐藏。
大致效果 通过以上关键点的实现我们可以在移动端应用中使用 van-popup 组件实现题目详情的弹窗展示并实现题目的切换功能。希望本文对您有所帮助
