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> <template>
<div class="bg-layer" :style="combinedLayerStyle"> <div class="bg-layer" :style="layerStyle">
<img <img
v-for="(imgSrc, index) in filteredBackgroundImages" v-for="(imgSrc, index) in filteredBackgroundImages"
:key="index" :key="index"
@ -7,7 +7,7 @@
:src="imgSrc" :src="imgSrc"
:alt="`background-${index}`" :alt="`background-${index}`"
:class="['bg-image', imageClass]" :class="['bg-image', imageClass]"
:style="combinedImageStyle" :style="imageStyle"
/> />
</div> </div>
</template> </template>
@ -46,18 +46,6 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: true, default: true,
}, },
// 使CSS
useCssBackground: {
type: Boolean,
default: false,
},
// CSS
cssBackgroundProps: {
type: Object,
default: () => ({}),
},
}) })
// //
@ -67,29 +55,6 @@ const filteredBackgroundImages = computed(() => {
} }
return props.backgroundImages 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> </script>
<style scoped> <style scoped>