基于Vue+iView设计开发自适应管理后台UI

前言

这段时日在项目中有个需求,后台管理站点是需要PC端与移动端自适应,对于以往的惯例是直接在素材网找Bootstrap的后台管理模板,然后再进行嵌套开发,但是由于Bootstrap的后台管理模板一般都是基于jQuery的,需要异步加载数据这就要直接做大量的DOM操作,这一点对于我现在的开发模式是比较排斥的,由于我现在的管理后台全部都是Vue+iView的,所有就去看了看iView可能支持自适应不,果不其然,官方是给出了自适应栅格布局的方案,这让我内心一阵窃喜 :grin: (以前没太注意看这个布局底部还有这个东西~)

正文

首先我们看到在iView的栅格 Grid中预设六个响应尺寸,分别是:xssmmdlgxlxxl,由于我设计的后台管理的菜单在992px下菜单就展示不太友好,需要变换方式,所以一般只设置到lg这一层尺寸就可以了,然后在其主内容布局中也要用栅格自适应来进行开发,这样才能够保证移动端和PC端的样式兼容,不然容易产生页面错位。

特别需要值得注意的一点是,引入了iView之后,body的style样式会莫名其妙的出现一个overflow:hidden,这样会导致我们移动端无法进行滑动,所以我们只需要在样式表中添加如下样式即可:

大致的设计开发就是这样的,其实官方也是参考Bootstrap的,只要有一些自适应开发基础的小伙伴就可以完全快速上手,以下是我自己设计的一套后台管理模板,欢迎大家给我提供更多的建议!

PC端

基于Vue+iView设计开发自适应管理后台UI

移动端

基于Vue+iView设计开发自适应管理后台UI

项目地址

Github:https://github.com/Licoy/visamt

后记

非专业前端,还请大佬多指教指教,谢谢! :mrgreen:

    A+
所属分类:vue  前端技术

发表评论

请在下方填写评论信息

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

表情 粗体 斜体 图片 引用 链接 删除线 下划线 插代码 签到

目前评论:2   其中:访客  1   博主  1

  1. avatar 轩陌 2  来自天朝的朋友 谷歌浏览器 Mac OS X 10_14_6 上海市浦东新区 电信

    大佬很强悍 :wink: