style: 优化细节

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

Hide file tree

Showing 2 changed files with 25 additions and 21 deletions.
diff --git a/packages/fighting-design/avatar/src/avatar.vue b/packages/fighting-design/avatar/src/avatar.vue
@@ -12,12 +12,12 @@
   const slot: Slots = useSlots()
 
   /** 图片 dom 节点 */
-  const avatarEl = ref<HTMLImageElement | undefined>()
+  const avatarRef = ref<HTMLImageElement | undefined>()
 
   const { isSuccess, isShowNode } = useLoadImg(
-    avatarEl,
+    avatarRef,
     prop,
-    (): boolean => !slot.icon && !prop.icon && !prop.text && avatarEl.value
+    (): boolean => !slot.icon && !prop.icon && !prop.text && avatarRef.value
   )
 
   const { styles, classes } = useList(prop, 'avatar')
@@ -36,22 +36,26 @@
   )
 
   /** 样式列表 */
-  const styleList = styles([
-    'background',
-    'fontColor',
-    'fontSize',
-    /**
-     * size 配置项需要进行检查是否需要过滤
-     *
-     * 只有是数字的时候才需要过滤，是数字代表是自定义的尺寸
-     *
-     * 字符串代表内部尺寸，用于类名拼接
-     */
-    {
-      key: 'size',
-      callback: (): boolean => isNumber(prop.size)
-    }
-  ])
+  const styleList = styles(
+    [
+      'background',
+      'fontColor',
+      'fontSize',
+      'zIndex',
+      /**
+       * size 配置项需要进行检查是否需要过滤
+       *
+       * 只有是数字的时候才需要过滤，是数字代表是自定义的尺寸
+       *
+       * 字符串代表内部尺寸，用于类名拼接
+       */
+      {
+        key: 'size',
+        callback: (): boolean => isNumber(prop.size)
+      }
+    ],
+    'zIndex'
+  )
 </script>
 
 <template>
@@ -74,7 +78,7 @@
     <!-- 图片头像 -->
     <img
       v-else
-      ref="avatarEl"
+      ref="avatarRef"
       class="f-avatar__img"
       src=""
       :style="isShowNode ? '' : 'visibility: hidden'"

diff --git a/start/src/App.vue b/start/src/App.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup></script>
 
 <template>
-  <f-avatar-group>
+  <f-avatar-group :size="60">
     <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" />