vue+iview兼容IE9及以上记录

IE不支持ES6语法

• 安装解码器

  npm install --save babel-polyfill  //转码器，可以将ES6代码转为ES5代码

• 修改webpack.base.conf.js

    entry: {
      // app: './src/main.js'
      app: ['babel-polyfill', './src/main.js'] //兼容IE运行
    },

   

• 在main引用

  import 'babel-polyfill'

•  
  

兼容dataset，ie10及以下不支持dataset，而iview的transfer-dom.js使用了这个属性

// dataset 方法兼容 IE 浏览器。ie10及以下不支持dataset
    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 // 返回对象
                }
            })
        }
    }

    // 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);
            };
        }
    }());
 //remove报错处理
    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;
                    },
                };
            },
        });
    }

 

支持promise

• 安装

  npm install --save es6-promise

• 在main.js引用

  import promise from 'es6-promise'
  promise.polyfill()

   

ie9不支持placeholder属性

• 安装

  npm install --save ie-placeholder

• 在main.js引用

  import 'ie-placeholder'