Iview in IE9 and above compatible solutions
1. To support the new ES6 syntax, install Babel-Polyfill.
(1) NPM install babel-polyfill –save copy code
(2) Modify webpack.base.conf.js
Modify the previous entry: {main:’./ SRC /main’,}, copy the code
Modified entry: {main: [” Babel – polyfill “, “/ SRC/main”],},
2. Compatible with the dataset
This is the result of IE10 and below not supporting dataset, and iView’s transfer-dom.js uses this property
Solution: Add the following code to main.js
// This is the result of IE10 and below not supporting dataset, and iView's transfer-dom.js uses this propertyif (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 = {}; // Define an empty objectfor(var i =0; i < attributes.length; I++) {// iterate over all attributes of the nodeif (attributes[i].nodeName.slice(0, 5) ==='data-') {// If the first 5 characters of the attribute name match"data-"// Retrieve the attribute name"data-"Name.push (Attributes [I].nodename.slice (5)); Value.push (attributes[I].nodeValue); }}for(var j =0; j < name.length; Obj [name[j]] = value[j]; // Save the attribute name and value to obj}returnobj; // Return object},}); }}Copy the code3. Degrade the dependent version
If you encounter the following error:
Error 1: “webpackJsonp” is not defined
Solution: Change webpack-dev-server version to 2.71 or lower
NPM install –save-dev [email protected] Copy the code
4. Compatible with requestAnimationFrame (IE9)
Ie9 does not support requestAnimationFrame, if you use it and get an error, that’s ok, just read on.
Solution: Add the following code to main.js
/ / window. RequestAnimationFrame multiple browser compatibility patch / / / / 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 Moller. 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);
};
}
}());
Copy the code5. ClassList compatibility (IE9)
Error message: Unable to get undefined or null-referenced property ‘add’
Unable to get undefined or null-referenced property ‘remove’
If you look at sourceMap and find classList().add or classlist.remove () and so on, there must be a classList problem.
Solution: Add the following code to main.js
// Resolve iView list error in IE9if(! ('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) {
returnself.className.split(/\s+/g)[i] ||null; }}; }}); }Copy the code6. If the request uses AXIos, set the format of the AXIos parameter to form-data
NPM install axios –save
(2) the main. In 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
}]
Copy the code// Then modify the prototype chain
Vue.prototype.$http = axios;
The interceptor:
7. Solve the problem that Internet Explorer 9 does not support foreach
// Resolve the problem that Internet Explorer 9 does not support foreachif ( !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++; }}; }Copy the codeIn IE, elementUI input deletion cannot trigger data change listener
Solution: Add the IE9INPUT event gasket
NPM install –save IE9-oninput-polyfill
(2) main.js:
import oninputPolyfillfrom ‘ie9-oninput-polyfill’
Vue.use(oninputPolyfill);
9. In IE9, the table component of iView will keep flashing when the number of table columns exceeds the maximum width of the table before the data is loaded.
Solution: Forcibly add overflow-x: scroll to ivu-table-tip of the table component.
// Ie9 flicker compatible
.ivu-table-tip{
overflow-x: scroll;
}
10. In IE9, iView select component, too many options (few options, no such bug), scroll bar (overflow:auto), dropdown list style bug.
To solve the problem according to: segmentfault.com/a/119000001…
Solution: Add a style globally
/* Ie9 style compatible */
.ivu-select-dropdown{
min-width:100%;
display:inline-block;
left:0 ! important;
width:auto ! important;
}
11. Vue on ie 9 – cli packaged CSS won’t load (www.jianshu.com/p/2c0dafb44…
npm install –save-dev css-split-webpack-plugin
In webpack. Prod. Conf. Js
const CSSSplitWebpackPlugin= require('css-split-webpack-plugin').default; . [new CSSSplitWebpackPlugin({size:4000, filename:'static/css/[name]-[part].[ext]'}),]Copy the codeIview checkbox style, IE10, IE11 style bug; Tree component style bug.
How to change: The global style is changed as follows.
//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); Ivu-checkbox-inner :after {display:block;}. }Copy the code