bugfix handleLockScroll only when value is true

Author: hunterliu1003

README.md

@@ -1,6 +1,6 @@
 # Vue Final Modal
 
-<p align="center"><a href="https://hunterliu1003.github.io/vue-final-modal/" target="_blank" rel="noopener noreferrer"><img width="600" src="https://hunterliu1003.github.io/vue-final-modal/preview.png" alt="Vue Final Modal Logo"></a></p>
+<p align="center"><a href="https://hunterliu1003.github.io/vue-final-modal/" target="_blank" rel="noopener noreferrer"><img src="https://hunterliu1003.github.io/vue-final-modal/preview.png" alt="Vue Final Modal Logo"></a></p>
 
 <p align="center">
   <a href="https://npmcharts.com/compare/vue-final-modal?minimal=true"><img src="https://img.shields.io/npm/dm/vue-final-modal.svg?sanitize=true" alt="Downloads"></a>

dist/VueFinalModal.esm.js

@@ -0,0 +1,6 @@
+<template>
+  <details>
+    <summary class="outline-none">Show code</summary>
+    <slot />
+  </details>
+</template>

dist/VueFinalModal.esm.js.map

@@ -12,6 +12,39 @@ See [Tailwind Examples Source Code](https://github.com/hunterliu1003/vue-final-m
 
 <tailwind-simple></tailwind-simple>
 
+<show-code>
+
+```vue
+<template>
+  <div>
+    <vue-final-modal
+      v-model="showModal"
+      classes="flex justify-center items-center"
+      content-class="max-h-1/2 p-4 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded overflow-auto"
+    >
+      <span class="text-2xl mb-2">Hello, world!</span>
+    </vue-final-modal>
+    <button @click="showModal = true">Simple</button>
+  </div>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      showModal: false
+    })
+  }
+</script>
+
+<style scoped>
+  button {
+    @apply mb-2 px-2 py-1 border rounded;
+  }
+</style>
+```
+
+</show-code>
+
 ## Set lockScroll to `false`
 
 <tailwind-lock-scroll></tailwind-lock-scroll>
@@ -40,14 +73,10 @@ See [Tailwind Examples Source Code](https://github.com/hunterliu1003/vue-final-m
 
 <tailwind-attach></tailwind-attach>
 
-
 ## Custom vue-final-modal component
 
-
 TBD
 
-
 ## Override style
 
-
 TBD

dist/VueFinalModal.umd.js

@@ -1,6 +1,6 @@
 module.exports = {
   purge: {
-    content: ['../example/src/components/**/*.vue']
+    content: ['../example/src/components/**/*.vue', 'content/**/*.md']
   },
   theme: {
     extend: {

dist/VueFinalModal.umd.js.map

@@ -94,6 +94,11 @@
       <base-button @click="openAttach"
         >Attach to here and open modal</base-button
       >
+      <p>click will:</p>
+      <ul>
+        <li>set "attach" to "true"</li>
+        <li>set "lockScroll" to "false"</li>
+      </ul>
     </div>
   </div>
 </template>
@@ -134,6 +139,7 @@ export default {
     openAttach() {
       this.attach = '#attach'
       this.showModal = true
+      this.lockScroll = false
     }
   }
 }

docs/components/global/ShowCode.vue

@@ -7,7 +7,7 @@
     >
       <span class="text-2xl mb-2">Hello, world!</span>
     </vue-final-modal>
-    <base-button @click="showModal = true">Simple</base-button>
+    <button @click="showModal = true">Simple</button>
   </div>
 </template>
 
@@ -18,3 +18,9 @@ export default {
   })
 }
 </script>
+
+<style scoped>
+button {
+  @apply mb-2 px-2 py-1 border rounded;
+}
+</style>