EventListener使用element封装的兼容方法替代

src/components/BackToTop/index.vue

@@ -7,6 +7,8 @@
 </template>
 
 <script>
+import { on, off } from 'element-ui/src/utils/dom'
+
 export default {
   name: 'BackToTop',
   props: {
@@ -45,10 +47,10 @@ export default {
     }
   },
   mounted() {
-    window.addEventListener('scroll', this.handleScroll)
+    on(window, 'scroll', this.handleScroll)
   },
   beforeDestroy() {
-    window.removeEventListener('scroll', this.handleScroll)
+    off(window, 'scroll', this.handleScroll)
     if (this.interval) {
       clearInterval(this.interval)
     }

src/components/Charts/mixins/resize.js

@@ -1,4 +1,5 @@
 import { debounce } from '@/utils'
+import { on, off } from 'element-ui/src/utils/dom'
 
 export default {
   data() {
@@ -12,15 +13,15 @@ export default {
         this.chart.resize()
       }
     }, 100)
-    window.addEventListener('resize', this.__resizeHandler)
+    on(window, 'resize', this.__resizeHandler)
 
     this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-    this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    on(this.$_sidebarElm && this.$_sidebarElm, 'transitionend', this.$_sidebarResizeHandler)
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.__resizeHandler)
+    off(window, 'resize', this.__resizeHandler)
 
-    this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    off(this.$_sidebarElm && this.$_sidebarElm, 'transitionend', this.$_sidebarResizeHandler)
   },
   methods: {
     // use $_ for mixins properties

src/components/Dropzone/index.vue

@@ -7,6 +7,7 @@
 <script>
 import Dropzone from 'dropzone'
 import 'dropzone/dist/dropzone.css'
+import { on, off } from 'element-ui/src/utils/dom'
 // import { getToken } from 'api/qiniu';
 
 Dropzone.autoDiscover = false
@@ -145,7 +146,7 @@ export default {
     })
 
     if (this.couldPaste) {
-      document.addEventListener('paste', this.pasteImg)
+      on(document, 'paste', this.pasteImg)
     }
 
     this.dropzone.on('success', file => {
@@ -165,7 +166,7 @@ export default {
     })
   },
   destroyed() {
-    document.removeEventListener('paste', this.pasteImg)
+    off(document, 'paste', this.pasteImg)
     this.dropzone.destroy()
   },
   methods: {

src/components/HeaderSearch/index.vue

@@ -22,6 +22,7 @@
 // make search results more in line with expectations
 import Fuse from 'fuse.js'
 import path from 'path'
+import { on, off } from 'element-ui/src/utils/dom'
 
 export default {
   name: 'HeaderSearch',
@@ -48,9 +49,9 @@ export default {
     },
     show(value) {
       if (value) {
-        document.body.addEventListener('click', this.close)
+        on(document.body, 'click', this.close)
       } else {
-        document.body.removeEventListener('click', this.close)
+        off(document.body, 'click', this.close)
       }
     }
   },

src/components/ImageCropper/index.vue

@@ -115,6 +115,8 @@ import language from './utils/language.js'
 import mimes from './utils/mimes.js'
 import data2blob from './utils/data2blob.js'
 import effectRipple from './utils/effectRipple.js'
+import { on, off } from 'element-ui/src/utils/dom'
+
 export default {
   props: {
     // 域，上传文件name，触发事件会带上（如果一个页面多个图片上传控件，可以做区分
@@ -839,15 +841,19 @@ export default {
           that.$emit('crop-upload-fail', err, field, ki)
         }
       })
+    },
+    $_closeHandler(e) {
+      if (this.value && (e.key == 'Escape' || e.keyCode == 27)) {
+        this.off()
+      }
     }
   },
   created() {
     // 绑定按键esc隐藏此插件事件
-    document.addEventListener('keyup', (e) => {
+    on(document, 'keyup', this.$_closeHandler)
-      if (this.value && (e.key == 'Escape' || e.keyCode == 27)) {
+  },
-        this.off()
+  beforeDestroy() {
-      }
+    off(document, 'keyup', this.$_closeHandler)
-    })
   }
 }
 </script>

src/components/RightPanel/index.vue

@@ -14,6 +14,7 @@
 
 <script>
 import { addClass, removeClass } from '@/utils'
+import { on, off } from 'element-ui/src/utils/dom'
 
 export default {
   name: 'RightPanel',
@@ -58,13 +59,13 @@ export default {
   },
   methods: {
     addEventClick() {
-      window.addEventListener('click', this.closeSidebar)
+      on(window, 'click', this.closeSidebar)
     },
     closeSidebar(evt) {
       const parent = evt.target.closest('.rightPanel')
       if (!parent) {
         this.show = false
-        window.removeEventListener('click', this.closeSidebar)
+        off(window, 'click', this.closeSidebar)
       }
     },
     insertToBody() {

src/components/Sticky/index.vue

@@ -12,6 +12,8 @@
 </template>
 
 <script>
+import { on, off } from 'element-ui/src/utils/dom'
+
 export default {
   name: 'Sticky',
   props: {
@@ -39,15 +41,15 @@ export default {
   },
   mounted() {
     this.height = this.$el.getBoundingClientRect().height
-    window.addEventListener('scroll', this.handleScroll)
+    on(window, 'scroll', this.handleScroll)
-    window.addEventListener('resize', this.handleResize)
+    on(window, 'resize', this.handleResize)
   },
   activated() {
     this.handleScroll()
   },
   destroyed() {
-    window.removeEventListener('scroll', this.handleScroll)
+    off(window, 'scroll', this.handleScroll)
-    window.removeEventListener('resize', this.handleResize)
+    off(window, 'resize', this.handleResize)
   },
   methods: {
     sticky() {

src/directive/sticky.js

@@ -1,3 +1,5 @@
+import { on, off } from 'element-ui/src/utils/dom'
+
 const vueSticky = {}
 let listenAction
 vueSticky.install = Vue => {
@@ -78,11 +80,11 @@ vueSticky.install = Vue => {
         check()
       }
 
-      window.addEventListener('scroll', listenAction)
+      on(window, 'scroll', listenAction)
     },
 
     unbind() {
-      window.removeEventListener('scroll', listenAction)
+      off(window, 'scroll', listenAction)
     }
   })
 }

src/directive/waves/waves.js

@@ -1,4 +1,5 @@
 import './waves.css'
+import { on, off } from 'element-ui/src/utils/dom'
 
 const context = '@@wavesContext'
 
@@ -58,14 +59,14 @@ function handleClick(el, binding) {
 
 export default {
   bind(el, binding) {
-    el.addEventListener('click', handleClick(el, binding), false)
+    on(el, 'click', handleClick(el, binding), false)
   },
   update(el, binding) {
-    el.removeEventListener('click', el[context].removeHandle, false)
+    off(el, 'click', el[context].removeHandle, false)
-    el.addEventListener('click', handleClick(el, binding), false)
+    on(el, 'click', handleClick(el, binding), false)
   },
   unbind(el) {
-    el.removeEventListener('click', el[context].removeHandle, false)
+    off(el, 'click', el[context].removeHandle, false)
     el[context] = null
     delete el[context]
   }

src/layout/components/TagsView/index.vue

@@ -28,6 +28,7 @@
 <script>
 import ScrollPane from './ScrollPane'
 import path from 'path'
+import { on, off } from 'element-ui/src/utils/dom'
 
 export default {
   components: { ScrollPane },
@@ -55,9 +56,9 @@ export default {
     },
     visible(value) {
       if (value) {
-        document.body.addEventListener('click', this.closeMenu)
+        on(document.body, 'click', this.closeMenu)
       } else {
-        document.body.removeEventListener('click', this.closeMenu)
+        off(document.body, 'click', this.closeMenu)
       }
     }
   },

src/layout/mixin/ResizeHandler.js

@@ -1,4 +1,5 @@
 import store from '@/store'
+import { on, off } from 'element-ui/src/utils/dom'
 
 const { body } = document
 const WIDTH = 992 // refer to Bootstrap's responsive design
@@ -12,10 +13,10 @@ export default {
     }
   },
   beforeMount() {
-    window.addEventListener('resize', this.$_resizeHandler)
+    on(window, 'resize', this.$_resizeHandler)
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.$_resizeHandler)
+    off(window, 'resize', this.$_resizeHandler)
   },
   mounted() {
     const isMobile = this.$_isMobile()

src/views/dashboard/admin/components/mixins/resize.js

@@ -1,4 +1,5 @@
 import { debounce } from '@/utils'
+import { on, off } from 'element-ui/src/utils/dom'
 
 export default {
   data() {
@@ -35,10 +36,10 @@ export default {
       }, 100)()
     },
     $_initResizeEvent() {
-      window.addEventListener('resize', this.$_resizeHandler)
+      on(window, 'resize', this.$_resizeHandler)
     },
     $_destroyResizeEvent() {
-      window.removeEventListener('resize', this.$_resizeHandler)
+      off(window, 'resize', this.$_resizeHandler)
     },
     $_sidebarResizeHandler(e) {
       if (e.propertyName === 'width') {
@@ -47,10 +48,10 @@ export default {
     },
     $_initSidebarResizeEvent() {
       this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+      on(this.$_sidebarElm && this.$_sidebarElm, 'transitionend', this.$_sidebarResizeHandler)
     },
     $_destroySidebarResizeEvent() {
-      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+      off(this.$_sidebarElm && this.$_sidebarElm, 'transitionend', this.$_sidebarResizeHandler)
     }
   }
 }

src/views/login/index.vue

@@ -76,6 +76,8 @@
 <script>
 import { validUsername } from '@/utils/validate'
 import SocialSign from './components/SocialSignin'
+// eslint-disable-next-line
+import { on, off } from 'element-ui/src/utils/dom'
 
 export default {
   name: 'Login',
@@ -125,7 +127,7 @@ export default {
     }
   },
   created() {
-    // window.addEventListener('storage', this.afterQRScan)
+    // on(window, 'storage', this.afterQRScan)
   },
   mounted() {
     if (this.loginForm.username === '') {
@@ -135,7 +137,7 @@ export default {
     }
   },
   destroyed() {
-    // window.removeEventListener('storage', this.afterQRScan)
+    // off(window, 'storage', this.afterQRScan)
   },
   methods: {
     checkCapslock({ shiftKey, key } = {}) {