style(背景图组件): 适配重复背景的使用

src/components/BackgroundLayer.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="bg-layer" :style="layerStyle">
+  <div class="bg-layer" :style="combinedLayerStyle">
     <img
-      v-for="(imgSrc, index) in backgroundImages"
+      v-for="(imgSrc, index) in filteredBackgroundImages"
       :key="index"
       v-smart-img
       :src="imgSrc"
       :alt="`background-${index}`"
       :class="['bg-image', imageClass]"
-      :style="imageStyle"
+      :style="combinedImageStyle"
     />
   </div>
 </template>
@@ -40,6 +40,55 @@ const props = defineProps({
     type: String,
     default: '',
   },
+
+  // 是否过滤空图片
+  filterEmpty: {
+    type: Boolean,
+    default: true,
+  },
+
+  // 是否使用CSS背景模式（用于重复背景等）
+  useCssBackground: {
+    type: Boolean,
+    default: false,
+  },
+
+  // CSS背景模式下的背景属性
+  cssBackgroundProps: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+// 过滤掉空的图片路径
+const filteredBackgroundImages = computed(() => {
+  if (props.filterEmpty) {
+    return props.backgroundImages.filter((img) => img && img.trim() !== '')
+  }
+  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>