完整vue+iview兼容IE9以上的解决办法

柔情只为你懂 2021-12-10 13:49 309阅读 0赞

## 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以上的解决办法][_ vue_iview_IE9]