style(背景图组件): 取消重复背景的使用,没法使用img没有意义

This commit is contained in:
hzj 2026-01-05 18:57:05 +08:00
parent f5c979bfa1
commit 76d9eb1528

View File

@ -1,5 +1,5 @@
<template>
<div class="bg-layer" :style="combinedLayerStyle">
<div class="bg-layer" :style="layerStyle">
<img
v-for="(imgSrc, index) in filteredBackgroundImages"
:key="index"
@ -7,7 +7,7 @@
:src="imgSrc"
:alt="`background-${index}`"
:class="['bg-image', imageClass]"
:style="combinedImageStyle"
:style="imageStyle"
/>
</div>
</template>
@ -46,18 +46,6 @@ const props = defineProps({
type: Boolean,
default: true,
},
// 使CSS
useCssBackground: {
type: Boolean,
default: false,
},
// CSS
cssBackgroundProps: {
type: Object,
default: () => ({}),
},
})
//
@ -67,29 +55,6 @@ const filteredBackgroundImages = computed(() => {
}
return props.backgroundImages
})
//
const combinedLayerStyle = computed(() => {
if (props.useCssBackground && filteredBackgroundImages.value.length > 0) {
return {
...props.layerStyle,
backgroundImage: `url(${filteredBackgroundImages.value[0]})`,
backgroundRepeat: props.cssBackgroundProps.repeat,
backgroundPosition: props.cssBackgroundProps.position,
backgroundSize: props.cssBackgroundProps.size,
}
}
return {
...props.layerStyle,
}
})
const combinedImageStyle = computed(() => {
return props.useCssBackground
? { display: 'none' } // 使CSSimg
: props.imageStyle
})
</script>
<style scoped>