javascript
复制代码
<template>
<div class="bigBox">
<div class="smallBox" :style="{'width':width}" v-for="item in 10" :key="item">
<div class="contentItem">{{ item }}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
width: '20%'
};
},
created() {
this.width = 100 / Math.trunc(window.innerWidth / 200) + '%';
window.addEventListener('resize', this.reSizer);
},
destroyed() {
window.removeEventListener('resize', this.reSizer);
},
methods: {
reSizer() {
this.width = 100 / Math.trunc(window.innerWidth / 200) + '%';
}
}
};
</script>
<style scoped lang="scss">
.bigBox {
display: flex;
flex-wrap: wrap;
.smallBox {
padding: 10px;
.contentItem {
height: 200px;
border: 1px solid black;
}
}
}
</style>
