Merge pull request #24 from vue-final/feature/lock-scroll

#23, Fixed Background shifts when modal is opened

Author: hunterliu1003

dist/VueFinalModal.esm.js

@@ -1,9 +1,11 @@
 import { bindPrototype, registComponent } from './PluginCore'
 import { DUPLICATE_PLUGIN_COMPONENT, DUPLICATE_COMPONENT } from './utils/errors'
+import mobile from 'is-mobile'
 
 const defaultOptions = {
   componentName: 'VueFinalModal',
-  key: '$vfm'
+  key: '$vfm',
+  isMobile: mobile()
 }
 
 const Plugin = () => ({

dist/VueFinalModal.esm.js.map

@@ -1,10 +1,12 @@
 import VueFinalModal from './VueFinalModal.vue'
+import { setStyle, removeStyle } from './utils/dom.js'
 
-function createVfm() {
+function createVfm(options) {
   let vfm
 
   return function() {
     vfm = {
+      isScrollLocked: false,
       openedModals: [],
       modals: [],
       show(name) {
@@ -23,24 +25,44 @@ function createVfm() {
         if (modal !== undefined) {
           modal.$emit('input', show === undefined ? !modal.value : show)
         }
+      },
+      lockScroll() {
+        if (this.isScrollLocked) return
+        if (options.isMobile) {
+          setStyle(document.body, 'overflow', 'hidden')
+        } else {
+          window.addEventListener('wheel', this.lockScrollListener, { passive: false })
+        }
+        this.isScrollLocked = true
+      },
+      unlockScroll() {
+        if (options.isMobile) {
+          removeStyle(document.body, 'overflow')
+        } else {
+          window.removeEventListener('wheel', this.lockScrollListener)
+        }
+        this.isScrollLocked = false
+      },
+      lockScrollListener(e) {
+        e.preventDefault()
       }
     }
     return vfm
   }
 }
 
-export function bindPrototype(Vue, { key }) {
-  const vfm = createVfm()()
-  Object.defineProperty(Vue.prototype, key, {
+export function bindPrototype(Vue, options) {
+  const vfm = createVfm(options)()
+  Object.defineProperty(Vue.prototype, options.key, {
     get() {
       return vfm
     }
   })
 }
 
-export function registComponent(Vue, { componentName, key }) {
-  Vue.component(componentName, {
+export function registComponent(Vue, options) {
+  Vue.component(options.componentName, {
     ...VueFinalModal,
-    props: { ...VueFinalModal.props, $_key: { type: String, default: key } }
+    props: { ...VueFinalModal.props, $_options: { type: Object, default: () => options } }
   })
 }

dist/VueFinalModal.umd.js

@@ -56,7 +56,6 @@
 
 <script>
 import FocusTrap from './utils/focusTrap.js'
-import { setStyle, removeStyle } from './utils/dom.js'
 
 const TransitionState = {
   Enter: 'enter',
@@ -115,7 +114,7 @@ export default {
   }),
   computed: {
     api() {
-      return this[this.$_key]
+      return this[this.$_options.key]
     },
     isComponentReadyToBeDestroyed() {
       return (
@@ -231,7 +230,7 @@ export default {
     },
     handleLockScroll() {
       if (this.value) {
-        this.lockScroll ? setStyle(document.body, 'overflow', 'hidden') : removeStyle(document.body, 'overflow')
+        this.lockScroll ? this.api.lockScroll() : this.api.unlockScroll()
       }
     },
     getAttachElement() {
@@ -290,7 +289,7 @@ export default {
       this.modalStackIndex = null
 
       if (this.api.openedModals.length === 0) {
-        this.lockScroll && removeStyle(document.body, 'overflow')
+        this.lockScroll && this.api.unlockScroll()
       }
       this.$emit('closed')
     },

dist/VueFinalModal.umd.js.map

@@ -70,5 +70,8 @@
     "vue-modal",
     "vue-dialog",
     "vue-component"
-  ]
+  ],
+  "dependencies": {
+    "is-mobile": "^2.2.2"
+  }
 }

lib/Plugin.js

@@ -5040,6 +5040,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-mobile@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/is-mobile/-/is-mobile-2.2.2.tgz#f6c9c5d50ee01254ce05e739bdd835f1ed4e9954"
+  integrity sha512-wW/SXnYJkTjs++tVK5b6kVITZpAZPtUrt9SF80vvxGiF/Oywal+COk1jlRkiVq15RFNEQKQY31TkV24/1T5cVg==
+
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"