layui實(shí)際項(xiàng)目使用過程中遇到的兼容性問題及解決
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)文章
vue 全局封裝loading加載教程(全局監(jiān)聽)
這篇文章主要介紹了vue 全局封裝loading加載教程(全局監(jiān)聽),具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
ElementUI實(shí)現(xiàn)在下拉列表里面進(jìn)行搜索功能詳解
有時(shí)候需要用到下拉列表全選和搜索,下面這篇文章主要給大家介紹了關(guān)于ElementUI實(shí)現(xiàn)在下拉列表里面進(jìn)行搜索功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue3.0中使用websocket,封裝到公共方法的實(shí)現(xiàn)
這篇文章主要介紹了vue3.0中使用websocket,封裝到公共方法的實(shí)現(xiàn),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
vue項(xiàng)目強(qiáng)制清除頁面緩存的例子
今天小編就為大家分享一篇vue項(xiàng)目強(qiáng)制清除頁面緩存的例子,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
使用Vue3和Pinia實(shí)現(xiàn)網(wǎng)頁刷新功能
在現(xiàn)代 Web 開發(fā)中,保持用戶界面的動(dòng)態(tài)性和響應(yīng)性至關(guān)重要,當(dāng)用戶觸發(fā)某些操作時(shí),例如點(diǎn)擊按鈕或者完成表單提交,我們往往需要刷新頁面的一部分來展示最新的數(shù)據(jù),本文將介紹如何使用 Vue 3 和 Pinia 來實(shí)現(xiàn)這一功能,需要的朋友可以參考下2024-08-08
詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定
這篇文章主要介紹了詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-05-05

