Vue中Layout内部布局el-row、el-col的实现
之前的布局容器是一个整体的框架，layout里面的布局其实就是el-row和el-col的组合。
基础布局
使用单一分栏创建基础的栅格布局。
通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。
这种最简单，外面有一层row，说明四个col都在一行里面，也就是四列都在一行里面。
局部布局 [el-row]
el-row是控制一行一行的，el-col是控制一列一列的。span其实它会将整个浏览器作为24个格栅。如果每个都是6那么就排满了
外面有一层，其实是一个row，外面有一层row，其实是一行，这四个col（也就是四列）都在一行里面。
每一列有个参数6，它会将整个浏览器的宽度作为24个格栅。如果大于24就排满了，就会另起一行。
一个格栅是24个格子，:span="6"其实就是控制格栅占用的几个格子。gutter="20" 每个col之间的间距，间距为x px像素。
<el-header style="flex:1">
<el-row>
<el-col :span="24" style="background-color: yellow;">123</el-col>
</el-row>
<el-row :gutter="35">
<el-col :span="6" style="background-color: red;">123</el-col>
<el-col :span="6" style="background-color: green;">123</el-col>
<el-col :span="6" style="background-color: blue;">123</el-col>
<el-col :span="6" style="background-color: burlywood;">123</el-col>
</el-row>
</el-header>如果超过24了，那么就另外启动一行来摆放。
<el-header style="flex:1">
<el-row>
<el-col :span="24" style="background-color: yellow;">123</el-col>
</el-row>
<el-row :gutter="15">
<el-col :span="6" ><div style="background-color: red;">123</div></el-col>
<el-col :span="16"><div style="background-color: green;">123</div></el-col>
<el-col :span="1"><div style="background-color: blue;">123</div></el-col>
<el-col :span="1"><div style="background-color: burlywood;">123</div></el-col>
</el-row>
</el-header>
offset是左侧的间隔格数
<el-header style="flex:1">
<el-row>
<el-col :span="24" style="background-color: yellow;">123</el-col>
</el-row>
<el-row :gutter="15">
<el-col :offset="1" :span="6" ><div style="background-color: red;">123</div></el-col>
<el-col :span="16"><div style="background-color: green;">123</div></el-col>
<el-col :span="1"><div style="background-color: blue;">123</div></el-col>
<el-col :span="1"><div style="background-color: burlywood;">123</div></el-col>
</el-row>
</el-header>
下面el-col里面放置图标按钮，这里一个方法是控制它的折叠的。这里没有使用button去实现，而是使用了div去实现，div里面放了一个图标去实现类似按钮的东西。不是纯使用按钮去实现的，这样也是可以的。
很灵活，想怎么组合就可以怎么组合。这里还需要使用css去将其处理一下
<el-col :span="1">
<div class="header-collapse" @click="onCollapse">
<el-icon><component :is="isCollapse ? 'expand':'fold'"/> </el-icon>
</div>
</el-col>
.is-collapse{
display: none;
}
methods:{
//控制折叠 true被折叠
onCollapse(){
//展开
if(this.isCollapse){
this.asideWidth = '220px'
this.isCollapse = false
}else{
//折叠
this.asideWidth = '64px'
this.isCollapse = true
}
}
}图标的大小也是front-size来调整的
到此这篇关于Vue中Layout 内部布局el-row、el-col的实现的文章就介绍到这了,更多相关Vue el-row和el-col内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
公司某项目需求在页面显示的组件是根据角色变化而变化的，怎么实现这个效果呢，下面小编给大家介绍下Vue3的setup在el-tab中动态加载组件的方法,需要的朋友可以参考下2022-11-11
vite打包出现 "default" is not exported by "
这篇文章主要给大家介绍了关于vite打包出现 "default" is not exported by "node_modules/...问题的解决办法,文中通过代码将解决的办法介绍的非常详细,对同样遇到这个问题的朋友具有一定的参考借鉴价值,需要的朋友可以参考下2024-06-06
vue实现动态绑定行内样式style的backgroundImage
这篇文章主要介绍了vue实现动态绑定行内样式style的backgroundImage方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了vue组件之间通信方式,结合实例形式总结分析了vue.js的8种组件通信方式与相关操作注意事项,需要的朋友可以参考下2019-02-02
本篇文章主要介绍了vue 计时器组件的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要为大家详细介绍了vue实现选项卡小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家详细介绍了vue封装tabs组件案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue Nprogress进度条功能实现,NProgress是页面跳转是出现在浏览器顶部的进度条，本文通过实例代码给大家讲解，需要的朋友可以参考下2021-07-07
本文详细介绍了如何在计算机上安装和配置Node.js,包括下载Node.js,验证安装成功,配置npm的全局模块目录和缓存目录,设置环境变量,配置npm镜像,安装Vue.js等步骤,通过这些指导,你可以在IDEA上成功创建和运行Vue项目2024-10-10
这篇文章主要介绍了基于 Vue 的 Electron 项目搭建过程，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
最新评论