fix: style

Author: CCherry07

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-lazy-load-image-component",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "vue-lazy-load-image-component",
   "main": "lib/index.js",
   "module": "lib/index.js",

src/components/LazyLoadComponent.tsx

@@ -63,6 +63,8 @@ export default defineComponent({
           threshold={props.threshold}
           useIntersectionObserver={props.useIntersectionObserver}
           width={props.width}
+          style={props.style}
+          class={props.class}
         />
       ) : (
         <PlaceholderWithTracking
@@ -73,6 +75,8 @@ export default defineComponent({
           threshold={props.threshold}
           useIntersectionObserver={props.useIntersectionObserver}
           width={props.width}
+          style={props.style}
+          class={props.class}
         />
       );
     };

src/components/LazyLoadImage.tsx

@@ -10,8 +10,8 @@ export type LazyLoadImageProps = Partial<
 
 const LazyLoadImage = defineComponent({
   name: 'LazyLoadImage',
-  compatConfig: { MODE: 3 },
   inheritAttrs: false,
+  compatConfig: { MODE: 3 },
   props: LazyLoadImagePropsFunc(),
   setup(props, { attrs }) {
     const loaded = ref(false);
@@ -27,7 +27,6 @@ const LazyLoadImage = defineComponent({
     function getImg() {
       const imgProps = computed(() => {
         const {
-          class: className,
           afterLoad,
           beforeLoad,
           delayMethod,
@@ -41,8 +40,8 @@ const LazyLoadImage = defineComponent({
           visibleByDefault,
           wrapperClassName,
           wrapperProps,
-          style,
           loadedClassName,
+          onImageError,
           ...imgProps
         } = props;
         return imgProps;
@@ -103,7 +102,6 @@ const LazyLoadImage = defineComponent({
         </span>
       );
     }
-
     return () => {
       const lazyLoadImage = getLazyLoadImage();
       const needsWrapper = (props.effect || props.placeholderSrc) && !props.visibleByDefault;

src/components/PlaceholderWithoutTracking.tsx

@@ -7,6 +7,7 @@ import { PlaceholderWithoutTrackingPropsFunc } from './interface';
 
 export default defineComponent({
   name: 'PlaceholderWithoutTracking',
+  inheritAttrs: false,
   props: PlaceholderWithoutTrackingPropsFunc(),
   setup(props) {
     const placeholder = shallowRef<HTMLElement>();
@@ -74,6 +75,7 @@ export default defineComponent({
         display: 'inline-block',
         height: `${props.height}px`,
         width: `${props.width}px`,
+        ...props.style,
       };
     });
     return () => {

src/components/interface.ts

@@ -92,6 +92,14 @@ export const LazyLoadImagePropsFunc = () => {
 };
 
 export const PlaceholderWithoutTrackingPropsFunc = () => ({
+  style: {
+    type: Object as PropType<Partial<CSSProperties>>,
+    default: () => {},
+  },
+  class: {
+    type: String,
+    default: '',
+  },
   scrollPosition: {
     type: Object as PropType<ScrollPosition>,
     default: null,