vue+iview 兼容IE11浏览器的实现方法

最近在搞一个基于vue的后台管理系统兼容IE浏览器，眼泪都要掉下来。后来和产品说了，同意兼容IE11，感动得我眼泪啊

这里也就是记录一下我遇到的超级烦的bug

 首先是'babel-polyfill' 和 "autoprefixer-loader" 这个不用多说，资源一大堆

然后 打包之后一直  const  去不掉，查了之后是 webpack 有 webpack-dev 不支持IE低版本了，要把 webpack 版本往下调，我是拒绝的

1、IE  new Date() 失败

new Date('2018-1-1')//Mon Jan 01 2018 00:00:00 GMT+0800 (中国标准时间)  chrome//Invalid Date                   IE new Date('2018/1/1')//Mon Jan 01 2018 00:00:00 GMT+0800 (中国标准时间)  chrome//Mon Jan 01 2018 00:00:00 GMT+0800 (中国标准时间)  IE

2、在IE里，点击 input type=checkbox 多次点击会逻辑混乱

原因：在 IE中，多次点击之后会同时出发 dblclick 和 click 事件，而这两个事件是一起执行了 click 事件，会导致click 事件失效

$("input[type='checkbox']").attr('ondblclick', 'this.click()'); 或 $('.content').on('dblclick','input[type="checkbox"]',function(){  this.click();  // 把双击事件变成单击事件 })

注意，要判断是否是IE浏览器，要不然会把chrome 带进沟里

3、input placeholder 会触发 input 事件

意思就是说你渲染上去了，可能会自动触发一次 input，然后清空了文本，又触发一次

重点是，IE tm 的不要脸地承认了！！说不影响安全，俺们就不修复了哈

这东西的兼容就见仁见智了，用span 来代替 placeholder 也是可以的嘛，不多哔哔

4、Input type=file 中，将 其置空清除 缓存会在IE中触发 change 事件，

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

这东西的兼容就见仁见智了，可以判断一下filename，不多哔哔

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

input输入框如果东西太多，希望展示位   ...  省略号，但是chrome成功了，IE失败了

需要将 input 标签置为 readonly 才能起作用

没错，这东西是 iview select 里的 input标签

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中，本系统是 使用了cookie 来保存验证信息的，但是没多久就能发现发送的请求都不携带cookie而导致重新登录

查看了，是304 即读取缓存的时候，不会携带cookie，然后一旦读到一个  重新登录，你这个系统基本就完了，一直从缓存里读取，你登录了？诶，有缓存，我拿缓存吧。