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'