最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue+iview 兼容IE11瀏覽器的實現(xiàn)方法

 更新時間:2019年01月07日 14:43:05   作者:dongceha  
這篇文章主要介紹了vue+iview 兼容IE11瀏覽器的實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

最近在搞一個基于vue的后臺管理系統(tǒng)兼容IE瀏覽器,眼淚都要掉下來。后來和產(chǎn)品說了,同意兼容IE11,感動得我眼淚啊

這里也就是記錄一下我遇到的超級煩的bug

 首先是'babel-polyfill' 和 "autoprefixer-loader" 這個不用多說,資源一大堆

然后 打包之后一直  const  去不掉,查了之后是 webpack 有 webpack-dev 不支持IE低版本了,要把 webpack 版本往下調(diào),我是拒絕的

1、IE  new Date() 失敗

new Date('2018-1-1')
//Mon Jan 01 2018 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時間)  chrome
//Invalid Date                   IE
 
new Date('2018/1/1')
//Mon Jan 01 2018 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時間)  chrome
//Mon Jan 01 2018 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時間)  IE

2、在IE里,點擊 input type=checkbox 多次點擊會邏輯混亂

原因:在 IE中,多次點擊之后會同時出發(fā) dblclick 和 click 事件,而這兩個事件是一起執(zhí)行了 click 事件,會導(dǎo)致click 事件失效

$("input[type='checkbox']").attr('ondblclick', 'this.click()');
 
或
 
$('.content').on('dblclick','input[type="checkbox"]',function(){
  this.click();  // 把雙擊事件變成單擊事件 
})

注意,要判斷是否是IE瀏覽器,要不然會把chrome 帶進(jìn)溝里

3、input placeholder 會觸發(fā) input 事件

意思就是說你渲染上去了,可能會自動觸發(fā)一次 input,然后清空了文本,又觸發(fā)一次

重點是,IE tm 的不要臉地承認(rèn)了??!說不影響安全,俺們就不修復(fù)了哈

這東西的兼容就見仁見智了,用span 來代替 placeholder 也是可以的嘛,不多嗶嗶

4、Input type=file 中,將 其置空清除 緩存會在IE中觸發(fā) change 事件,

var fileName = $(this).val();
filename == undefined

這東西的兼容就見仁見智了,可以判斷一下filename,不多嗶嗶

5、input type=text 中,text-overflow: ellpsis失效

input輸入框如果東西太多,希望展示位   ...  省略號,但是chrome成功了,IE失敗了

需要將 input 標(biāo)簽置為 readonly 才能起作用

沒錯,這東西是 iview select 里的 input標(biāo)簽

So:

initTheSelect () {
 var input = document.querySelector('.ellipsisInput .ivu-select-selection .ivu-select-input');
 input.setAttribute('readonly', true);
 input.addEventListener('click', function (params) {
  input.removeAttribute('readonly');
  input.focus()
 });
 input.addEventListener('blur', function (params) {
  input.setAttribute('readonly', true);
 })
},

6、在IE中,本系統(tǒng)是 使用了cookie 來保存驗證信息的,但是沒多久就能發(fā)現(xiàn)發(fā)送的請求都不攜帶cookie而導(dǎo)致重新登錄

查看了,是304 即讀取緩存的時候,不會攜帶cookie,然后一旦讀到一個  重新登錄,你這個系統(tǒng)基本就完了,一直從緩存里讀取,你登錄了?誒,有緩存,我拿緩存吧。

緩存:咳咳,你不是上次重新登陸嗎?我給你存著呢,給給給,重新登錄去吧。

所以要么設(shè)置IE不緩存,要么代碼改

 后端設(shè)置,前端的設(shè)置要么不保險(神tm時靈時不靈),要么就是太麻煩,后端幾行代碼搞定

不允許瀏覽器端或緩存服務(wù)器緩存當(dāng)前頁面信息。

response.setHeader( "Pragma", "no-cache" );  
response.setDateHeader("Expires", 0);  
response.addHeader( "Cache-Control", "no-cache" );//瀏覽器和緩存服務(wù)器都不應(yīng)該緩存頁面信息
response.addHeader( "Cache-Control", "no-store" );//請求和響應(yīng)的信息都不應(yīng)該被存儲在對方的磁盤系統(tǒng)中;  
response.addHeader( "Cache-Control", "must-revalidate" );*//于客戶機(jī)的每次請求,代理服務(wù)器必須想服務(wù)器驗證緩存是否過時;

2018-11-14

僵持住了,還是我這邊改吧

axios.interceptors.request.use(
  config => {
     // 給每個請求加上一個 ieT 的時間參數(shù)
    if (window.navigator.userAgent.indexOf('Trident') > -1) {
      config.url = config.url + `?ieT=${new Date().getTime()}`
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });

7、本系統(tǒng)使用了 tinymce 來進(jìn)行富文本編輯,但是,初始化失?。。?!而且不報錯!?。?/strong>

這里使用tingmce只是導(dǎo)入了  tinymce一個文件,其他文件都放進(jìn)了 dist 文件夾之中,然后讓他自己去讀取文件

不知道為什么網(wǎng)上一點資源都沒有,難道全世界就我一個人碰到了?可是這bug我去其他系統(tǒng)上必現(xiàn)的呀,老哥

Tinymce.js

這bug困擾了我整整兩天?。∫恍幸恍性贗E里面debug,對比chrome里的debug終于有結(jié)果了

是tinymce在IE中的基本路徑表現(xiàn)和chrome不一致,改源碼

Tinymce.js

var load = function (name, addOnUrl, success, scope, failure) {
 if (urls[name]) {
 return;
}
var urlString = typeof addOnUrl === 'string' ? addOnUrl : addOnUrl.prefix + 
 addOnUrl.resource + addOnUrl.suffix;
 if (urlString.indexOf('/') !== 0 && urlString.indexOf('://') === -1) {
  // 兼容IE 瀏覽器
  // 在load函數(shù)中,需要判斷 當(dāng)前瀏覽器,然后加上 dist
  urlString = AddOnManager.baseURL + 'dist/' + urlString;
  console.log(urlString)
 }
 urls[name] = urlString.substring(0, urlString.lastIndexOf('/'));
  if (lookup[name]) {
    loadDependencies(name, addOnUrl, success, scope);
  } else {
   ScriptLoader.ScriptLoader.add(urlString, function () {
    return loadDependencies(name, addOnUrl, success, scope);
   }, scope, failure);
  }
};
 
 
var loadLanguage = function (scriptLoader, editor) {
 var settings = editor.settings;
 if (settings.language && settings.language !== 'en' && !settings.language_url) {
 // 兼容IE瀏覽器
  if (window.navigator.userAgent.indexOf('Trident') > 0) {
   settings.language_url = editor.editorManager.baseURL + '/dist/langs/' + 
   settings.language + '.js';
  } else {
   settings.language_url = editor.editorManager.baseURL + '/langs/' + 
   settings.language + '.js';
  }
 
 }
 if (settings.language_url && !editor.editorManager.i18n.data[settings.language]) {
  scriptLoader.add(settings.language_url);
 }
};

Theme.js

var getSkinUrl = function (editor) {
 var settings = editor.settings;
 var skin = settings.skin;
 var skinUrl = settings.skin_url;
 
 if (skin !== false) {
  var skinName = skin ? skin : 'lightgray';
 
  if (skinUrl) {
   skinUrl = editor.documentBaseURI.toAbsolute(skinUrl);
  } else {
  // 兼容IE 瀏覽器
   if (window.navigator.userAgent.indexOf('Trident') > 0) {
    skinUrl = EditorManager.baseURL + '/dist/skins/' + skinName;
   } else {
     skinUrl = EditorManager.baseURL + '/skins/' + skinName;
   }
  }
 }
 
 return skinUrl;
};

8、導(dǎo)出excel文件

其實我是傾向于使用 iview 自帶的 exportCsv 的,但是 其

不會執(zhí)行 columns 里的render、

導(dǎo)出的數(shù)字 0002 打開會變成 2

。。。

很多問題,沒辦法,這個文件天生的,避免不了

IE 的話,又不兼容 download屬性、我的系統(tǒng)又說什么阻止了正向與反向緩存什么的,點進(jìn)去還蠻多符合的東西的,結(jié)果window.href 也gg,只能使用 msSaveBlob 了

// 兼容IE
if (window.navigator.msSaveOrOpenBlob) {
 const blob = new Blob([template], {type: "application/vnd.ms-excel"})
 navigator.msSaveBlob(blob, this.name.indexOf('xls') > 0 ? this.name : this.name + 
 '.xls');
} else {
 let link = document.createElement('a');
 link.href = uri + this.base64(template);
 link.download = this.name.indexOf('xls') > 0 ? this.name : this.name + '.xls';
 link.click();
}

9、復(fù)制粘貼失效?。?/strong>

測試和我說復(fù)制粘貼失效了,我整個人差點爆炸!

冷靜一點...

分析一下:在IE中,復(fù)制之后會將回車復(fù)制進(jìn)去,然后黏貼到input標(biāo)簽時,只展示第一行

//監(jiān)聽 paste事件
MyPaste () {
 if (window.navigator.userAgent.indexOf('Trident') > 0) { 
 var copyText = window.clipboardData.getData("Text");
 this.filters.phoneNum = this.filters.phoneNum ? 
    this.filters.phoneNum + copyText.replace(/[\r\n]/g,"") :
  copyText.replace(/[\r\n]/g,"");
 }
},
...

還有好多,但是就不一一講了,其他的應(yīng)該能查到,byebye

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue.js 3.x 中的響應(yīng)式數(shù)據(jù)ref 與 reactive詳解

    Vue.js 3.x 中的響應(yīng)式數(shù)據(jù)ref 與 reactive詳解

    ref 和 reactive 是 Vue.js 3 中用于創(chuàng)建響應(yīng)式數(shù)據(jù)的兩個關(guān)鍵函數(shù),它們分別適用于不同類型的數(shù)據(jù),幫助我們更好地組織和管理組件的狀態(tài),這篇文章主要介紹了Vue.js 3.x 中的響應(yīng)式數(shù)據(jù):ref 與 reactive,需要的朋友可以參考下
    2024-01-01
  • vue 實現(xiàn)setInterval 創(chuàng)建和銷毀實例

    vue 實現(xiàn)setInterval 創(chuàng)建和銷毀實例

    這篇文章主要介紹了vue 實現(xiàn)setInterval 創(chuàng)建和銷毀實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue3.0 CLI - 1 - npm 安裝與初始化的入門教程

    vue3.0 CLI - 1 - npm 安裝與初始化的入門教程

    這篇文章主要介紹了vue3.0 CLI - 1 - npm 安裝與初始化的入門教程,本文通過實例代碼相結(jié)合的形式,給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-09-09
  • Vue?3.0?中?hooks?的概念示例詳解

    Vue?3.0?中?hooks?的概念示例詳解

    在Vue3.0框架中,hooks函數(shù)允許將組件邏輯抽離復(fù)用,提高代碼的可維護(hù)性和復(fù)用性,通過封裝邏輯如獲取數(shù)據(jù)、處理狀態(tài)等,hooks使得組件開發(fā)更加高效和清晰,示例中,useDog.ts用于獲取狗狗圖片,展示了hooks封裝數(shù)據(jù)和邏輯、響應(yīng)式數(shù)據(jù)和異步操作的能力
    2024-10-10
  • Vue中使用Canvas實現(xiàn)繪制二維碼

    Vue中使用Canvas實現(xiàn)繪制二維碼

    這篇文章主要為大家詳細(xì)介紹了如何在Vue中使用Canvas實現(xiàn)繪制二維碼,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2007-02-02
  • Vue動態(tài)組件與異步組件實例詳解

    Vue動態(tài)組件與異步組件實例詳解

    這篇文章主要介紹了Vue動態(tài)組件與異步組件,結(jié)合實例形式分析了動態(tài)組件與異步組件相關(guān)概念、功能及使用技巧,需要的朋友可以參考下
    2019-02-02
  • 使用axios發(fā)送post請求,將JSON數(shù)據(jù)改為form類型的示例

    使用axios發(fā)送post請求,將JSON數(shù)據(jù)改為form類型的示例

    今天小編就為大家分享一篇使用axios發(fā)送post請求,將JSON數(shù)據(jù)改為form類型的示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • Vue Element前端應(yīng)用開發(fā)之獲取后端數(shù)據(jù)

    Vue Element前端應(yīng)用開發(fā)之獲取后端數(shù)據(jù)

    這篇文章主要介紹了Vue Element前端應(yīng)用開發(fā)之獲取后端數(shù)據(jù),對vue感興趣的同學(xué),可以參考下
    2021-05-05
  • 超詳細(xì)的vue組件間通信總結(jié)

    超詳細(xì)的vue組件間通信總結(jié)

    作為一個vue初學(xué)者不得不了解的就是組件間的數(shù)據(jù)通信(暫且不談vuex),通信方式根據(jù)組件之間的關(guān)系有不同之處,這篇文章主要給大家介紹了關(guān)于vue組件間通信的相關(guān)資料,需要的朋友可以參考下
    2021-07-07
  • 解決vue使用vant下拉框van-dropdown-item 綁定title值不變問題

    解決vue使用vant下拉框van-dropdown-item 綁定title值不變問題

    這篇文章主要介紹了解決vue使用vant下拉框van-dropdown-item 綁定title值不變問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08

最新評論

温州市| 南部县| 南川市| 宁明县| 哈巴河县| 开封县| 嘉鱼县| 阳江市| 甘泉县| 澄城县| 慈利县| 大同县| 洛扎县| 花垣县| 唐山市| 开平市| 托里县| 鹿邑县| 馆陶县| 仁寿县| 华宁县| 突泉县| 周口市| 长葛市| 大冶市| 宜君县| 合作市| 南和县| 额济纳旗| 龙游县| 满城县| 合作市| 龙门县| 龙南县| 商都县| 琼中| 城步| 美姑县| 胶州市| 红桥区| 阿瓦提县|