vueiview兼容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 以上的解决办法