VUE中根據文件後綴名顯示對應的圖標

簡述需求

哈哈哈,這應該是比較簡單的一個小需求,但是剛開始碰到我還不知道怎麼下手,在這裏記錄一下下~~
從後臺返回的數據中,會含有多個不同類型的文件,需將文件按順序且在每個文件前顯示對應的文件icon和文件名,效果就是下面這樣子的。
在這裏插入圖片描述

思路

首先,要將你所需要的文件圖標名稱改爲 文件後綴名.png 之類的(zip.png/txt.png/world/png…)。寫一個函數,傳入後臺返回的文件名,然後獲取文件的後綴名,進行判斷,如果符合則將return當前截取的後綴名爲文件圖標的名字,例如:fn(one.zip) 結果返回的是 zip
看代碼 :
在這裏插入圖片描述
這只是部分代碼,但是都是一樣的邏輯,你需要匹配哪種文件類型就在txtlist裏寫文件的格式就行。
然後就是在img元素中引入這個方法就ok了
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章