feat: fix Attributes

Author: CCherry07

src/components/LazyLoadComponent.tsx

@@ -40,10 +40,6 @@ export default defineComponent({
       type: Number,
       default: 0
     },
-    // placeholder:{
-    //   type: Object,
-    //   default: null
-    // },
     width: {
       type: Number,
       default: 0
@@ -56,8 +52,29 @@ export default defineComponent({
       type: Number,
       default: 300
     },
+    style: {
+      type: Object,
+      default: () => { }
+    },
+    class: {
+      type: String,
+      default: ''
+    },
+    delayMethod: {
+      type: String,
+      default: 'throttle'
+    },
+    delayTime: {
+      type: Number,
+      default: 300
+    },
+    placeholder: {
+      type: Object,
+      default: () => { }
+    }
+
   },
-  setup(props, { slots }) {
+  setup(props, { slots, attrs }) {
     const state = reactive({
       visible: props.visibleByDefault ?? false,
       loaded: false,
@@ -95,28 +112,33 @@ export default defineComponent({
     return () => {
       return isScrollTracked ||
         (props.useIntersectionObserver && isIntersectionObserverAvailable()) ?
-        <PlaceholderWithoutTracking
-          height={props.height}
-          onVisible={onVisible}
-          // placeholder={props.placeholder}
-          scrollPosition={props.scrollPosition}
-          threshold={props.threshold}
-          useIntersectionObserver={props.useIntersectionObserver}
-          width={props.width}
-        >
-          {slots.default?.()}
-        </PlaceholderWithoutTracking>
+        <>
+          <PlaceholderWithoutTracking
+            height={props.height}
+            onVisible={onVisible}
+            // placeholder={props.placeholder}
+            scrollPosition={props.scrollPosition}
+            threshold={props.threshold}
+            useIntersectionObserver={props.useIntersectionObserver}
+            width={props.width}
+          >
+            {slots.default?.()}
+          </PlaceholderWithoutTracking>
+        </>
         :
-        <PlaceholderWithTracking
-          height={props.height}
-          onVisible={onVisible}
-          // placeholder={props.placeholder}
-          scrollPosition={props.scrollPosition}
-          threshold={props.threshold}
-          useIntersectionObserver={props.useIntersectionObserver}
-          width={props.width}
-        >{slots.default?.()}
-        </PlaceholderWithTracking>
+        <>
+          <PlaceholderWithTracking
+            height={props.height}
+            onVisible={onVisible}
+            // placeholder={props.placeholder}
+            scrollPosition={props.scrollPosition}
+            threshold={props.threshold}
+            useIntersectionObserver={props.useIntersectionObserver}
+            width={props.width}
+          >
+            {slots.default?.()}
+          </PlaceholderWithTracking>
+        </>
     }
   }
 })

src/components/LazyLoadImage.tsx

@@ -0,0 +1,176 @@
+import { computed, defineComponent, ref } from 'vue';
+import LazyLoadComponent from './LazyLoadComponent.jsx';
+
+export default defineComponent({
+  name: 'LazyLoadImage',
+  props: {
+    afterLoad: {
+      type: Function,
+      default: () => { }
+    },
+    beforeLoad: {
+      type: Function,
+      default: () => { }
+    },
+    scrollPosition: {
+      type: Object,
+      default: null
+    },
+    visibleByDefault: {
+      type: Boolean,
+      default: false
+    },
+    height: {
+      type: Number,
+      default: 0
+    },
+    width: {
+      type: Number,
+      default: 0
+    },
+    useIntersectionObserver: {
+      type: Boolean,
+      default: true
+    },
+    threshold: {
+      type: Number,
+      default: 300
+    },
+    placeholderSrc: {
+      type: String,
+      default: ''
+    },
+    effect: {
+      type: String,
+      default: ''
+    },
+    loadedClassName: {
+      type: String,
+      default: ''
+    },
+    wrapperClassName: {
+      type: String,
+      default: ''
+    },
+    wrapperProps: {
+      type: Object,
+      default: () => { }
+    },
+    delayTime: {
+      type: Number,
+      default: 300
+    },
+    delayMethod: {
+      type: String,
+      default: 'debounce'
+    },
+    placeholder: {
+      type: Object,
+      default: null
+    },
+    class: {
+      type: String,
+      default: ''
+    },
+    style: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  setup(props, { attrs }) {
+    const loaded = ref(false);
+    function onImageLoad() {
+      if (!loaded.value) {
+        return null
+      }
+      return () => {
+        props.afterLoad?.()
+        loaded.value = true
+      }
+    }
+    function getImg() {
+      const imgProps = computed(() => {
+        const {
+          class: className,
+          afterLoad,
+          beforeLoad,
+          delayMethod,
+          delayTime,
+          effect,
+          placeholder,
+          placeholderSrc,
+          scrollPosition,
+          threshold,
+          useIntersectionObserver,
+          visibleByDefault,
+          wrapperClassName,
+          wrapperProps,
+          style,
+          loadedClassName,
+          ...imgProps
+        } = props;
+        return imgProps
+      })
+      // @ts-ignore
+      return <img onLoad={onImageLoad()} {...imgProps.value} {...attrs} />
+    }
+    function getLazyLoadImage() {
+      return (
+        <LazyLoadComponent
+          beforeLoad={props.beforeLoad}
+          class={props.class}
+          delayMethod={props.delayMethod}
+          delayTime={props.delayTime}
+          height={props.height}
+          placeholder={props.placeholder}
+          scrollPosition={props.scrollPosition}
+          style={props.style}
+          threshold={props.threshold}
+          useIntersectionObserver={props.useIntersectionObserver}
+          visibleByDefault={props.visibleByDefault}
+          width={props.width}
+        >
+          {getImg()}
+        </LazyLoadComponent>
+      )
+    }
+
+    function getWrappedLazyLoadImage(lazyLoadImage: any) {
+      const wrapperBackground =
+        loaded.value || !props.placeholderSrc
+          ? {}
+          : {
+            backgroundImage: `url(${props.placeholderSrc})`,
+            backgroundSize: '100% 100%',
+          };
+      return (
+        <span
+          class={
+            props.wrapperClassName +
+            ' lazy-load-image-background ' +
+            props.effect + props.loadedClassName
+          }
+          style={{
+            ...wrapperBackground,
+            color: 'transparent',
+            display: 'inline-block',
+            height: props.height,
+            width: props.width,
+          }}
+          {...props.wrapperProps}
+        >
+          {lazyLoadImage}
+        </span>
+      );
+    }
+
+    return () => {
+      const lazyLoadImage = getLazyLoadImage();
+      const needsWrapper = (props.effect || props.placeholderSrc) && !props.visibleByDefault;
+      if (!needsWrapper && !props.wrapperClassName && !props.wrapperProps) {
+        return lazyLoadImage;
+      }
+      return getWrappedLazyLoadImage(lazyLoadImage);
+    }
+  },
+});