使用图片懒加载

src/components/PreviewImage/index.vue

@@ -1,6 +1,5 @@
 <!-- 图片预览 -->
 <script lang="ts" setup name="PreviewImage">
-
 type Props = {
 	src?: string
 	width?: string | number
@@ -13,27 +12,35 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const realSrc = computed(() => {
-    if (!props.src) return "";
+	if (!props.src) return ""
-    let real_src = props.src.split(",")[0];
+	let real_src = props.src.split(",")[0]
-    return dispatchUrl(real_src) ?? "";
+	return dispatchUrl(real_src) ?? ""
 })
 const realSrcList = computed(() => {
-    if (!props.src) return "";
+	if (!props.src) return ""
-    let real_src = props.src.split(",")?.map(v => dispatchUrl(v));
+	let real_src = props.src.split(",")?.map((v) => dispatchUrl(v))
-    return real_src ?? [];
+	return real_src ?? []
 })
-const realWidth = computed(() => typeof props.width == "string" ? props.width : `${props.width}px`)
+const realWidth = computed(() => (typeof props.width == "string" ? props.width : `${props.width}px`))
-const realHeight = computed(() => typeof props.height == "string" ? props.height : `${props.height}px`)
+const realHeight = computed(() => (typeof props.height == "string" ? props.height : `${props.height}px`))
 
 function dispatchUrl(url?: string) {
 	if (!url) return ""
-    return url.includes('http') ? url : import.meta.env.VITE_IMAGE_BASE_PATH + url
+	return url.includes("http") ? url : import.meta.env.VITE_IMAGE_BASE_PATH + url
 }
 </script>
 
 <template>
-    <el-image v-if="props.src" hide-on-click-modal preview-teleported :src="`${realSrc}`" fit="cover"
+	<el-image
-        :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="realSrcList">
+		v-if="props.src"
+		hide-on-click-modal
+		preview-teleported
+		:src="`${realSrc}`"
+		fit="cover"
+		:style="`width:${realWidth};height:${realHeight};`"
+		:preview-src-list="realSrcList"
+		loading="lazy"
+	>
 		<template #error>
 			<div class="image-slot">
 				<i class="el-icon-picture-outline"></i>
@@ -43,7 +50,6 @@ function dispatchUrl(url?: string) {
 	<div v-else :style="`width:${realWidth};height:${realHeight};`" />
 </template>
 
-
 <style lang="scss" scoped>
 .el-image {
 	border-radius: 5px;

src/views/canteen/canteenDailyMenu/index.vue

@@ -12,7 +12,7 @@
 					v-for="(item, index) in weekData.data"
 					:key="index"
 					@click="timeClick(item, index)"
-					:class="{ selectedSpan: isActive === index ? 'selected' : '' }"
+					:class="{ selectedSpan: isActive === index }"
 					class="border-2 border-solid border-gray-200 text-center"
 				>
 					<span>{{ item }}</span>
@@ -55,7 +55,12 @@
 					<td v-if="!loading" class="text-center" @click="addFood(3)">晚餐</td>
 					<div class="food_list">
 						<td class="food_list_item" v-for="(item, index) in foodData3" :key="index" @click="delteData(item.tid)">
-							<el-image style="width: 80px; height: 80px" :src="imageBaseUrl + item.picUrl" fit="cover" />
+							<el-image
+								style="width: 80px; height: 80px"
+								loading="lazy"
+								:src="imageBaseUrl + item.picUrl"
+								fit="cover"
+							/>
 							<div class="w-full flex justify-around items-center text-black mt-2">
 								<span>{{ item.name }}</span>
 								<span class="mx-1">|</span>
@@ -114,7 +119,7 @@ const addFood = async (hourType: number) => {
 //选中具体时间数据
 const timeClick = async (time: string, index: number) => {
 	//数据查询操作
-	if (time) {
+	if (time && isActive.value !== index) {
 		//时间处理
 		time = time.substring(0, time.indexOf("("))
 		timedata = time
@@ -265,6 +270,7 @@ onMounted(async () => {
 	border-left: 2px solid transparent;
 	color: rgb(255, 187, 0);
 	position: relative;
+	cursor: default;
 }
 .selectedSpan::before {
 	content: "";