Layui前端框架使用问题

标签： Layui 分类： Javascript 创建时间：2019-08-07 05:57:03 更新时间：2025-01-17 10:39:22

在搭建自己的博客时，选来选去，选择了Layui这个框架，组件也还是够用的。为什么使用？轻量、丰富、模块化，主要的原因是Star比较多。在使用的时候，也并不是一帆风顺的，最终的修改，还是要和自己的项目挂钩的。下面列举几个我在使用过程中出现的奇怪的问题，可能不是框架本身的问题，而是我的打开方式不对。

1.使用gulp-uglify压缩js代码后，laypage组件无法运行

在hexo生成页面的过程中，文章数比较多，难免会要分页，分页就要使用laypage，这里我引入的版本是：layui-v2.4.5，使用方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
layui.use('laypage', function(){
  var laypage = layui.laypage;

  let pagination_wrap=document.querySelector(".pagination_wrap");
  let pagination=pagination_wrap.dataset;
  let currpate=pagination.current;
  let totalpage=pagination.totalpage;
  let size=pagination.perpage;
  let total=totalpage*size;

  //执行一个laypage实例
  laypage.render({
      elem: 'pagina' 
      ,count:total 
      ,limit:size
      ,curr:currpate
      ,jump: function(obj, first){
          //首次不执行
          if(!first){
              let href=location.href;
              let patt = /page\/\d+/i;
              repStr="page/"+obj.curr;
              if(patt.test(href)){
                  if(obj.curr<=1){
                      href=href.replace(/page\/\d+\//i,"");
                  }else{
                      href=href.replace(/page\/\d+/i,repStr)
                  }
                  
              }else{
                  href+=repStr;
              }
              window.open(href,"_self");
          }
      }
  });
});

以上就是全部的分页代码了，去掉跳转的函数，去掉其他的不确定因素（其实因为hexo生成的是静态站，所以没有后台，分页信息只是我通过为div绑定数据的方式，实现了分页信息的固定化）。

1
2
3
4
5
6
7
{% if page.total>1%}
  <div class="pagination_wrap" data-totalpage="{{page.total}}" data-current="{{page.current}}" data-perpage="{{per_page}}">
    {% if page.prev or page.next %}
      <div class="pagination" id="pagina"></div>
    {% endif %}
  </div>
{% endif %}

这些都不是重点，重点是我在本地开发时是一切正常的，但是当我部署到github上时出现了问题，问题出现主要原因，是因为我在部署之前，使用了gulp中gulp-uglify插件对public中的js进行了压缩和混淆，代码也很简单。

1
2
3
4
5
6
7
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(babel({presets: ['env']}))
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});

如果我去掉这一步，直接部署，那么是没有问题的，但是如果我加上这一步，问题就出现了，laypage无法初始化，出现了“Maximum call stack size exceeded”

正常的分页是这个样子的：

这就比较让人摸不着头脑了。

(2019年8月9日 更新)
经过我苦心钻研和探索，我终于找到了出现问题的原因，主要是因为我在使用部署时对js代码进行了压缩处理，使用uglify。但是我没能显示的忽略掉layui这个库，导致了layui.js被再次压缩，因此出现了错误。解决方式就是在执行minify-js的时候，将外部引入的js库文件排除在外,这样就不会出现问题了。

1
2
3
4
5
6
7
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
    return gulp.src(['./public/**/*.js','!public/lib/**'])
        .pipe(babel({presets: ['env']}))
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});

欢迎大家访问我的个人网站：bibichuan.github.io 。（我知道没人看，哈哈，我就当有很多人看不行吗？）

2.layer.msg的图标问题

layer.msg(“我是信息框”,{icon:1}),这里的icon总共有其中。

参考文章：
1.layer的Icon样式以及一些常用的layer窗口使用

3.layer宽度无法自适应的问题

当使用layer的时候，有时候宽度无法自适应，于是要定义参数：area:[‘auto’,’auto’]

参考文章：
1.layer宽度无法自适应area:’auto’
2.layer.open如何让高度自适应？ (这篇文章没啥用)

4.layer最大化后，高度无法自适应

在我使用的layui版本v2.5.6,调用窗口的最大最小化的按钮之后，内容的高度无法进行自适应(重新计算)，于是我想到了临时的解决方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var dialog_height="";
layer.open({
    type: 1, 
    title:sectionName,
    // area:['1000px'],
    area:['auto','auto'],
    maxmin:true,
    skin:"analysis_dialog_layer",
    content: '',
    success: function(layero, index){ // 窗口创建完成
        // 获取宽高
        dialog_height=$(layero).find(".layui-layer-content").css("height");
    },
    full: function(layero){ // 重新设置高度
        $(layero).find(".layui-layer-content").css("height","auto");
    },
    restore:function(layero){ // 返回
        $(layero).find(".layui-layer-content").css("height",dialog_height);
    }
});
参考文章：
1.layer 最大化之后，框架高度问题。
2.弹层组件文档 - layui.layer

4.弹出层下拉问题

(1) 在一个弹出层中，使用下拉框，第一个次渲染的时候，会出现一个延迟情况。

(2) 关闭弹出层，再次打开弹出层，出现了下拉框无法渲染的问题。

正常的是这样的，这是个bug啊。

解决方法：
(1) 第一就是不能在异步执行之后才进行layui.use(“form”)加载。
(2) 第二个就是在弹出层弹出之后，进行form的重新渲染

1
2
3
4
5
6
7
8
9
10
11
12
layer.open({
    success: function(layero, index){ 
        // 渲染下拉菜单
        var form=layui.form;
        form.render('select');

        // 获取选中的文本
        form.on('select', function(data){
            console.log(data.elem[data.elem.selectedIndex].text);
        });
    }
})
参考文章：
1.layui弹出框打开第二次select内容无法显示问题
2.laui弹出层不能正常显示下拉框
3.动态加载的下拉框，会出翔加载太慢的问题
**本文已结束，感谢您的观看**
鼓励一下

往期推荐

文章目录
  1. 1. 1.使用gulp-uglify压缩js代码后，laypage组件无法运行
  2. 2. 2.layer.msg的图标问题
  3. 3. 3.layer宽度无法自适应的问题
  4. 4. 4.layer最大化后，高度无法自适应
  5. 5. 4.弹出层下拉问题
小额赞助
本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件通知，方便公布您的善意！
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
捐赠者名单 合计：9.01 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

2021-04-07 链接地址
每日二省
为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

2021-04-07 链接地址
每日三省
== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

2021-04-07 链接地址
每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀，微笑是寂寞的悲伤。
2016 ——— 美文