feat: 优化头像组组件

FightingDesign · Jul 14, 2023 · e59084d · e59084d
1 parent 6f196ef
commit e59084d
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 11 deletions.
diff --git a/packages/fighting-design/avatar-group/src/props.ts b/packages/fighting-design/avatar-group/src/props.ts
@@ -7,7 +7,7 @@ export const Props = {
   /** 偏移距离 */
   positionSize: setStringNumberProp(),
   /** 是否为圆角 */
-  round: setBooleanProp(),
+  round: setBooleanProp(true),
   /**
    * 头像大小
    *
@@ -45,6 +45,7 @@ export const Props = {
   })
 } as const
 
+/** avatar-group 组件 prop 类型 */
 export type AvatarGroupProps = ExtractPropTypes<typeof Props>
 
 /** avatar-group 注入的依赖项 */

diff --git a/packages/fighting-design/avatar/src/avatar.vue b/packages/fighting-design/avatar/src/avatar.vue
@@ -1,9 +1,11 @@
 <script lang="ts" setup>
   import { Props } from './props'
-  import { ref, useSlots } from 'vue'
+  import { ref, useSlots, reactive, toRefs, inject } from 'vue'
   import { FSvgIcon } from '../../svg-icon'
   import { useLoadImg, useList } from '../../_hooks'
   import { isNumber, isString } from '../../_utils'
+  import { AVATAR_GROUP_PROPS_KEY } from '../../avatar-group/src/props'
+  import type { AvatarGroupProps } from '../../avatar-group'
   import type { Slots } from 'vue'
 
   defineOptions({ name: 'FAvatar' })
@@ -14,13 +16,22 @@
   /** 图片 dom 节点 */
   const avatarRef = ref<HTMLImageElement | undefined>()
 
+  /** 获取到父组件注入的依赖项 */
+  const parentInject: AvatarGroupProps | undefined = inject(AVATAR_GROUP_PROPS_KEY)
+
   const { isSuccess, isShowNode } = useLoadImg(
     avatarRef,
     prop,
     (): boolean => !slot.icon && !prop.icon && !prop.text && avatarRef.value
   )
 
-  const { styles, classes } = useList(prop, 'avatar')
+  /** 合并后的 prop 参数 */
+  const _prop = reactive({
+    ...toRefs(prop),
+    ...toRefs(parentInject || {})
+  })
+
+  const { styles, classes } = useList(_prop, 'avatar')
 
   /** 类名列表 */
   const classList = classes(
@@ -29,7 +40,7 @@
       'fit',
       {
         key: 'size',
-        callback: (): boolean => isString(prop.size)
+        callback: (): boolean => isString(_prop.size)
       }
     ],
     'f-avatar'
@@ -51,7 +62,7 @@
        */
       {
         key: 'size',
-        callback: (): boolean => isNumber(prop.size)
+        callback: (): boolean => isNumber(_prop.size)
       }
     ],
     'zIndex'

diff --git a/packages/fighting-design/button/src/button.vue b/packages/fighting-design/button/src/button.vue
@@ -16,7 +16,7 @@
   const { classList, styleList } = useButton(prop)
 
   /** 元素节点 */
-  const FButtonEl = ref<HTMLButtonElement | undefined>()
+  const FButtonRef = ref<HTMLButtonElement | undefined>()
 
   /**
    * 按钮点击
@@ -54,7 +54,7 @@
 
       const { runRipples } = useRipples(
         evt,
-        FButtonEl.value as HTMLButtonElement,
+        FButtonRef.value as HTMLButtonElement,
         options
       )
 
@@ -73,7 +73,7 @@
 <template>
   <template v-if="href">
     <a
-      ref="FButtonEl"
+      ref="FButtonRef"
       role="link"
       tabindex="0"
       :class="classList"
@@ -97,7 +97,7 @@
 
   <template v-else>
     <button
-      ref="FButtonEl"
+      ref="FButtonRef"
       role="button"
       tabindex="0"
       :class="classList"

diff --git a/start/src/App.vue b/start/src/App.vue
@@ -1,9 +1,13 @@
 <script lang="ts" setup></script>
 
 <template>
-  <f-avatar-group :size="60">
+  <f-avatar-group :size="40" :round="true" fit="contain">
     <f-avatar round src="http://localhost:8888/src/assets/images/app/setting.png" />
     <f-avatar round src="http://localhost:8888/src/assets/images/app/organization.png" />
-    <f-avatar v-for="i in 10" round src="http://localhost:8888/src/assets/images/app/find.png" />
+    <f-avatar
+      v-for="i in 10"
+      round
+      src="http://localhost:8888/src/assets/images/app/find.png"
+    />
   </f-avatar-group>
 </template>