Solutions of Vue + iView compatible with IE9 and above

Time:2019-11-8

1. Support ES6 new syntax and install Babel Polyfill

Ie does not support ES6 syntax

  • install
npm install --save babel-polyfill
#Or (the same below)
yarn add babel-polyfill
  • Modify webpack.base.conf.js
//Before modification
entry: {
    app: './src/main.js'
},
// after modification
entry: {
    app: ['babel-polyfill', './src/main.js']
},
  • Add in main.js
import 'babel-polyfill'

2. Under ie10, the date component of iView cannot be selected

Compatible with dataset, which is not supported by ie10 and below, but used by transfer-dom.js of iView

Method 1: install element dataset

yarn add element-dataset
  • Add in main.js
import ElementDataset from 'element-dataset'
ElementDataset()

Method two

  • Add in main.js
if (window.HTMLElement) {
  if (Object.getOwnPropertyNames(HTMLElement.prototype).indexOf('dataset') === -1) {
    Object.defineProperty(HTMLElement.prototype, 'dataset', {
      get: function () {
        Var attributes = this. Attributes // get all attributes of the node
        var name = []
        VaR value = [] // define two arrays to hold property names and property values
        Var obj = {} // define an empty object
        For (VaR I = 0; I < attributes. Length; I + +) {// traverses all attributes of a node
          If (attributes [i]. NodeName. Slice (0, 5) = = = 'data -' {// if the first five characters of the attribute name match "data -"
            //Take the string after "data -" of the property name and put it into the name array
            name.push(attributes[i].nodeName.slice(5))
            //Take the corresponding attribute value and put it into the value array
            value.push(attributes[i].nodeValue)
          }
        }
        For (VaR J = 0; J < name. Length; j + +) {// traverses the name and value arrays
          Obj [name [J]] = value [J] // save attribute name and attribute value to obj
        }
        Return obj // return object
      }
    })
  }
}

3. Support promise

Ie does not support promise

  • Install ES6 promise
yarn add es6-promise
  • Add in main.js
import promise from 'es6-promise'
promise.polyfill()

4. IE9 does not support the placeholder property

  • Install ie placeholder
yarn add ie-placeholder
  • Add in main.js
import 'ie-placeholder'

For reprint, please note: solutions for IE9 + Vue + iView compatibility