Vue的一个容器大小怎么调_Vue 封装 Adminle3 左右上中下布局

为了响应式研究了一下 adminlte3，封装了一个 Adminlte Vue 组件库。名字叫 nly-adminlte-vue。

知乎不能写表格，我转成了图片，如果影响阅读，请移步Github或者文档查看

GitHub 地址：

nly-adminlte-vue​github.com

文档地址：

NlyAdminlteVue​nly-adminlte-vue.nejinn.com

在线 Demo 地址：

nly-adminlte-vue​nejinn.github.io

文档目前还只写完了 5 个组件文档。其他的都在每个组件下的 README.md 中。

nly-adminlte-vue 全是 jsx 封装的组件，大部分是函数式组件，渲染速度是要比.vue 组件快。
这个组件库没有引入 jq。注意没有引入 JQ。很多 Adminlte Vue 的组件库都是引入了 JQ，这样肯定是不行的，多少会有 bug，至于为什么不行，请理解 Vue 的精髓， 数据驱动 目前差不多快 50 个复用组件了。
adminlte3 的布局有一种 collapse 布局，也就是左边侧导航栏，右侧上中下布局，且边侧导航栏可以收起展开。
admintle3 控制布局的 class 主要在标签上。左右布局中，主要有 3 个 css 类来控制布局。这三个 css 类主要在左右布局中使用。

• 第一个是 layout-fixed，这个主要是控制右侧上中下布局在初始情况下有一个 margin-left: 250px 的属性,即偏移左侧 250px，腾出空间给左侧。且还有一个作用是让左侧导航栏滚动条与窗口滚动条不冲突。
• 第二个是 sidebar-mini，这个允许左侧导航栏在设置好的断点状态能收起到边侧只显示图标。如果没有这个，边侧导航栏收起会直接消失，不出现在窗口中。
• 第三个是 sidebar-collapse。实际上应该还有一个 sidebar-open。不过 sidebar-open 是在小屏情况下，展开左侧导航栏才会出现。sidebar-collapse 是用来控制左侧导航栏收起的 css 类。

组件

分解一下组件。

• 容器：容器是用来包裹左侧导航栏，右侧上中下布局的容器。常见的有 container。但是 adminlte 中是用 wrapper。给组件去一个名字叫 NlyWrapper
• 左侧导航栏容器：左侧导航栏容器是一个包裹左侧导航栏面板的容器。给组件取一个名字叫 NlyWrapperSidbar
• 右侧 header 容器：右侧布局上的容器，通常可以包裹 navbar 菜单等。给组件取一个名字叫 NlyWrapperHeader
• 右侧 main 容器：包裹页面正文内容的容器。给组件取一个名字叫 NlyWrapperContent
• 右侧 footer 容器：包裹右侧布局底部一些内容。给组件取一个名字叫 NlyWrapperFooter

这时候布局代码就应该是这样

<

NlyWrapper

这是一个容器组件， 这个组件主要用来包裹其他所有组件，且用来控制 body 的 css 类。
props 如下

import 

NlyWrapperSidebar

这是一个容器组件， 主要用来包裹左侧导航栏的
props 如下

import 

NlyWrapperHeader

这是一个容器组件， 主要用来包裹右侧 header 的。在这个组件中，有几个 prop 是在 prop nav=true 的时候生效，这是因为在 adminlte3 中，navbar 直接就做成了顶部容器。所有给了一个 nav props 让 header 容器可以变成 navbar
props 如下

import 

NlyWrapperContent

这是一个容器组件， 主要用来包裹右侧 main 的 的。
props 如下

参数 | 类型 | 默认值 | 描述

-|-|-|-

tag | String | div | 标签

import 

NlyWrapperFooter

这是一个容器组件， 主要用来包裹右侧 footer 的 的。
props 如下

参数 | 类型 | 默认值 | 描述 -|-|-|- size | String | | 文字大小

import 

注册

将以上组件注册，就可以在 vue 中直接使用了
注册代码 demo

import 

效果

代码。代码里使用了 height，是因为封装大的组件高度都是由子元素决定的。没有子元素就先用 height 撑起来看效果

<

一定要看完

组件封装中引入的文件，请移步Github查看。不然组件是跑不起来的。
还缺一个收起左侧导航栏的按钮，这个下一篇文章再讲