style(背景图组件): 取消重复背景的使用,没法使用img没有意义
This commit is contained in:
parent
f5c979bfa1
commit
76d9eb1528
@ -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' } // 当使用CSS背景模式时隐藏img元素
|
||||
: props.imageStyle
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user