layui實(shí)際項(xiàng)目使用過程中遇到的兼容性問題及解決
更新時(shí)間：2023年04月23日 17:02:35 作者：沒有什么時(shí)間是比現(xiàn)在合適的
這篇文章主要介紹了layui實(shí)際項(xiàng)目使用過程中遇到的兼容性問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
layui項(xiàng)目使用過程中遇到的兼容性問題
layui實(shí)踐兼容
記錄自己在layui的實(shí)際使用過程中遇到的一些兼容性問題，爛筆頭>>>大腦
layui在vue項(xiàng)目中不能自動(dòng)渲染的問題
下載layui源碼到本地，在vue的項(xiàng)目中引用，會(huì)出現(xiàn)layui的組件渲染失敗，只有手動(dòng)調(diào)用render函數(shù)才能渲染成功的問題。
原因是，layui的自動(dòng)渲染和vue的自動(dòng)渲染有沖突，只需要將layui中的form.js和element.js的自動(dòng)渲染關(guān)閉就可以了，我這里是直接將layui中的自動(dòng)渲染給屏蔽掉了。
layui中獲取layui路徑方法不兼容IE11的問題
控制臺(tái)打印報(bào)錯(cuò)：
Layui hint: css/modules/laydate/default/laydate.css?v=5.0.9 timeout
layui的彈出層組件、時(shí)間組件、穿梭組件等都不能正常使用。
原因是，layui中的獲取layui文件路徑的方法不兼容IE11。導(dǎo)致在IE11下，項(xiàng)目找不到該組件，所以組件當(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);
}()
替換完成之后，就可以重新打包，新打好的包放到項(xiàng)目里面就可以了。
在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ù)讀本地文件，如果是多文件，則會(huì)遍歷。(不支持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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要通過示例和大家一起淺析一下Vue3的響應(yīng)式原理，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue3有一定幫助，需要的可以參考一下2022-08-08
typescript+vite項(xiàng)目配置別名的方法實(shí)現(xiàn)
我們?yōu)榱耸÷匀唛L(zhǎng)的路徑，經(jīng)常喜歡配置路徑別名，本文主要介紹了typescript+vite項(xiàng)目配置別名的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue+antd實(shí)現(xiàn)折疊與展開組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了vue props數(shù)據(jù)傳遞類型限制方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue路由緩存的幾種實(shí)現(xiàn)方式小結(jié)
這篇文章主要介紹了vue路由緩存的幾種實(shí)現(xiàn)方式,結(jié)合實(shí)例形式詳細(xì)分析了vue.js路由緩存常見實(shí)現(xiàn)方式、使用技巧與操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
defineProperty和Proxy基礎(chǔ)功能及性能對(duì)比
這篇文章主要為大家介紹了defineProperty和Proxy基礎(chǔ)功能及性能對(duì)比，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了vue中如何通過iframe方式加載本地的vue頁面，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue2.0實(shí)現(xiàn)分頁組件的實(shí)例代碼
這篇文章主要介紹了vue2.0實(shí)現(xiàn)分頁組件的實(shí)例代碼,需要的朋友可以參考下2017-06-06
本片文章給大家詳細(xì)介紹了如何將Vue組件庫發(fā)布到npm的方法以及代碼示例分享，感興趣的朋友參考學(xué)習(xí)下。2018-02-02
這篇文章我們將探討Vue3框架的優(yōu)秀特性、使用原理、周邊生態(tài)和實(shí)戰(zhàn)應(yīng)用，系統(tǒng)的學(xué)習(xí)Vue生態(tài)體系，希望和大家共同成長(zhǎng)，我們一起探討下Vue3和Vue2的響應(yīng)式原理，那究竟什么是“響應(yīng)式”，接下來跟著小編一起來學(xué)習(xí)吧2023-05-05