layui實際項目使用過程中遇到的兼容性問題及解決

Posted on by

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");

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：