فهرست منبع

```
feat(FileUploader): 添加文件上传组件限制功能

- 实现上传按钮的动态显示控制,当文件数量达到限制时隐藏上传按钮
- 添加CSS类控制上传按钮的显隐状态
- 优化文件上传组件的用户体验

fix(App): 修复头像显示逻辑

- 使用可选链操作符安全访问用户头像信息
- 当用户头像不存在时回退到默认头像
```

zhangningning 1 ماه پیش
والد
کامیت
32acae6ce3
2فایلهای تغییر یافته به همراه13 افزوده شده و 3 حذف شده
  1. 1 1
      src/App.vue
  2. 12 2
      src/components/FileUploader.vue

+ 1 - 1
src/App.vue

@@ -15,7 +15,7 @@
             <!-- <el-menu-item index="5" @click="$router.push('/my-learning')">米币商城</el-menu-item> -->
           </el-menu>
           <div class="header-right">
-            <el-avatar :size="32" :src="appStore.avatar" />
+            <el-avatar :size="32" :src="appStore.userInfo?.userAvatar || appStore.avatarDefault" />
             <el-dropdown v-if="appStore.token">
               <span class="el-dropdown-link">
                 {{ appStore.userInfo?.nickName || '用户' }}

+ 12 - 2
src/components/FileUploader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="file-uploader-container">
+  <div class="file-uploader-container" :class="{'hide-upload-btn': !(!limit || fileList.length < limit)}">
     <el-upload
       ref="uploadRef"
       :action="uploadUrl"
@@ -38,7 +38,7 @@
       <template v-else-if="listType === 'picture-card'">
         <!-- 只有当文件数量小于limit且limit大于0时才显示加号按钮 -->
         <!--  v-if="!limit || fileList.length < limit" -->
-        <el-icon><Plus /></el-icon>
+        <el-icon v-if="!limit || fileList.length < limit" ><Plus /></el-icon>
       </template>
 
       
@@ -516,6 +516,16 @@ defineExpose({
 })
 </script>
 
+<style lang="scss">
+.file-uploader-container{
+  &.hide-upload-btn{
+    .el-upload--picture-card{
+      display: none;
+    }
+  }
+};
+</style>
+
 <style scoped lang="scss">
 .file-uploader-container {
   width: 100%;