vue根据浏览器窗口大小自适应排列多个div

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>
相关推荐
10年前端老司机几秒前
微信小程序模板语法和事件
前端·javascript·微信小程序
攻城狮的大师兄2 分钟前
红宝书(第四版)通读之查漏补缺
javascript
苹果酱056730 分钟前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计
Deepsleep.32 分钟前
react和vue的区别之一
javascript·vue.js·react.js
突头小恐龙36 分钟前
Chrome devTools - Lighthouse
前端·javascript·chrome
谦谦橘子36 分钟前
手写tiny webpack,理解webpack原理
前端·javascript·webpack
土豆125038 分钟前
Tailwind CSS 精通指南:提升效率、可维护性与最佳实践
前端·css
zqlcoding39 分钟前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
海底火旺39 分钟前
破解二维矩阵搜索难题:从暴力到最优的算法之旅
javascript·算法·面试
爱吃的强哥1 小时前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js