当前博客:[WebUI系列]9.layuimini框架升级及初步改造

196 次浏览

博客作者:【汨酴】

个性签名:增强知识,努力学习

1.新版本伴随着新的功能及优化,layuimini使用的是layui 2.6.3,目前layui官网最新版本为2.6.8,优化及新增了许多内容(详见官网),我们及时跟进

2.操作步骤

下载layui 2.6.8,解压到layuimini\lib下面

主页index.html重新引用新的版本

//css
<link rel="stylesheet" href="lib/layui-v2.6.8/css/layui.css" media="all">
//js
<script src="lib/layui-v2.6.8/layui.js" charset="utf-8"></script>

3.升级带来的问题及其自身问题

4.思考如何会产生图标异常?

layui官网的导航栏都正常,为何我们这里会出问题,最可能的两种原因是:

其一layui版本的遗留问题,其二layuimini作者修改了样式不兼容了

我们看主页引用了css/layuimini.css,查看css代码

 

的确从683-735修改了默认样式,把这段代码注释掉或者删除

//733-735原始代码
/**修复左侧菜单字体不对齐的问题*/
.layuimini-menu-left .layui-nav-item a .fa,.layuimini-menu-left .layui-nav-item a .layui-icon{
    width: 20px;
}

//需要修改为
.layuimini-menu-left .layui-nav-item a .fa{
    width: 20px;
}

好了,试试是不是正常了。

5.修复layuimini自身下面空白问题

那么我们要做的就是去掉这个padding-bottom

//index.html   
<style id="layuimini-bg-color">
       //添加以下代码
        .layui-body {
            padding-bottom: 0px !important
        }
    </style>

现在升级完成并且修复了各种问题

 

Generic placeholder image
手可摘星辰 Time: 2021-10-15 13:03:33

厉害了我的老哥


[WebUI系列]9.layuimini框架升级及初步改造