layui實際項目使用過程中遇到的兼容性問題及解決
更新時間：2023年04月23日 17:02:35 作者：沒有什么時間是比現(xiàn)在合適的
這篇文章主要介紹了layui實際項目使用過程中遇到的兼容性問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
layui項目使用過程中遇到的兼容性問題
layui實踐兼容
記錄自己在layui的實際使用過程中遇到的一些兼容性問題，爛筆頭>>>大腦
layui在vue項目中不能自動渲染的問題
下載layui源碼到本地，在vue的項目中引用，會出現(xiàn)layui的組件渲染失敗，只有手動調(diào)用render函數(shù)才能渲染成功的問題。
原因是，layui的自動渲染和vue的自動渲染有沖突，只需要將layui中的form.js和element.js的自動渲染關(guān)閉就可以了，我這里是直接將layui中的自動渲染給屏蔽掉了。
layui中獲取layui路徑方法不兼容IE11的問題
控制臺打印報錯：
Layui hint: css/modules/laydate/default/laydate.css?v=5.0.9 timeout
layui的彈出層組件、時間組件、穿梭組件等都不能正常使用。
原因是，layui中的獲取layui文件路徑的方法不兼容IE11。導(dǎo)致在IE11下，項目找不到該組件，所以組件當(dāng)然就不能正常使用了。
解決方法
將上面紅框內(nèi)的代碼用下面代碼替換：
//獲取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遇到的坑
柵格系統(tǒng)不支持
<!--copy cdn上的js下來，改路徑，將下面代碼加入當(dāng)前頁面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();
//預(yù)讀本地文件，如果是多文件，則會遍歷。(不支持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); 上傳彈出下載框
//服務(wù)端添加
response.setHeader("Content-Type", "text/html");總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue之使用vuex進(jìn)行狀態(tài)管理詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue+elementUI面包屑組件封裝方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue 全局封裝loading加載教程(全局監(jiān)聽)
這篇文章主要介紹了vue 全局封裝loading加載教程(全局監(jiān)聽)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
ElementUI實現(xiàn)在下拉列表里面進(jìn)行搜索功能詳解
有時候需要用到下拉列表全選和搜索,下面這篇文章主要給大家介紹了關(guān)于ElementUI實現(xiàn)在下拉列表里面進(jìn)行搜索功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue3.0中使用websocket,封裝到公共方法的實現(xiàn)
這篇文章主要介紹了vue3.0中使用websocket,封裝到公共方法的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue常用高階函數(shù)及綜合案例，文章內(nèi)容講解的很清晰，有對于這方面感興趣的同學(xué)可以研究下2021-02-02
今天小編就為大家分享一篇vue項目強制清除頁面緩存的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue?@click?@tap重疊事件區(qū)分方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
使用Vue3和Pinia實現(xiàn)網(wǎng)頁刷新功能
在現(xiàn)代 Web 開發(fā)中,保持用戶界面的動態(tài)性和響應(yīng)性至關(guān)重要,當(dāng)用戶觸發(fā)某些操作時,例如點擊按鈕或者完成表單提交,我們往往需要刷新頁面的一部分來展示最新的數(shù)據(jù),本文將介紹如何使用 Vue 3 和 Pinia 來實現(xiàn)這一功能,需要的朋友可以參考下2024-08-08
詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定
這篇文章主要介紹了詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定，非常具有實用價值，需要的朋友可以參考下2017-05-05