首页 > 其他 > 详细

iView 实战系列教程(21课时)_4.iView 实战教程之布局篇(二)

时间:2019-07-16 18:16:18      阅读:487      评论:0      收藏:0      [点我收藏+]

https://github.com/iview/iview

下载iview的代码

技术分享图片

技术分享图片

Layout布局大概的样子
技术分享图片
Iview的源代码。Layout
技术分享图片
技术分享图片
组件比较简单,,里面一个slot
技术分享图片
Sider是最复杂的组件
技术分享图片
这里用了v-model的语法糖是,是vue里面的
技术分享图片
上面的v-model实际就相当于下面的这段,通过事件改变了value的值
技术分享图片
了解了以上几个组件的大概的源码 ,下面看一下 常见的几种布局:
技术分享图片

实战-后台搭建

17分钟开始

创建一个空的项目,只安装vue-router和iview这两个插件

项目名称:iview-layout

重新安装iview的插件

技术分享图片

技术分享图片
点击卸载,重新安装
技术分享图片
重新安装
技术分享图片
技术分享图片
技术分享图片
技术分享图片

出现了plugins文件夹,里面包含iview.js才表示安装成功了iview
技术分享图片

页面效果实现

要实现的页面的效果:
技术分享图片

先把上面四个菜单的文件创建上

在views文件夹内创建四个文件。
技术分享图片
然后在router里面把这几个路由添加进去

技术分享图片
注意把home注释掉。要不然引用了 但是没有用 就会报错。

技术分享图片

这里就一个router-view
技术分享图片

一种实现思路把主题内容放到router-view内。顶部header和左侧slider都在外部 router-view的顶部
技术分享图片
另外一种:
在components自定义组件的形式:
中间用slot。
缺点:每个页面内都写一下自定义组件。
技术分享图片
本次我们来使用的是第二种方案:在components里面自定义组件,然后在每个页面里面去把它引入进来。

现在components内创建dev-article.vue文件。,里面目前是一个空的模板

技术分享图片
我们在main.js里面去注册这个组件。
这样我们就把这个组件全局注册到我们的项目里面。任何一个地方就可以直接饮用,而不是局部的去导入了

技术分享图片
测试一下我们的组件:
我们在组件内随便 一个hello。外层要用div去包裹
技术分享图片
我们子啊views/App.vue直接引入过来这个全局的组件。
技术分享图片
修改整一个地方,这里饮用的路径写错了。修改为dev-article
技术分享图片
默认地址是空的:

技术分享图片
我们在router内增加一个,当时默认路径的时候,重定向到app这个页面。
技术分享图片
这样我们默认就到重定向到app这个页面了
技术分享图片
那就说明我的流程就已经通了

剩下就是完善我们的组件 dev-article.vue

首页布局

Layout外层肯定是一个layout组件,所以我们先写一个layout作为它做外层的一个跟组件
技术分享图片
左边是sider,为了让它的布局更清晰一点。我们在里面再嵌套个layout
技术分享图片
基本的一个布局的效果
Header随着页面的滚动而悬停在顶部的。

背景色浅黑色的阴影,用rgba
Header的样式
技术分享图片
顶部的一个效果,但是没有背景颜色
技术分享图片
用grid布局对header进行三列的布局
包含在Row标签内。 因为IDE工具对于Col识别不是很友好,所以这里使用i-rol来代替
4+14+4=22 加上左边平移的一列和最后空出来的一列刚好是24列
技术分享图片

第一列是Log。在这里是个静态资源 ,我们直接导过来就可以了
技术分享图片
显示的太大了 我们需要额外的写一些样式,来调整尺寸
技术分享图片
Logo样式
技术分享图片
菜单布局
技术分享图片
技术分享图片
点击后面三个菜单 ,页面上都没有任何东西
技术分享图片

头像菜单下拉和通知


32分钟开始

里面三个元素是等分的,所以我们在右侧再嵌套一层栅格
三个等分就是span都是8
技术分享图片
把他这个头像的地址复制出来

技术分享图片
下拉菜单用的Dropdownmenu这个组件。
属性slot=list指定它为Dropdown的list下拉菜单
技术分享图片
设置用的组件Badge

技术分享图片

技术分享图片
设置和退出之间增加一个间隔线
Divided是一个bool值开启就可以了。
技术分享图片

技术分享图片

通知的下拉菜单效果

我们会用badage的组件
技术分享图片
技术分享图片
点击图标进行复制
技术分享图片
这样就直接把图标代码复制过来了。

技术分享图片
最终代码:size是设置尺寸。
:count是纬度的消息的数量

技术分享图片
当然你也可以通过变量的形式去绑定
技术分享图片
查看页面效果:
代码是数字图标:
技术分享图片

但是数字距离图标的距离有一些问题。
这个时候我们可以使用offset,接收一个数组,20表示距离顶部,4表示距离右侧
技术分享图片

技术分享图片
直接复制这部分的tab的代码。

技术分享图片
直接复制tabs的代码到vscode中进行修改
技术分享图片
增加一个居中的class属性
技术分享图片
最下面增加一个class的居中。

技术分享图片
设置tabs的name值为第一个tab的name值那么默认选中的是第一个tab
技术分享图片
技术分享图片
高度有一点小

设置一下高度为200就可以了。
技术分享图片

纠正错误col列写错了

技术分享图片
纠正后的样式:
技术分享图片

选择配色 抽屉

技术分享图片
抽屉在iview3.1.0版本中,新增加的
技术分享图片
官方demo的效果。

技术分享图片
在layput的最下方增加抽屉的标签。用v-model绑定一个变量。
技术分享图片
给icon图标增加点击事件。
技术分享图片

这样当点击color的icon图标聚会显示抽屉了
技术分享图片
技术分享图片
抽屉默认不显示 关闭的按钮
技术分享图片
这样就不带删除的按钮了。
技术分享图片

优化代码:

优化按钮下面的灰色的线条
技术分享图片
我们可以对css进行替换就可以了。F12查看这里的css样式
技术分享图片
这里是一个:after的伪类

这里是一个1像素的高的灰色的线的背景
技术分享图片
视频覆盖这个css属性为display:none就可以了。但是我本地的代码始终有问题。
技术分享图片
视频中的效果:
技术分享图片

继续开发左侧的sider组件

先给sider写css 的样式
技术分享图片
v-mode绑定的值
技术分享图片
编写sider的css样式
技术分享图片
Option1被挡住了。那么我们给menu增加css 的样式。

技术分享图片
点击收起的时候让options名字消失 光显示icon的图标
技术分享图片

使用css 来控制,这是最简单的方法

通过isCollapsied来判断。Clas属性cider-hide是否显示
技术分享图片
定位menuItem中的span标签进行隐藏
技术分享图片
按照层级关系去隐藏
技术分享图片
技术分享图片
技术分享图片
展开的效果
技术分享图片

面包屑组件

增加一个calss属性,并且动态设置另外一个class属性
技术分享图片
Left是左侧的sider的宽度
距离左侧240是sider的宽度
距离顶部是header高度
增加一个内间距padidng 为16px
然后增加一个动画的效果 all是对所有的元素 使用动画。
0.2s秒的延迟,效果是eas-in-out的效果
技术分享图片
技术分享图片
增加一个card的占位。然后加了style的css属性
Slot就是每个页面要定义的内容了。
技术分享图片
Slot承载我们每个页面核心内容的地方

技术分享图片

技术分享图片
51分钟面包屑组件

 

iView 实战系列教程(21课时)_4.iView 实战教程之布局篇(二)

原文:https://www.cnblogs.com/wangjunwei/p/11196256.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!