🌈 style: 图片支持传入 object-fit

Author: imsyy

src/components/Player/PlayerCover.vue

@@ -12,6 +12,7 @@
       :key="musicStore.getSongCover()"
       :src="musicStore.getSongCover('l')"
       :observe-visibility="false"
+      object-fit="cover"
       class="cover-img"
     />
     <!-- 动态封面 -->
@@ -125,7 +126,6 @@ onBeforeUnmount(() => {
   .cover-img {
     width: 100%;
     height: 100%;
-    object-fit: cover;
     z-index: 1;
     box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1);
     transition: opacity 0.1s ease-in-out;

src/components/UI/s-image.vue

@@ -15,6 +15,7 @@
       :class="['cover', { loaded: isLoaded }]"
       :decoding="decodeAsync ? 'async' : 'auto'"
       :loading="nativeLazy ? 'lazy' : 'eager'"
+      :style="{ objectFit: objectFit }"
       @load="imageLoaded"
       @error="imageError"
     />
@@ -27,6 +28,8 @@ const props = withDefaults(
     src: string | undefined;
     defaultSrc?: string;
     alt?: string;
+    // 图片填充方式
+    objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
     // 是否进行可视状态变化
     observeVisibility?: boolean;
     // 在不可视时是否释放图片以回收内存
@@ -42,6 +45,7 @@ const props = withDefaults(
     releaseOnHide: false,
     decodeAsync: true,
     nativeLazy: true,
+    objectFit: "cover",
   },
 );