vue专题之vue动态布局的实现【六】

已于 2022-11-27 21:04:04 修改
阅读量5.8k 收藏 24
点赞数 6
分类专栏： 前端与VUE 文章标签： vue.js webstorm grid 动态布局
于 2022-03-21 22:07:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhan107876/article/details/123631374
版权

动态布局

动态布局主要表现在两方面：
1、布局本身是非固定的
2、布局的内容是非固定的

引起布局动态变化的因素我们称动态因子，通常情况下，动态因子是css样式，也就是说，通过使用不同的样式以达到动态变更布局的效果。

然后在特殊情况下，动态因子也可以是数据，也就是说，可以根据不同的数据来影响布局的显示从而达到动态的效果。

知识点：grid布局，VUE组件

显示效果

场景一：完整显示3*4布局
场景二：完整显示3*3布局
场景三：3*3布局，左右两列显示，中间不显示
场景三：3*4布局，上下两行显示，中间不显示
在这里插入图片描述
实现以上效果，需要用到 grid布局
参考：前端基础知识（grid布局）

在场景三、四中，使用隐藏css样式隐藏不需要显示的数据块

静态实现

先采用静态文件的方式实现

<template>
    <div class="main-box">
        <div class="box3-4">
            <div class="box-div">1</div>
            <div class="box-div">2</div>
            <div class="box-div">3</div>
            <div class="box-div">4</div>
            <div class="box-div">5</div>
            <div class="box-div">6</div>
            <div class="box-div">7</div>
            <!--使用null-div样式隐藏-->
            <!--<div class="null-div">8</div>-->
            <div class="box-div">8</div>
            <div class="box-div">9</div>
            <div class="box-div">10</div>
            <div class="box-div">11</div>
            <div class="box-div">12</div>
        </div>
    </div>
</template>
<style>
    .box3-4 {
        /*vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100*/
        /*vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100*/
        width: 80vw;
        height: 100%;
        display: grid; /* 开启grid布局*/
        grid-template-columns: repeat(4, 25%); /*设置4列，每一列占总宽度的25% */
        grid-template-rows: repeat(3, 30%); /*设置3行， 每一行占总宽度的30% */
        grid-column-gap: 2vh; /*列间距*/
        grid-row-gap: 2vh; /*行间距*/
    }

    .box-div {
        background-color: #34ce57;
        display: flex;
        /*实现水平居中*/
        align-items: center;
        /*实现垂直居中*/
        justify-content: center;
        /*文字大小颜色*/
        font-size: 10vh;
        color: orange;
    }

    .null-div {
        /*隐藏*/
        visibility: hidden
    }

    .main-box {
        /*使内部div居中*/
        display: flex;
        align-items: center;
        justify-content: center;
        /*背景颜色*/
        background-color: cornsilk;
        width: 100vw;
        height: 80vh;
    }

</style>

说明：
1、顶层div居中显示
2、二级子项div使用display: grid布局方式
3、三级子项div对每个方块进行样式填充

这里的关键是二级子项div，通过对grid的设置，子项排布成几行几列，以及行列间隔，子项高和宽。

此时得到的显示效果如上图【场景一】
通过对三级子项div使用null-div来进行隐藏，隐藏5到8就得到上图【场景四】的效果

在【场景一】基础上通过变更行列参数成3行3列

grid-template-columns: repeat(4, 25%); /*设置4列，每一列占总宽度的25% */
grid-template-rows: repeat(3, 30%); /*设置3行， 每一行占总宽度的30% */

就得到【场景二】

再将2,5,8div隐藏就得到【场景三】

以上 的手法是手动设置css样式达到动态布局的效果，接下来在此基础上，改造成动态实现方式。

动态布局

先看效果
请添加图片描述

因为篇幅有限，这里用按钮模拟数据变更，以此带来布局以及布局显示内容的变更。

实现分三个部分
1、页面入口，包括数据的组织，封装，然后传入子组件【数据预处理】
2、动态布局组件，包括布局定义与判断使用的具体布局，通过数据的行列决定用哪个布局【布局】
3、数据块显示组件，通过判断数据的显示标志，选择需要显示或者隐藏【数据展示】

我们简单的模型，这三部分对应三个wue文件

MyDyGridView.vue



/**
* 页面入口
* 组织数据，传入子组件
*/
<template>
    <button class="button-box" @click="change3_3" >场景一</button>
    <button class="button-box" @click="change3_4" >场景二</button>
    <button class="button-box" @click="change3_2" >场景三</button>
    <button class="button-box" @click="change2_4" >场景四</button>
    <div class="main-box">
        <MyDyGridCom ref="MyDyGridCom" :gridDate="gridDate"></MyDyGridCom>
    </div>

</template>
<script>

    import MyDyGridCom from '@/components/MyDyGridCom.vue';

    export default {
        name: 'MyGridView',
        components: {
            MyDyGridCom,
        },

        data() {
            return {
                gridDate: {
                    /*实际应用中，这些数据可以来自后台接口，从而达到项目级别的动态效果*/
                    /*行列*/
                    row: 3,
                    column: 4,
                    /*数据下标，数据内容*/
                    divDateList: [
                        {index: 1, date: 1},
                        {index: 2, date: 2},
                        {index: 3, date: 3},
                        {index: 4, date: 4},
                        {index: 5, date: 5},
                        {index: 6, date: 6},
                        {index: 7, date: 7},
                        {index: 8, date: 8},
                        {index: 9, date: 9}
                    ]
                }
            };
        },

        methods: {
            change3_3() {
                this.showmode = true;
                this.gridDate.column = 3;
                this.gridDate.divDateList = [
                    {index: 1, date: 1},
                    {index: 2, date: 2},
                    {index: 3, date: 3},
                    {index: 4, date: 4},
                    {index: 5, date: 5},
                    {index: 6, date: 6},
                    {index: 7, date: 7},
                    {index: 8, date: 8},
                    {index: 9, date: 9}
                ]
            },
            change3_4() {
                this.gridDate.column = 4;
                this.gridDate.divDateList = [
                    {index: 1, date: 1},
                    {index: 2, date: 2},
                    {index: 3, date: 3},
                    {index: 4, date: 4},
                    {index: 5, date: 5},
                    {index: 6, date: 6},
                    {index: 7, date: 7},
                    {index: 8, date: 8},
                    {index: 9, date: 9},
                    {index: 10, date: 10},
                    {index: 11, date: 11},
                    {index: 12, date: 12}
                ]
            },
            change3_2() {
                this.gridDate.column = 3;
                this.gridDate.divDateList = [
                    {index: 1, date: 1},
                    {index: 2, date: 0},
                    {index: 3, date: 3},
                    {index: 4, date: 4},
                    {index: 5, date: 0},
                    {index: 6, date: 6},
                    {index: 7, date: 7},
                    {index: 8, date: 0},
                    {index: 9, date: 9}
                ]
            },
            change2_4() {
                this.gridDate.column = 4;
                this.gridDate.divDateList = [
                    {index: 1, date: 1},
                    {index: 2, date: 2},
                    {index: 3, date: 3},
                    {index: 4, date: 4},
                    {index: 5, date: 0},
                    {index: 6, date: 0},
                    {index: 7, date: 0},
                    {index: 8, date: 0},
                    {index: 9, date: 9},
                    {index: 10, date: 10},
                    {index: 11, date: 11},
                    {index: 12, date: 12}
                ]
            },
        },


    }

</script>
<style>
    .main-box {
        /*使内部div居中*/
        display: flex;
        align-items: center;
        justify-content: center;
        /*背景颜色*/
        background-color: cornsilk;
        width: 100vw;
        height: 80vh;
    }
    .button-box {
        margin-bottom: 2vh;
        width: 6vw;
        margin-right: 5px;
        color: red;

    }

    .active{
        color: red;
    }
</style>

MyDyGridCom.vue


/**
 * 动态布局组件，布局定义与判断使用的具体布局
 * 通过数据的行列决定用哪个布局
 */
<template>
    <div class="main-box">

        <!--3行3列-->
        <div v-if="this.gridDate.row==3 && this.gridDate.column==3" class="box3-3">
            <div v-for="(item,index) in this.gridDate.divDateList" :key="index">
                <MyDyGridItemCom :item="item"></MyDyGridItemCom>
            </div>
        </div>

        <!--3行4列-->
        <div v-if="this.gridDate.row==3 && this.gridDate.column==4" class="box3-4">
            <div v-for="(item,index) in this.gridDate.divDateList" :key="index">
                <MyDyGridItemCom :item="item"></MyDyGridItemCom>
            </div>
        </div>

    </div>

</template>
<script>

    import MyDyGridItemCom from './MyDyGridItemCom';

    export default {
        props: {
            // 数据，包含显示，行列参数
            gridDate:{}
        },

        components: {
            MyDyGridItemCom,
        },

    }

</script>
<style>

    .box3-4 {
        /*vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100*/
        /*vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100*/
        width: 80vw;
        height: 100%;
        display: grid; /* 开启grid布局*/
        grid-template-columns: repeat(4, 25%); /*设置4列，每一列占总宽度的25% */
        grid-template-rows: repeat(3, 30%); /*设置3行， 每一行占总宽度的30% */
        grid-column-gap: 2vh; /*列间距*/
        grid-row-gap: 2vh; /*行间距*/
    }

    .box3-3 {
        /*vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100*/
        /*vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100*/
        width: 80vw;
        height: 100%;
        display: grid; /* 开启grid布局*/
        grid-template-columns: repeat(3, 33%); /*设置4列，每一列占总宽度的25% */
        grid-template-rows: repeat(3, 30%); /*设置3行， 每一行占总宽度的30% */
        grid-column-gap: 2vh; /*列间距*/
        grid-row-gap: 2vh; /*行间距*/
    }

    .main-box {
        /*使内部div居中*/
        display: flex;
        align-items: center;
        justify-content: center;
        /*背景颜色*/
        background-color: cornsilk;
        width: 100vw;
        height: 80vh;
    }

</style>

MyDyGridItemCom.vue


/**
* 数据块显示组件
* 通过判断数据的显示标志，选择需要显示或者隐藏
*/
<template>
    <div v-if="item.date!=0" class="box-div">{{item.date}}</div>
    <!--数据为0，隐藏显示-->
    <div v-else class="null-div"></div>
</template>
<script>
    export default {
        props: {
            // 数据
            item: {},
        },
    }
</script>
<style>

    .box-div {
        height: 100%;
        background-color: #34ce57;
        display: flex;
        /*实现水平居中*/
        align-items: center;
        /*实现垂直居中*/
        justify-content: center;
        /*文字大小颜色*/
        font-size: 10vh;
        color: orange;
    }

    .null-div {
        /*隐藏*/
        visibility: hidden
    }
</style>

说明：

在整个动态布局中，动态因子就是数据gridDate，里面包含行列参数用于决定显示的行列数，数据部分决定数据块显示与否。这个数据来自后端服务，那样就可以有专门的管理页面进行配置，站在前端的角度，就是动态显示。

这是一个思路，如果需要更多动态参与的部分。比如块大小，颜色，甚至是整体样式都可以按照这个思路去设计。总之，一句话，抽取动态因子，让动态因子可配置，我们就能实现动态化。

–

–

–

完毕

vue专题开篇：vue专题之开发环境与项目搭建【一】

cy谭
关注
  • 6
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue根据数据动态展示页面
06-19
vue根据数据动态展示页面，动态组件，动态表格，动态弹窗等，仅供静态数据进行页面展示。vue根据数据动态展示页面，动态组件，动态表格，动态弹窗等，仅供静态数据进行页面展示。vue根据数据动态展示页面，动态组件，动态表格，动态弹窗等，仅供静态数据进行页面展示。
Vue拖拽组件列表实现动态页面配置功能
12-29
需求描述 最近在做一个后台系统，有一个功能产品需求是页面分为左右两部分，通过右边的组件列表来动态配置左边的页面视图，并且左边由组件拼装起来的视图，可以实现上下拖拽改变顺序，也可以删除。 根据这个需求我做了下面这个demo。 功能分解 右边的组件列表，可以通过拖拽克隆到左边，拖拽结束后右边组件列表数量不会减少 左边的组件可以展开或收起 左边的组件可以上下拖拽，删除，但不可向右边拖拽 左边组件拖拽过程中不改变其展开和收起状态 demo截图 代码地址 vue-draggable-list 代码预览 <div cla
VUE 移动端适配（viewport）
最新发布
zy991315的博客
03-05 462
VUE 移动端适配（viewport）
draggable + grid 拖拽插件 + 网格布局 动态生成首页模版
SM_Cute的博客
03-20 3021
draggable + grid 拖拽插件 + 网格布局 动态生成首页模版
iOS开发之UI处理-动态布局
keezhong的专栏
03-04 3769
不管是做iOS还是Android的开发，我想UI这块都是个大麻烦，任何客户端编程都是如此，我们要做的就是尽量减少我们工作的复杂度，这样才能更轻松的工作。     在iOS开发中Xcode虽然自带了强大的IB(Interface Builder)用来开发UI，但这只是静态的，遇到复杂的界面还是需要用代码来动态的布局。 　　1. 例如常常会有动态内容高度和宽度的计算。 　　2. 几个视图的排
Vue项目实现自适应的左右布局和上下布局
m0_74069684的博客
06-07 4724
能看懂的小伙伴直接拿走代码，稍有疑惑的伙伴请听我解释一下，我们这里是通过行标签将需要上下布局的盒子包裹起来，然后通过列标签把列的空间分成24等份，在继续通过使用两个的方式实现上下布局。能看懂代码的小伙伴直接使用代码，稍微有些疑惑的小伙伴就来听我解释一下吧，我首先需要设置一个父盒子来包裹两个子盒子，在父盒子中设置flex布局，使用flex布局就能实现左右布局。
vue——布局（flex、gride）
wy313622821的博客
09-03 1万+
前端布局发展史： 初代table布局 CSS+div布局 Flex布局（移动端较友好） grid布局（2020年） Flex布局： 实例1用flex布局制作导航栏 flex:1表示下面的综合： flex-grow : 1; // 这意味着div将以与窗口大小相同的比例增长 flex-shrink : 1; // 这意味着div将以与窗口大小相同的比例缩小 flex-basis : 0; // 这意味着div没有这样的起始值，并且将根据可用的屏幕大小占用屏幕。例如： -.
弹性布局详解——5个div让你学会弹性布局
weixin_30767921的博客
12-24 477
转自：https://www.cnblogs.com/jerehedu/p/7358329.html 1 弹性布局简介 弹性布局，又称“Flex布局”，是由W3C老大哥于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。 >>>了解两个基本概念，接下来会频繁提到：...
VUE-布局
孟孟的博客
05-19 1582
Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突
vue 一个div中三个子div水平布局,一个子div屏幕中间,其他两个子div 依次靠右
tenc1239的博客
07-10 1633
一个div 宽度100% 高度10%,其中包含三个子div横向排列, 第一个子div,背景色蓝色,宽度10%,位置是显示屏水平居中,其他两个子div,宽度都是10%,一个背景色黑色,一个背景色灰色 依次水平方向靠右,并且最右边的子div,距离右边距20px,
vue自适应布局（各种浏览器，分辨率）
热门推荐
weixin_42974827的博客
09-04 2万+
主要使用了flex布局的flex:1属性和自适应的css+vh+百分比这种方式，开局设置overflow:hidden，主体main部分要设置：overflow:auto，这种方式可以自动使得菜单的滚动条和内容的滚动条在一个区域内滚动，后续我会把完整代码放在个人主页KinHKin的博客_CSDN博客-vue,中秋活动,性能优化领域博主的资源里面，供大家免费下载，希望大家能够喜欢💗💗💗。
vue实现简单瀑布流布局
10-15
主要为大家详细介绍了vue实现简单瀑布流布局，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 实现动态路由的方法
11-19
很多时候我们在项目的路由都是在前端配置好的 但是有的时候为了进行全面的权限控制，会需要后台给出路由表，前端再渲染。不用在前端配置。 下面主要讲一下思路 1、和后台小哥哥沟通好数据，把我们前端配置的路由表...
关于页面动态布局实现方案（一）
影魔的专栏
08-18 1713
 1.关于Web页面动态布局的简单声明 （1）此处介绍的动态布局类似于QQ空间或者Google首页的自定义页面 （2）每个用户可以定制自己的页面，可以自由选择布局方式，自由选择模块   2.关于布局和模块的声明 （1）布局是服务端定制的，比如左分栏布局、右分栏布局、通栏布局等 （2）模块也是服务端定制的，用户只能从这些模块中选择，比如QQ空间里面的日志模块、视频模块等 （3）布局...
vue自适应屏幕大小布局，适应性宽高
m0_63524137的博客
06-29 3189
红色的部分就是你需要加上去的内容这样这个div就已经可以自动获取你的屏幕大小并自己去适应宽高了，但是如果你想在内部div里再次嵌套一个div，仍然也想让他自适应宽高，有意思的就来了。这样就基本上把我们需要的配置好了，现在我们去template里去使用它。设置一个div不论换到什么样比例的屏幕上都能合理舒服的显示。这个的意思是这个框占总高度的80%的20%，就实现了，首先在布局的最外层我们用到:style。其他的欢迎大家评论补充。
58同城首页腰部动态化技术选型(布局动态化)
u014294681的博客
12-08 1530
58同城首页腰部动态化技术选型(布局动态化)，包含对 RN、H5、小程序、插件化、布局动态化的详细分析
vue div底部
qq_28487195的博客
07-07 1123
我们可以将页面的容器设置为flex并且指定flex-direction属性为column，然后将div的margin-top属性设置为auto，这样div就会自动向上推到页面底部。在很多情况下，我们希望把某个元素放在div的底部，这时候我们可以采用以下几种方法。我们可以将div的position属性设置为absolute，然后指定bottom为0，这样div就会固定在页面底部。第三种方法是使用CSS的calc属性。我们可以将div的高度设置为100vh并且减去自身的高度，这样div就会自动跟随页面底部。
vue 页面分成左右两部分
Liber_Y的博客
05-07 1万+
<template> <div class="left-bar"> </div> <div class="right-bar"> </div> </template> <style lang='postcss'> .left-bar { float: left; width: 20%; height: 100%; position: absolute; overflow: auto; .
分享下如何在Vue项目中进行网页布局
前端达人
10-06 1458
布局是减少代码重复并创建易于维护和专业外观的应用程序的重要模式。如果您正在使用Nuxt，它提供了一个优雅的解决方案。但不幸的是，在Vue中，官方文档根本没有提到它们。这经常导致对于应该在多个应用程序中相似的问题而言，采用次优和不太正规的解决方案。经过多次尝试，我总结出了一种既有效又无需烦恼地扩展的布局方式。让我用一个小的示例演示一下。要求首先，让我们确定一些我们的布局结构需要满足的规则：每个页面都...
基于vue的网络拓扑图动态线条实现
07-16
基于Vue的网络拓扑图动态线条实现，可以通过使用Vue.js的特性和相关库来实现动态线条的效果。 首先，可以使用Vue.js的组件化开发思想，将网络拓扑图拆分为多个子组件，例如节点组件、线条组件等。每个子组件可以有...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cy谭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值