直接打域名访问网站长沙网络推广只选智投未来

当前位置： 首页 > news >正文

直接打域名访问网站,长沙网络推广只选智投未来,杭州家装设计公司排名榜,网站建设引擎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 组件实现题目详情的弹窗展示并实现题目的切换功能。希望本文对您有所帮助