Pārlūkot izejas kodu

feat(Image): добавлено свойство maxHeight для ограничения максимальной высоты изображения и исправлен стиль загрузки

horanchikk 4 mēneši atpakaļ
vecāks
revīzija
bc8f118d58
1 mainītis faili ar 6 papildinājumiem un 2 dzēšanām
  1. 6 2
      components/Image.vue

+ 6 - 2
components/Image.vue

@@ -17,7 +17,6 @@
       <div v-else class="w-full h-full loading" />
     </NuxtImg>
     <div
-      v-else
       class="loading"
       :class="roundedClass"
       :style="containerStyles"
@@ -30,6 +29,7 @@ interface ImageProps {
   src: string;
   height?: number;
   minHeight?: number;
+  maxHeight?: number;
   width?: number;
   minWidth?: number;
   rounded?: string;
@@ -48,6 +48,10 @@ const containerStyles = computed(() => {
     styles.push(`min-height: ${props.minHeight}px`);
   }
   
+  if (props.maxHeight) {
+    styles.push(`max-height: ${props.maxHeight}px`);
+  }
+  
   if (props.width) {
     styles.push(`width: ${props.width}px;`);
   } else if (props.minWidth) {
@@ -76,7 +80,7 @@ onMounted(async () => {
 
 <style scoped>
 .loading {
-  background-color: #f3f4f6;
+  background-color: #f3f4f656;
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }