78 lines
1.3 KiB
Vue
78 lines
1.3 KiB
Vue
<template>
|
|
<div class="bg-layer" :style="layerStyle">
|
|
<img
|
|
v-for="(imgSrc, index) in filteredBackgroundImages"
|
|
:key="index"
|
|
v-smart-img
|
|
:src="imgSrc"
|
|
:alt="`background-${index}`"
|
|
:class="['bg-image', imageClass]"
|
|
:style="imageStyle"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
// 背景图片数组
|
|
backgroundImages: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => [],
|
|
},
|
|
|
|
// 层级样式
|
|
layerStyle: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
|
|
// 图片样式
|
|
imageStyle: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
|
|
// 图片类名
|
|
imageClass: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
|
|
// 是否过滤空图片
|
|
filterEmpty: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
})
|
|
|
|
// 过滤掉空的图片路径
|
|
const filteredBackgroundImages = computed(() => {
|
|
if (props.filterEmpty) {
|
|
return props.backgroundImages.filter((img) => img && img.trim() !== '')
|
|
}
|
|
return props.backgroundImages
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.bg-layer {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.bg-image {
|
|
width: 100vw;
|
|
object-fit: cover;
|
|
object-position: center top;
|
|
display: block;
|
|
}
|
|
</style>
|