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