EasyAdmin框架的Layui-v2.5.6升级到Layui-v2.7.6方法

首先说明的是本套框架是一个开源的基于ThinkPHP6.0和Layui的快速开发的后台管理系统
作者链接：
github：https://github.com/zhongshaofa/easyadmin
gitee： https://gitee.com/zhongshaofa/easyadmin
框架文档：http://easyadmin.99php.cn/

目前为止，该项目使用的仍是layui-v2.5.6,在某一些方面已经不能满足我们的需求，为此在查找相关的issues之后找到答案，下面是做笔记记录一下

解决方法来源

https://github.com/zhongshaofa/easyadmin/pull/148/commits/8eb300318fa924c5483f51c87405b66a9ee5fe7b

在目前这个项目里我们有五个文件需要修改

1. default.html

该文件位于 \app\admin\view\layout\default.html

<!-- <script src="__STATIC__/plugs/layui-v2.5.6/layui.all.js?v={$version}" charset="utf-8"></script> -->
    <script src="__STATIC__/plugs/layui/layui.js?v={$version}" charset="utf-8"></script>

这里我们需要修改的是layui-v2.7.6 JS的引入地址，并去掉旧的

2. public.css

该文件位于 \public\static\admin\css\public.css

/* @import url("../../plugs/layui-v2.5.6/css/layui.css"); */
@import url("../../plugs/layui/css/layui.css");

这里我们需要修改的是layui-v2.7.6 CSS的引入地址，并去掉旧的

3. layuimini.css

该文件位于 \public\static\plugs\lay-module\layuimini\layuimini.css

/**左侧菜单更多下拉样式*/
.layuimini-menu-left .layui-nav-more,.layuimini-menu-left-zoom .layui-nav-more {
    font-family: layui-icon !important;
    font-size: 12px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    width: auto;
    height: auto;
    /* line-height: normal; */
    border: none;
    /* display: inline-block; */
    /* margin-top: -6px !important; */
}
/* .layuimini-menu-left .layui-nav-child .layui-nav-more {
    margin-top: -6px !important;
}

.layuimini-menu-left .layui-nav .layui-nav-mored,.layuimini-menu-left .layui-nav-itemed>a .layui-nav-more{
    margin-top: -9px!important;
}

.layuimini-menu-left-zoom.layui-nav .layui-nav-mored,.layuimini-menu-left-zoom.layui-nav-itemed>a .layui-nav-more{
    margin-top: -9px!important;
} */

以上注释的代码就是我们不需要的，如果不注释的话，左侧下拉菜单会出现位置不平行的现象，为此我们需要注释掉这些代码

4. miniMenu.js

该文件位于 \public\static\plugs\lay-module\layuimini\miniMenu.js

/**
* 渲染一级菜单
*/
 compileMenu: function(menu,isSub){
     var menuHtml = '<li {{#if( d.menu){ }}  data-menu="{{d.menu}}" {{#}}} class="layui-nav-item menu-li {{d.childOpenClass}} {{d.className}}"  {{#if( d.id){ }}  id="{{d.id}}" {{#}}}> <a {{#if( d.href){ }} layuimini-href="{{d.href}}" {{#}}} {{#if( d.target){ }}  target="{{d.target}}" {{#}}} href="javascript:;">{{#if( d.icon){ }}  <i class="{{d.icon}}"></i> {{#}}} <span class="layui-left-nav">{{d.title}}</span></a>  {{# if(d.children){}} {{- d.children}} {{#}}} </li>' ;
     if(isSub){
         menuHtml = '<dd class="menu-dd {{d.childOpenClass}} {{ d.className }}"> <a href="javascript:;"  {{#if( d.menu){ }}  data-menu="{{d.menu}}" {{#}}} {{#if( d.id){ }}  id="{{d.id}}" {{#}}} {{#if(( !d.child || !d.child.length ) && d.href){ }} layuimini-href="{{d.href}}" {{#}}} {{#if( d.target){ }}  target="{{d.target}}" {{#}}}> {{#if( d.icon){ }}  <i class="{{d.icon}}"></i> {{#}}} <span class="layui-left-nav"> {{d.title}}</span></a> {{# if(d.children){}} {{- d.children}} {{#}}}</dd>'
     }
     return laytpl(menuHtml).render(menu);
 },
 compileMenuContainer :function(menu,isSub){
     var wrapperHtml = '<ul class="layui-nav layui-nav-tree layui-left-nav-tree {{d.className}}" id="{{d.id}}">{{- d.children}}</ul>' ;
     if(isSub){
         wrapperHtml = '<dl class="layui-nav-child ">{{- d.children}}</dl>' ;
     }
     if(!menu.children){
         return "";
     }
     return laytpl(wrapperHtml).render(menu);
 },

这一部分修改的是在模版引擎**{{d.children}}**里添加‘-’，这是由于layui-v2.6.11 开始调整的，而2.5.6的不支持，如果不修改的话左侧菜单栏将显示不了，具体可以参照下面链接

https://gitee.com/layui/layui/issues/I5AXSP

5. easy-admin.js

该文件位于 \public\static\plugs\easy-admin\easy-admin.js

		/**
		*前面代码
		*/
            //tool: function (data, option) {
            tool: function (data) {
                var option = this;
                option.operat = option.operat || ['edit', 'delete'];
                var elem = option.init.table_elem || init.table_elem;
                var html = '';
		/**
		*中间代码
		*/
            //list: function (data, option) {
            list: function (data) {
                var option = this;
                option.selectList = option.selectList || {};
                var field = option.field;
                try {
		/**
		*中间代码
		*/
            //image: function (data, option) {
            image: function (data) {
                var option = this;
                option.imageWidth = option.imageWidth || 200;
                option.imageHeight = option.imageHeight || 40;
                option.imageSplit = option.imageSplit || '|';
		/**
		*中间代码
		*/
            //url: function (data, option) {
            url: function (data) {
                var option = this;
                var field = option.field;
                try {
                    var value = eval("data." + field);
		/**
		*中间代码
		*/
                }
            //switch: function (data, option) {
            switch: function (data) {
                var option = this;
                var field = option.field;
                option.filter = option.filter || option.field || null;
                option.checked = option.checked || 1;
		/**
		*中间代码
		*/
            //price: function (data, option) {
            price: function (data) {
                var option = this;
                var field = option.field;
                try {
                    var value = eval("data." + field);
		/**
		*中间代码
		*/
            //percent: function (data, option) {
            percent: function (data) {
                var option = this;
                var field = option.field;
                try {
                    var value = eval("data." + field);
		/**
		*中间代码
		*/
            //icon: function (data, option) {
            icon: function (data) {
                var option = this;
                var field = option.field;
                try {
                    var value = eval("data." + field);
		/**
		*中间代码
		*/
            //text: function (data, option) {
            text: function (data) {
                var option = this;
                var field = option.field;
                try {
                    var value = eval("data." + field);
		/**
		*中间代码
		*/
            value: function (data, option) {
            value: function (data) {
                var option = this;
                var field = option.field;
                try {
                    var value = eval("data." + field);
		/**
		*中间代码
		*/
            //时间戳转日期
            //date: function (data, option) {
            date: function (data) {
                var option = this;
                var field = option.field, value = '';
                try {
                    value = eval("data." + field);
        /**
		*后面代码
		*/

该文件改动的就是把函数里面的option去掉，改为在里面获取，原因是新的layui不存在多个参数

以上就是关于easyAdmin升级layui所需要改动点的地方