Feel no regret for this life.

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

Vue silianpan 298℃ 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以上的解决办法

喜欢 (2)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 🙂
    silianpan2019-09-22 10:07 回复