layui实际项目使用过程中遇到的兼容性问题及解决

目录
  • layui项目使用过程中遇到的兼容性问题
    • layui实践兼容
    • layui在vue项目中不能自动渲染的问题
    • layui中获取layui路径方法不兼容IE11的问题
    • 解决方法
  • 在IE8下使用layui遇到的坑
    • 栅格系统不支持
    • 上传preview方法不支持
    • 上传弹出下载框
  • 总结

layui项目使用过程中遇到的兼容性问题

layui实践兼容

记录自己在layui的实际使用过程中遇到的一些兼容性问题，烂笔头>>>大脑

layui在vue项目中不能自动渲染的问题

下载layui源码到本地，在vue的项目中引用，会出现layui的组件渲染失败，只有手动调用render函数才能渲染成功的问题。

原因是，layui的自动渲染和vue的自动渲染有冲突，只需要将layui中的form.js和element.js的自动渲染关闭就可以了，我这里是直接将layui中的自动渲染给屏蔽掉了。

layui中获取layui路径方法不兼容IE11的问题

控制台打印报错：

Layui hint: css/modules/laydate/default/laydate.css?v=5.0.9 timeout

layui的弹出层组件、时间组件、穿梭组件等都不能正常使用。

原因是，layui中的获取layui文件路径的方法不兼容IE11。导致在IE11下，项目找不到该组件，所以组件当然就不能正常使用了。

解决方法

将上面红框内的代码用下面代码替换：

//获取layui所在目录
  ,getPath = function(){
    var jsPath = doc.currentScript ? doc.currentScript.src : function(){
      var head = document.head || document.getElementsByTagName('head')[0];
      var js = head.children
          , last = js.length - 1
          , src;
      for (var i = last; i > 0; i--) {
          if (js[i].readyState === 'interactive') {
              src = js[i].src;
              break;
          }
      }
      return src || js[last].src;
    }();
    return jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
  }()

替换完成之后，就可以重新打包，新打好的包放到项目里面就可以了。

在IE8下使用layui遇到的坑

栅格系统不支持

<!--copy cdn上的js下来，改路径，将下面代码加入当前页面body-->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

上传preview方法不支持

    var files = obj.pushFile();
//预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                /*
                obj.preview(function(index, file, result){
                    var fileName=file.name;
                    
                });
                */
<!--获得filename方法修改-->
   
                var inputFile = document.getElementsByName("uploadVideo");
                var fileValue=inputFile[0].value;
                var pos=fileValue.lastIndexOf("\\");
                var fileName=fileValue.substring(pos+1);

上传弹出下载框

//服务端添加
response.setHeader("Content-Type", "text/html");

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue实现Layui的集成方法步骤

    前言 在写公司项目时,遇到了集成layim实现在线客服的一个需求,经过我的一番折腾后,终于将layui集成了进来,接下来就跟大家分享下我的解决方案,欢迎各位感兴趣的开发者阅读本文:grin: 获取layim layui官方提供了npm的安装方法,我司使用的是layui正版授权的layim,今天在折腾时发现,从npm仓库获取layui,里面自带了layim,大家可以去白嫖一波,不过大家需要注意版权问题(如下图所示,layui官网进行了声明). 商用项目的话还是建议大家获取正版授权,毕竟作者也不容易

  • 解决layui上传文件提示上传异常,实际文件已经上传成功的问题

    layui上传文件提示上传异常,实际文件已经上传成功 原因:上传回调的方法接收的参数应该是json格式的,之前返回的是String,所以一直走异常的方法 @ResponseBody @RequestMapping("/web/upload") public JSONObject uploadSourceData(@RequestParam(value="file") MultipartFile file ){ String filePath = "&quo

  • 详解如何在vue项目中使用layui框架及采坑

    根据官网的文档,要在一个html文件下使用layui里面的组件库其实很简单,但是在vue项目中使用该ui库却存在着很多坑,下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui 1.第一个坑:vue项目中使用npm安装引入时报错(目前并没有找到引入的合适的方式,知道的可以留言探讨) 在官网中我们可以看到他提到支持npm安装,但是当我们安装成功后,在main.js中引入时却报并不能找到该模块的错. 所以,我们先下载文件包,然后在html文件中用link和script标签的方式引入 2

  • layui实际项目使用过程中遇到的兼容性问题及解决

    目录 layui项目使用过程中遇到的兼容性问题 layui实践兼容 layui在vue项目中不能自动渲染的问题 layui中获取layui路径方法不兼容IE11的问题 解决方法 在IE8下使用layui遇到的坑 栅格系统不支持 上传preview方法不支持 上传弹出下载框 总结 layui项目使用过程中遇到的兼容性问题 layui实践兼容 记录自己在layui的实际使用过程中遇到的一些兼容性问题,烂笔头>>>大脑 layui在vue项目中不能自动渲染的问题 下载layui源码到本地,在v

  • VisualStudio Community2019在安装的过程中无法进入安装界面的解决方法

    今天在安装VS2019的时候,在安装的过程中一直无法进入安装界面,在网上找了各种方法试了将近40分钟都没有找到有效的办法,不过就快放弃的时候,问题解决了,哈哈哈!!!! 1.下载地址:https://visualstudio.microsoft.com/zh-hans/thank-you-downloading-visual-studio/?sku=Community&rel=16(官网) 2.运行之后,读完进度条之后,就退出了,无法进入到安装界面.类似下面的截图,截图是网上找的,懒得自己在重新

  • MySQL MGR搭建过程中常遇见的问题及解决办法

    MGR搭建过程中遇到的一些故障 实际中我一共部署了三套MGR环境,分别是单机多实例的MGR环境,多机同网段的MGR环境,多机不同网段的MGR环境,部署的过程大同小异,但是还是有一些有出入的地方,这里把部署过程遇到的故障列举出来,供大家参考,如果能有幸解决您在部署时候的问题,那是极好的. 01 常见故障1 [ERROR] Plugin group_replication reported: 'This member has more executed transactions than those

  • 使用vue-cli打包过程中的步骤以及问题的解决

    1.打包命令是npm run build,这个命令实际上是在package.json中,scripts中build所对应的命令: 2.创建一个prod.server.js,这个文件不是必须的,这个文件的用处是在打包完毕之后,通过启动node.js本地服务来访问打包完成的静态文件,不需要的同学可以忽略这一点, prod.server.js文件代码示例: let express = require('express'); let config = require('./config/index');

  • Python中遍历字典过程中更改元素导致异常的解决方法

    先来回顾一下Python中遍历字典的一些基本方法: 脚本: #!/usr/bin/python dict={"a":"apple","b":"banana","o":"orange"} print "##########dict######################" for i in dict: print "dict[%s]=" % i,

  • JS中批量给元素绑定事件过程中的相关问题使用闭包解决

    在JS中,你写一个for循环的时候,内部的循环变量I其实是会保存在它运行的函数或类内的,所以你会发现你给元素批量绑定事件的时候,出现i=最后一个循环变量的值,这就很坑爹啊,解决的方案有2钟, 思路就是:把这个循环变量保存起来,不要让它的作用域在整个函数,而是在循环体内 1.使用闭包(如果你不懂闭包,请打开百度:www.baidu.com) 2.使用with关键字,with语法是with( obj ) { //使得可以在此直接访问obj的属性,而不用加obj.XXX } 代码示例: 复制代码 代码

  • 浅谈springfox-swagger原理解析与使用过程中遇到的坑

    swagger简介 swagger确实是个好东西,可以跟据业务代码自动生成相关的api接口文档,尤其用于restful风格中的项目,开发人员几乎可以不用专门去维护rest api,这个框架可以自动为你的业务代码生成restfut风格的api,而且还提供相应的测试界面,自动显示json格式的响应.大大方便了后台开发人员与前端的沟通与联调成本. springfox-swagger简介 签于swagger的强大功能,java开源界大牛spring框架迅速跟上,它充分利用自已的优势,把swagger集成

  • webpack 1.x升级过程中的踩坑总结大全

    webpack 1.x升级过程中的踩坑总结大全

    前言 大家应该都知道,Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.因为最近在对博客做SSR,无奈vue ssr demo或例子都是基于webpack2的.博主在webpack1.x上折腾了许久,vue-ssr-server-bundle.json文件生成仍然还是遥遥无期.最后还是乖乖地开始了webpack升级之旅. 本文主要记录升级过程中遇到的一些坑和解决办法,可能有些遗漏了,能记多少记多少吧.话不多说了,来一

  • Spring Boot中自动化配置的利弊以及解决方法

    本文主要给大家介绍了关于Spring Boot自动化配置的利弊及解决方法的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: Spring Boot中的双刃剑:自动化配置 在之前的文章中,我们通过各种功能性示例体验了Spring Boot的自动化配置给我们所带来的超便利的新开发方式.但是,在一些情况下Spring Boot的自动化配置也会给我们惹来不少的麻烦,比如这些场景: 项目依赖复杂的情况下,由于依赖方的依赖组织不够严格,可能引入了一些实际我们不需要的依赖,从而导致我们

  • redis中热key问题该如何解决

    redis中热key问题该如何解决

    引言 讲了几天的数据库系列的文章,大家一定看烦了,其实还没讲完...(以下省略一万字). 今天我们换换口味,来写redis方面的内容,谈谈热key问题如何解决. 其实热key问题说来也很简单,就是瞬间有几十万的请求去访问redis上某个固定的key,从而压垮缓存服务的情情况. 其实生活中也是有不少这样的例子.比如XX明星结婚.那么关于XX明星的Key就会瞬间增大,就会出现热数据问题. ps: hot key和big key问题,大家一定要有所了解. 本文预计分为如下几个部分 热key问题 如何发

随机推荐