li {
list-style: none;
}
.content {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.item {
flex: 1;
height: 300px;
background-color: #ededed;
/* 间隙为5px */
margin: 0 5px 5px 0;
/* END */
/* 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整 */
width: calc((100% - 10px) / 3);
/* END */
/* 加入这两个后每个item的宽度就生效了 */
min-width: calc((100% - 10px) / 3);
max-width: calc((100% - 10px) / 3);
/* END */
}
.item:nth-child(3n) {
/* 去除第3n个的margin-right */
margin-right: 0;
}
img {
height: 100%;
width: 100%;
}
input {
height: 30px;
width: 300px;
<template>
<div>
请输入路径:<input type="text" v-model="path" @blur="getupload">
<ul class="content">
<li v-for="(v, i) in imgurl" :key="i" class="item">
<img :src="v" alt="">
</li>
</ul>
</div>
</template>
<script>
import { getupload } from "../api/home"
export default {
data() {
return {
path: "",
imgurl: null,
type: null,
}
},
methods: {
getupload() {
getupload(this.path).then((res) => {
console.log(res);
this.imgurl = res.data
})
}
},
}
</script>
<style scoped>