使用图片懒加载
This commit is contained in:
ctw committed
1 parent
b6f313ed78
commit
628fa5bfdc
2 files changed
+61
-49
No files matched your search
@@ -1,72 +1,78 @@
|
||||
<!-- 图片预览 -->
|
||||
<script lang="ts" setup name="PreviewImage">
|
||||
|
||||
type Props = {
|
||||
src?: string
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
src?: string
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: 50,
|
||||
height: 50,
|
||||
width: 50,
|
||||
height: 50,
|
||||
})
|
||||
|
||||
const realSrc = computed(() => {
|
||||
if (!props.src) return "";
|
||||
let real_src = props.src.split(",")[0];
|
||||
return dispatchUrl(real_src) ?? "";
|
||||
if (!props.src) return ""
|
||||
let real_src = props.src.split(",")[0]
|
||||
return dispatchUrl(real_src) ?? ""
|
||||
})
|
||||
const realSrcList = computed(() => {
|
||||
if (!props.src) return "";
|
||||
let real_src = props.src.split(",")?.map(v => dispatchUrl(v));
|
||||
return real_src ?? [];
|
||||
if (!props.src) return ""
|
||||
let real_src = props.src.split(",")?.map((v) => dispatchUrl(v))
|
||||
return real_src ?? []
|
||||
})
|
||||
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 realWidth = computed(() => (typeof props.width == "string" ? props.width : `${props.width}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
|
||||
if (!url) return ""
|
||||
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"
|
||||
:style="`width:${realWidth};height:${realHeight};`" :preview-src-list="realSrcList">
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<div v-else :style="`width:${realWidth};height:${realHeight};`" />
|
||||
<el-image
|
||||
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>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<div v-else :style="`width:${realWidth};height:${realHeight};`" />
|
||||
</template>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-image {
|
||||
border-radius: 5px;
|
||||
background-color: #ebeef5;
|
||||
box-shadow: 0 0 5px 1px #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: #ebeef5;
|
||||
box-shadow: 0 0 5px 1px #ccc;
|
||||
|
||||
:deep(.el-image__inner) {
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
:deep(.el-image__inner) {
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.image-slot) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #909399;
|
||||
font-size: 30px;
|
||||
}
|
||||
:deep(.image-slot) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #909399;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -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: "";
|
||||
|
||||
Reference in new issue
Block a user