| #### 無圖言*,所以先上最終效果圖(想參考程式碼的可以直接滑到最後) |
|
 |
|
| ### 具體實現思路🤯 |
|
| 注意: 每個人的項目環境以及需求,都不盡相同,所以這裡僅僅提供思路. |
|
| #### 看看沒有收起之前🤨 |
|
 |
|
|
|
| 可以看到,沒有實現收起之前,如果一直上傳文件,文件列表會一直向下延伸……. |
|
| 如果需求的上傳數量少的話,還可以接受,但是,讓我們看看需求 |
|
 |
|
|
|
| ???? 30 張 |
|
 |
|
|
|
|
|
| 可見,為了儘可能的減少對頁面的影響,只能弄個展開以及收起了! |
|
| #### 思考🤔 |
|
| 展開以及收起,無非是控制顯示數量,那麼我們就要對症下藥,先看看什麼屬性與上傳的文件數量有關 |
|
| 這時候我們就要去看 element-ui 的文檔了 |
|
|
|
|
|
|
|
| 這裡可以看到 file-list 這個屬性與我們的上傳文件列表有關,那我們就從它下手! |
|
| 這裡我們用 slice() 方法 試試 |
|
| 關鍵程式碼: |
|
| 注意:我這因為有多項附件要上傳,所以列表是個數組 |
|
| 相應的每一項是一個item,所以這裡item.accessory才是我圖片存儲的地方 |
|
| 根據你們的實際數據格式看著來,不要完全照抄 |
|
| “`vue |
| :file-list=”item.accessory.slice(0, 1)” |
| “` |
|
 |
|
| 隨後可以看到,不管我們怎麼上傳圖片,只會顯示第一張 |
|
| 那麼到這裡,我們限制顯示數量的需求達到了 |
|
| 然後不要著急,這時候我們先去弄個按鈕出來,飯要一口一口吃嘛 |
|
| 關鍵程式碼: |
|
| “`vue |
| // textFlg 是我自定的 類似於開關 |
| <div v-show=”item.accessory.length > 1″ class=”more” @click=”res=>{item.textFlg = !item.textFlg}”> |
|
|
| “` |
|
| 這個按鈕的整體思路是,只有上傳圖片大於1張才顯示; 默認顯示當前上傳的文件數量-1;每當點擊之後,切換狀態. |
|
 |
|
| 之後就能實現這種效果,樣式啥的我就不在這裡展開了,主要是傳遞一個思路! |
|
| 限制顯示數量又了,切換效果有了,那麼現在就剩展開了! |
|
| 上面我們這條程式碼嗎? |
|
| “`vue |
| :file-list=”item.accessory.slice(0, 1)” |
| “` |
|
| 這裡我們將 slice() 方法 的第二個參數 固定成了 1 ; 這樣就始終只顯示一條! |
|
| 那麼我們要是根據某個狀態來切換這個1,不就達到我們想要的展開了嘛? |
|
| 說干就干! |
|
| 經過一番摸索之後! 實現了切換顯示數量 |
|
| “`vue |
| :file-list=”item.accessory.slice(0, item.textFlg ? item.accessory.length : 1)” |
| “` |
|
| 這裡三元表達式的意思是 textFlg === true 嗎? 如果為true 就顯示與上傳列表數組長度相等的數據 :(否則) 顯示1 |
|
| textFlg 就是我們用來控制按鈕文字的狀態,所以毫無疑問他們倆可以共用! |
|
| 至此,我們就實現了如最終效果圖的切換 |
|
|
|
| 以上,就是大概的實現思路,當然例如樣式之類的等等細節,本文都選擇直接略過,還請諒解. |
|
| 最後我會貼出我的所有程式碼,以及數據格式. |
|
| 當然,這肯定不是最優解,不過這是我的思路,有別的觀點或者解決方案歡迎討論~ |
|
| ### 僅供參考! 僅供參考! 僅供參考!😇 |
|
| 我的數據格式: |
|
| “`json |
| details:[ |
|
|
| textFlg: false, |
|
| ] |
| “` |
|
| 我的示例源碼: |
|
| “`vue |
|
|
| <el-upload |
| ref=”upload” |
| list-type=”text” |
| :style=”{ width: item.accessory.length > 1 ? ‘140px’ : ‘100%’ }” |
| :action=”$store.state.config.uploadConfig.actionUrl” |
:headers=”{ Authorization: Bearer ${$store.state.token} }” |
| :on-preview=”handlePreview” |
| :auto-upload=”true” |
| :file-list=”item.accessory.slice(0, item.textFlg ? item.accessory.length : 1)” |
| :on-success=” |
| (res, file) => { |
| return handleSuccess(res, i, file) |
| } |
| “ |
| :on-remove=”handleRemove” |
| :before-upload=”beforeAvatarUpload” |
| multiple |
| :limit=”30″ |
| :on-exceed=”handleExceed” |
| :disabled=”!isEdit” |
| > |
|
|
| <div v-show=”item.accessory.length > 1″ class=”more” @click=”more(item)”> |
{{ item.textFlg ? ‘收起’ : +${item.accessory.length - 1} }} |
|
|
| “` |
|
| 樣式: |
|
| “`css |
| .more { |
| margin: 0 0 0 110px; |
| cursor: pointer; |
| width: 45px; |
| height: 20px; |
| background: #ebeef5; |
| text-align: center; |
| border-radius: 5px; |
| position: absolute; |
| bottom: 12px; |
| right: 5px; |
| } |
| “` |
|
| 如果能幫到你,是我最大的榮幸! |
