vue+iview兼容IE9以上的解決辦法

1. 支持ES6新語法，安裝babel-polyfill

IE不支持es6語法

• 安裝

npm install --save babel-polyfill
# 或者(下同)
yarn add babel-polyfill
複製代碼

• 修改webpack.base.conf.js

// 修改以前
entry: {
    app: './src/main.js'
},
// 修改後
entry: {
    app: ['babel-polyfill', './src/main.js']
},
複製代碼

• 在main.js中添加

import 'babel-polyfill'
複製代碼

2. IE10如下，iview的日期組件沒法選擇

兼容dataset，ie10及如下不支持dataset，而iview的transfer-dom.js使用了這個屬性

方法一：安裝element-dataset

yarn add element-dataset
複製代碼

• 在main.js中添加

import ElementDataset from 'element-dataset'
ElementDataset()
複製代碼

方法二

• 在main.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. 支持promise

IE不支持promise

• 安裝es6-promise

yarn add es6-promise
複製代碼

• 在main.js中添加

import promise from 'es6-promise'
promise.polyfill()
複製代碼

4. ie9不支持placeholder屬性

• 安裝ie-placeholder

yarn add ie-placeholder
複製代碼

• 在main.js中添加

import 'ie-placeholder'
複製代碼

轉載請註明：溜爸 » vue+iview兼容IE9以上的解決辦法