fix: onError add event and objectFit set default value

tusen-ai · Jul 13, 2021 · 08bfd3a · 08bfd3a
1 parent 84102f9
commit 08bfd3a
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/src/avatar/src/Avatar.tsx b/src/avatar/src/Avatar.tsx
@@ -27,14 +27,17 @@ const avatarProps = {
     default: false
   },
   color: String,
-  objectFit: String as PropType<
-  'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
-  >,
+  objectFit: {
+    type: String as PropType<
+    'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+    >,
+    default: 'fill'
+  },
   round: {
     type: Boolean,
     default: false
   },
-  onError: Function as PropType<() => void>
+  onError: Function as PropType<(e: Event) => void>
 } as const
 
 export type AvatarProps = ExtractPublicPropTypes<typeof avatarProps>
@@ -85,8 +88,12 @@ export default defineComponent({
       textRef,
       selfRef,
       mergedClsPrefix: mergedClsPrefixRef,
+      handleError: (e: Event) => {
+        const { onError } = props
+        onError?.(e)
+      },
       cssVars: computed(() => {
-        const { size, round, circle, objectFit = 'fill' } = props
+        const { size, round, circle, objectFit } = props
         const {
           self: { borderRadius, fontSize, color },
           common: { cubicBezierEaseInOut }
@@ -117,7 +124,7 @@ export default defineComponent({
         style={this.cssVars as any}
       >
         {!$slots.default && src ? (
-          <img src={src} onError={this.onError} />
+          <img src={src} onError={this.handleError} />
         ) : (
           <span
             ref="textRef"

diff --git a/src/image/src/Image.tsx b/src/image/src/Image.tsx
@@ -30,13 +30,16 @@ const imageProps = {
   alt: String,
   height: [String, Number] as PropType<string | number>,
   imgProps: Object as PropType<imgProps>,
-  objectFit: String as PropType<
-  'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
-  >,
+  objectFit: {
+    type: String as PropType<
+    'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+    >,
+    default: 'fill'
+  },
   width: [String, Number] as PropType<string | number>,
   src: String,
   showToolbar: { type: Boolean, default: true },
-  onError: Function as PropType<() => void>
+  onError: Function as PropType<(e: Event) => void>
 }
 
 export type ImageProps = ExtractPublicPropTypes<typeof imageProps>
@@ -70,8 +73,12 @@ export default defineComponent({
         previewInst.setThumbnailEl(imageRef.value)
         previewInst.toggleShow()
       },
+      handleError: (e: Event) => {
+        const { onError } = props
+        onError?.(e)
+      },
       cssVars: computed(() => {
-        const { objectFit = 'fill' } = props
+        const { objectFit } = props
         return {
           '--object-fit': objectFit
         }
@@ -98,7 +105,7 @@ export default defineComponent({
         alt={this.alt ? this.alt : imgProps.alt}
         aria-label={this.alt ? this.alt : imgProps.alt}
         onClick={this.handleClick}
-        onError={this.onError}
+        onError={this.handleError}
       />
     )