15.Vue技术栈开发实战-响应式布局

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

如何引入iview，如何配置它的loader。如何全局引入和按需引入iview

2：使用layout布局组件，

3：使用iview的栅格组件。实现响应式的布局。根据网格的宽度来实现不同的布局。

这是一个对应写好的文档。github上文档在根目录中：https://github.com/lison16/vue-cource/blob/master/doc/vue-cli3%E4%B8%AD%E4%BD%BF%E7%94%A8iview.md

在vue cli 3.0中呢，iview的配置有一些改变，主要是在iviewLoader这的配置，因为在vuecli 3.0中是没有webpack的配置文件的。

首先是在main.js中全局引入。iview作为一个插件需要用Vue的use方法来注册安装。

第二个方法是按需引入：iview中有很多的组件，项目中你可能用不到。如果全局引入，编译后的提及会比较大。

用哪个你局把哪个全局引入。这样你打包后的文件就会小很多。

如果没有loader的话，这里按需引入是需要加i-的前缀的

配置iviewLoader会在编译的时候把switch、circle等替换成代码i-前缀的组件名。

添加了iview-loader就可以不先i-的前缀了。

layout的布局是本视频作者封装的。
http://v3.iviewui.com/components/layout

首先安装iview。iview的3.1.0版本是可以做为插件来安装的。

启动vue ui

选中进行安装

原来的安装方式：npm install iview

视频中使用的iview的版本是：3.2.1

由于iview的4.0版本后已经改名了，所以这里我们可以继续安装iview最后的版本是3.5.4

npm install iview --save

这次我安装的时间是2020年12月23日15:46:17


安装完成后，重启我们的项目

main.js内引入iview。这样就可以在任何一个vue文件内使用我们的iview组件了。

在views文件夹下，创建一个layout页面

直接让他在home页面显示


让它的高度和页面的高度是一样的在app.vue里面

要想默认打开地址：http://localhost:8080/#/ 能显示Layout页面，路由守卫的代码要注释掉，之前的课程我们加上了验证token是否登陆的逻辑。




随便写个layout


使用layout

实现左右，上下的布局。

最外层加个属性，height是100%

最外层div加个高度

这俩都是100%，给他俩合起来。注意他们之间用逗号分隔开了

这样左边是sider，右边呢，是一个上下布局（上面是header 下面是content）。

设置header的背景色为白色，加个阴影



sider的属性，是否可收起

http://v3.iviewui.com/components/layout#API

设置上就会显示是否可收起的按钮



但是一定给他绑定一个v-model的值来控制它的伸缩状态。默认我们是false 不收缩。

点击就收缩

也可以自己定义



被隐藏了

在header里面放一个icon来访收缩的按钮



header的padding有点大，我们给它设置一个


23合适就改为23

点击图标来控制菜单的收缩。

点击icon图标的时候去修改。collapsed的值为true或者是false

一个取反的操作。

给图标加状态，如果是收缩的，那么就旋转90度。绑定一个class属性，默认它是一个数组




给上面也绑定一个过渡效果


收缩的状态


{
 xs: '480px', 
 sm: '576px', 
 md: '768px', 
 lg: '992px', 
 xl: '1200px', 
 xxl: '1600px' 
}


小于576px的时候

当把浏览器缩小到768像素的时候，左侧菜单自动收缩起来了。注意768的话，breakpoint要设置成md

把sider放在右边，箭头就会在右边显示了。

让箭头在右边

这个属性，旋转箭头的方向

把sider再移动到左边

下面看栅格

栅格

把整行Row分为24列

gutter列之间的间距

col常用的就是span。跨几列

左侧跨几列

在Content里面，我们先用Card设置一个内容区域

加个阴影，同时给他一个css类名

给他一个最小高度，当它没有内容的时候有最小高度。

希望content有个10像素的内边距



这样就有了10像素的内边距了

那么就是屏幕的高度减去 顶部64 再减去 上下的内边距10 加起来就是84px

100vh: 相对于视窗的高度, 视窗被均分为100单位的vh; css3新发现height:100vh;

表示整个浏览器窗口高度减去84px的高度就是中间内容要展示的区域

内容区域刚刚好 上下留出了10像素，正好就是页面的高度。

然后给它一个router-view标签。我们把layout这个组件当做是父组件。

给layout使用嵌套路由

这样当我们输入home的时候。home页就会现在是Content区域了。

http://localhost:8080/#/home

下面在Home.vue内使用栅格布局。在vs-vode里面，如果你写这个Col标签会有问题。

Col标签没法自动补全，并且这里会报一个小错误。

这里可以使用i-col

里面有个i-vu-col

设置i-vu-col样式

再来一行，间距gutter是10，然后分成两列就是 24/2=12 

 <Row :gutter="10">
      <i-col span="12"></i-col>
      <i-col span="12"></i-col>
    </Row>




它是自动增加了padding-left和right的间距。这样 间距就是10

background-clip属性指定背景绘制区域：背景绘制在内容方框内（剪切成内容方框）。

间距也是粉色，现在只想在content显示背景色


三列

offset=1

想让第一个栅格往右偏一列。同时右边的栅格，都会往右偏移一个栅格的距离。


如果想让它右移，但是又不影响其他格push=1

第二列 往右偏移1列。

盖住了后面的列

做响应式布局 就是下面几个属性了

blue里面的列北京是蓝色

md的宽度的时候每一个占8列。就是页面均等分为3列

前面需要加冒号

屏幕区域大于992像素的时候，显示2列


小于992的时候，显示2列

小于768的时候。每行显示1列

这样就达到了根据屏幕不同的宽度显示不同的布局

本节代码


 

结束

以上是 15.Vue技术栈开发实战-响应式布局 的全部内容， 来源链接： utcz.com/z/380610.html

回到顶部