一、最近想做一个文件上传管理系统。展示文件仿照百度云那样有图标,有文件名,做文件列表显示。记录下代码。
<div class="item_list">
<div v-for="item in list" class="file_item">
<div style="width: 24px;height: 24px;margin: 0 auto;"><img src="src/components/images/image-icon.png" v-if="item.indexOf('png')>0">
<img src="src/components/images/text-icon.png" v-if="item.indexOf('exe')>0">
<img src="src/components/images/video-icon.png" v-if="item.indexOf('/')>0"></div>
<div style="text-align: center;overflow:hidden;">
<span>{{item}}</span>
</div>
</div>
</div>
// css
.item_list {
margin-left: 50px;
display: flex;
width: 240px;
height: 240px;
/*justify-content: space-between;*/
flex-wrap: wrap;
}
.file_item {
/*flex: 1;*/
margin-right: 10px;
width: 50px;
height: 50px;
}
// 数据为
list: ['aaaaaaaaa.png','bb.exe','cc/','dd.png','ee.exe','ff/','ee.exe','ff.png','ee/','ff.png']
二、其实就是用vue的v-if来做效果,里面用indexOf判断,用正则可能准确一点。后面用弹性布局。效果如下: