hookehuyr

feat(课程详情页): 添加富文本图片点击预览功能

在课程介绍富文本区域添加点击事件处理,当点击图片时调用vant的图片预览组件
......@@ -13,6 +13,8 @@
"MaybeRefOrGetter": true,
"PropType": true,
"Ref": true,
"Slot": true,
"Slots": true,
"VNode": true,
"WritableComputedRef": true,
"computed": true,
......@@ -74,8 +76,6 @@
"watch": true,
"watchEffect": true,
"watchPostEffect": true,
"watchSyncEffect": true,
"Slot": true,
"Slots": true
"watchSyncEffect": true
}
}
......
......@@ -69,7 +69,7 @@
<div v-html="course?.feature"></div>
</div> -->
<div v-if="activeTab === '课程介绍'">
<div v-if="activeTab === '课程介绍'" @click="handleIntroduceClick">
<!-- <p v-html="course?.introduce" class="text-gray-700 whitespace-pre-line"></p> -->
<p v-html="course?.introduce" class="text-gray-700"></p>
</div>
......@@ -337,7 +337,7 @@ import { useRoute, useRouter } from 'vue-router'
import { useCart } from '@/contexts/cart'
import { useAuth } from '@/contexts/auth'
import { useTitle } from '@vueuse/core';
import { showToast, showDialog } from 'vant';
import { showToast, showDialog, showImagePreview } from 'vant';
import { formatDate } from '@/utils/tools'
import AppLayout from '@/components/layout/AppLayout.vue'
......@@ -367,6 +367,22 @@ const isPurchased = ref(false)
const isReviewed = ref(false)
const showReviewPopup = ref(false)
// 处理富文本点击事件,实现图片预览
const handleIntroduceClick = (event) => {
const target = event.target;
if (target.tagName === 'IMG') {
// 阻止默认行为(如果需要)
event.preventDefault();
// 调用 vant 的图片预览
showImagePreview({
images: [target.src],
closeable: true,
showIndex: false, // 单张图片不显示索引
});
}
};
// 打卡相关状态
const task_list = ref([])
const timeout_task_list = ref([])
......