iview兼容ie8_iview在ie9及以上的兼容问题解决方案

是时候亮出这张图了：

可是ie不是你不想兼容就不兼容啊。说多了都是泪。

使用iview已经有一年多的时间。总的来说，iview还是给我的工作带来了很大的方便。

主要的吐槽点就是文档写的不够清楚。

比如组件的按需引入，寥寥数语，看完按照文档引入了，结果控制台一直报错。

然后到隔壁element一看，原来引入方式并不是只有一种，有的需要通过vue.prototype.xxx这种方式。

还有对于兼容性的描述，

你这么一说我还以为ie9直接引入polyfill就可以用了呢，谁知道根本不行。在github上提issue又说不支持低版本ie了。

根据我的经验，不需要很大改动，兼容性大概ie10+，这也是element官方文档上的兼容性。

不知道iview这么做是为了吸引更多人入坑还是怎么回事，毕竟大多数开发者开发的时候都是先看官方文档而不是先去github找issue。

吐槽归吐槽，iview总体上还是不错的。下面说一下我在使用iview的过程中所遇到的ie9+的兼容性问题及解决方案。

安装babel-polyfill

IE浏览器没有内置Promise对象。不仅如此，几乎所有的ES6新增的方法在IE都不能用，此时你需要babel Polyfill

首先

npm install babel-polyfill --save

复制代码

修改webpack.base.conf.js

修改前

entry: {

main: './src/main',

},

复制代码

修改后

entry: {

main: ["babel-polyfill","./src/main"],

},

复制代码

看到网上有的教程安装完babel-polyfill又要安装es6-prommise，只能说一句：画蛇添足。

兼容dataset

[Vue warn]: Error in directive transfer-dom inserted hook: "TypeError: 无法获取未定义或 null 引用的属性“transfer”"

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

解决办法：在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++) { // 遍历节点的所有属性