iview在ie9及以上的兼容问题解决方案
1.为了能够支持ES6新语法，安装babel-polyfill。
（1）npm install babel-polyfill --save复制代码
（2）修改webpack.base.conf.js
修改前entry: { main:'./src/main',},复制代码
修改后entry: { main: ["babel-polyfill","./src/main"],},
2.兼容dataset
这是ie10及以下不支持dataset导致的，而iview的transfer-dom.js使用了这个属性
解决办法：在main.js加入如下代码
//这是ie10及以下不支持dataset导致的，而iview的transfer-dom.js使用了这个属性
if (window.HTMLElement) {
if (Object.getOwnPropertyNames(HTMLElement.prototype).indexOf('dataset') === -1) {
Object.defineProperty(HTMLElement.prototype, 'dataset', {
get:function () {
var attributes =this.attributes; // 获取节点的所有属性
var name = [];
var value = []; // 定义两个数组保存属性名和属性值
var obj = {}; // 定义一个空对象
for (var i =0; i < attributes.length; i++) {// 遍历节点的所有属性
if (attributes[i].nodeName.slice(0, 5) ==='data-') {// 如果属性名的前面5个字符符合"data-"
// 取出属性名的"data-"的后面的字符串放入name数组中
name.push(attributes[i].nodeName.slice(5));
// 取出对应的属性值放入value数组中
value.push(attributes[i].nodeValue);
}
}
for (var j =0; j < name.length; j++) {// 遍历name和value数组
obj[name[j]] = value[j]; // 将属性名和属性值保存到obj中
}
return obj; // 返回对象
},
});
}
}
3.降级依赖版本
如果遇到以下错误：
错误1：“webpackJsonp”未定义
解决方案：更改webpack-dev-server版本为2.71或更低
npm install --save-dev webpack-dev-server@2.7.1复制代码
4.兼容requestAnimationFrame（ie9）
ie9是不支持requestAnimationFrame的，如果你使用了出现错误，那也没关系，往下看就行了。
解决方案：添加以下代码到main.js
// window.requestAnimationFrame多浏览器兼容问题补丁
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel MIT license
(function () {
var lastTime =0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x =0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame =window[vendors[x] +'RequestAnimationFrame'];
window.cancelAnimationFrame =window[vendors[x] +'CancelAnimationFrame'] ||window[vendors[x] +'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame =function (callback, element) {
var currTime =new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id =window.setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame =function (id) {
clearTimeout(id);
};
}
}());
5.兼容classList（ie9）
错误信息：无法获取未定义或 null 引用的属性“add”
无法获取未定义或 null 引用的属性“remove”
如果你查看sourceMap发现了classList().add或classList.remove()等等，那肯定是classList的问题了。
解决方案：添加以下代码到main.js
//解决iview在IE9中list方法报错的问题
if (!('classList' in document.documentElement)) {
Object.defineProperty(HTMLElement.prototype, 'classList', {
get:function () {
var self =this;
function update(fn) {
return function (value) {
var classes = self.className.split(/\s+/g);
var index = classes.indexOf(value);
fn(classes, index, value);
self.className = classes.join(' ');
};
}
return {
add:update(function (classes, index, value) {
if (!~index) classes.push(value);
}),
remove:update(function (classes, index) {
if (~index) classes.splice(index, 1);
}),
toggle:update(function (classes, index, value) {
if (~index) { classes.splice(index, 1); }else { classes.push(value); }
}),
contains:function (value) {
return !!~self.className.split(/\s+/g).indexOf(value);
},
item:function (i) {
return self.className.split(/\s+/g)[i] ||null;
},
};
},
});
}
6.如果请求采用axios，设置axios传参数格式为form-data
（1）安装axios，npm install axios --save
(2)main.js 里：
import axiosfrom 'axios';
axios.defaults.headers.post['Content-Type'] ='application/x-www-form-urlencoded';
axios.defaults.headers.get['Content-Type'] ='application/x-www-form-urlencoded';
axios.defaults.transformRequest = [function (data) {
let ret =''
for (let itin data) {
ret +=encodeURIComponent(it) +'=' +encodeURIComponent(data[it]) +'&'
}
return ret
}]
//然后再修改原型链
Vue.prototype.$http = axios;
拦截器：
7.解决IE9中不支持foreach的解决方法
//解决IE9中不支持foreach的解决方法
if ( !Array.prototype.forEach ) {
Array.prototype.forEach =function forEach( callback, thisArg ) {
var T, k;
if (this ==null ) {
throw new TypeError("this is null or not defined" );
}
var O = Object(this);
var len = O.length >>>0;
if (typeof callback !=="function" ) {
throw new TypeError( callback +" is not a function" );
}
if ( arguments.length >1 ) {
T = thisArg;
}
k =0;
while( k < len ) {
var kValue;
if ( kin O ) {
kValue = O[ k ];
callback.call( T, kValue, k, O );
}
k++;
}
};
}
8.解决IE中，elementUI的input删除操作无法触发数据变动监听
解决办法：加入ie9input事件垫片
（1）安装：npm install --save ie9-oninput-polyfill
（2）main.js里：
import oninputPolyfillfrom 'ie9-oninput-polyfill'
Vue.use(oninputPolyfill);
9.在IE9中,iview的table组件，在数据未加载出来之前，当table内容列数超过table最大宽度时，页面会不停闪烁。
解决方法：强制给table组件的.ivu-table-tip添加overflow-x: scroll;
//ie9 闪烁兼容
.ivu-table-tip{
overflow-x: scroll;
}
10.在IE9中,iview的select组件，当选项过多（选项少时，无此bug），出现滚动条时（overflow:auto），下拉列表的样式bug。
解决问题根据：segmentfault.com/a/119000001…
解决方法：全局加一个样式
/* ie9 样式兼容*/
.ivu-select-dropdown{
min-width:100%;
display:inline-block;
left:0 !important;
width:auto !important;
}
11.ie9上vue-cli打包的css加载不了（www.jianshu.com/p/2c0dafb44…
npm install --save-dev css-split-webpack-plugin
在webpack.prod.conf.js里
const CSSSplitWebpackPlugin= require('css-split-webpack-plugin').default;
...
//css 分开打包
plugins:[
new CSSSplitWebpackPlugin({
size:4000,
filename:'static/css/[name]-[part].[ext]'
}),
]
12.iview 多选框checkbox样式，IE10，IE11样式bug；tree组件样式bug。
修改方法：全局样式如下更改。
//checkbox
.ivu-checkbox-checked .ivu-checkbox-inner:after {
display:block;
-ms-transform:rotate(45deg)scale(1);/* IE 9 */
-moz-transform:rotate(45deg)scale(1);/* Firefox */
-webkit-transform:rotate(45deg)scale(1);/* Safari 和 Chrome */
}
.ivu-checkbox-indeterminate .ivu-checkbox-inner:after {
display:block;
}
