H5 中 van-popup 的使用以及题目的切换

H5 中 van-popup 的使用以及题目的切换

在移动端开发中，弹窗组件是一个常见的需求。vant 是一个轻量、可靠的移动端 Vue 组件库，其中的 van-popup 组件可以方便地实现弹窗效果。本文将介绍如何使用 van-popup 实现题目详情的弹窗展示，并实现题目的切换功能。

关键点总结

1. 引入 van-popup 组件：

   • 在 Vue 项目中引入 vant 组件库，并使用 van-popup 组件实现弹窗效果。

   • import { createApp } from 'vue'
     import Vant from 'vant'const app = createApp(App)
     app.use(Vant)
     app.mount('#app')

2. 弹窗内容的条件渲染：

   • 根据不同的题目类型（如互动题和练习题），在弹窗中显示不同的内容。

3. 题目详情的展示：

   • 使用 computed 属性计算当前题目的详情，并在弹窗中展示题目的相关信息。

4. 题目的切换：

   • 通过按钮实现题目的上一题和下一题的切换，并更新当前题目的索引。

代码示例

以下是实现上述功能的关键代码片段：

questions.vue---子组件

<template><van-popup v-model:show="localVisible" position="bottom" round :style="{ height: '80%' }" @close="close"><div v-if="type === 'interactive'"><div class="picker-header"><div class="picker-title">题目详情<button @click="close" class="close-button">X</button></div><div class="picker-info"><div class="left-info"><span class="number">第{{ currentQuestion.serial_number }}题</span><span class="status">{{ getStatusText(currentQuestion.status) }}</span></div><div class="right-info"><button v-if="!isFirstQuestion" @click="prevQuestion"><van-icon name="arrow-left" /></button><span>{{ currentQuestion.serial_number }}/{{ questions.length }}</span><button v-if="!isLastQuestion" @click="nextQuestion"><van-icon name="arrow" /></button></div></div></div><div class="picker-content"><div class="section-title">课件页面</div><iframe :src="currentQuestion.previewUrl" frameborder="0"></iframe><div class="use-duration">我的用时：<span class="time-number">{{ formattedDuration.minutes }}</span>分 <span class="time-number">{{formattedDuration.seconds }}</span>秒</div></div></div><div v-else-if="type === 'practice'">//  其他内容</div></van-popup>
</template><script setup>
import { defineProps, defineEmits, computed, ref, watch } from 'vue'
import { Popup } from 'vant'const 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')
}
</script><style lang="less" 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;
}
</style>

courseDetail.vue---父组件

// template关键代码
<div v-for="(item, index) in period.interactive_performance.list" :key="index" :class="['performance-item',getStatusClass(item.status),{ selected: selectedQuestion === index },]" @click="selectQuestion(index, period.interactive_performance.list, 'interactive')"><span :class="getQuestionTextClass(item.status, selectedQuestion === index)">{{item.serial_number}}</span></div><div v-for="(item, index) in period.practice_detail.list" :key="index" :class="['practice-item',getStatusClass(item.status),{ selected: selectedPracticeQuestion === index },]" @click="selectPracticeQuestion(index, period.practice_detail.list, 'practice')"><div class="question-number"><span>{{ index + 1 }}</span></div>
</div><QuestionDetail :visible="showQuestionDetail" :questions="currentQuestions" :type="currentType":currentQuestionIndex="currentQuestionIndex" @close="closeQuestionDetail" @changeQuestion="changeQuestion" />// 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
}

数据结构

关键点解析

1. 引入 van-popup 组件：

   • 在模板中使用 <van-popup> 标签，并通过 v-model:show 绑定弹窗的显示状态。
   • 设置 position="bottom" 和 round 属性，使弹窗从底部弹出并带有圆角。

2. 弹窗内容的条件渲染：

   • 使用 v-if 和 v-else-if 根据 type 属性的值渲染不同的内容。
   • 当 type 为 interactive 时，显示互动题的详情；当 type 为 practice 时，显示练习题的详情。

3. 题目详情的展示：

   • 使用 computed 属性计算当前题目的详情，并在弹窗中展示题目的相关信息。
   • 通过 currentQuestion 计算属性获取当前题目的详细信息。

4. 题目的切换：

   • 通过按钮实现题目的上一题和下一题的切换，并更新当前题目的索引。
   • 使用 isFirstQuestion 和 isLastQuestion 计算属性判断当前题目是否为第一题或最后一题，以控制按钮的显示和隐藏。

大致效果

通过以上关键点的实现，我们可以在移动端应用中使用 van-popup 组件实现题目详情的弹窗展示，并实现题目的切换功能。希望本文对您有所帮助！