Merge pull request #15 from veguss/master

add background scrollable and background clickable features

Author: vaban-ru

README.MD

@@ -73,6 +73,8 @@ Vue.use(VueBottomSheet);
 | is-full-screen  | Boolean  | Enable or disable full-screen mode  | `:is-full-screen="true"` |
 | swipe-able  | Boolean  | Enable or disable swipe to close | `:swipe-able="false"` |
 | overlay-color  | Boolean  | Set overlay color with opacity | `:overlay-color="#0000004D"` |
+| background-scrollable  | Boolean  | Enable scroll | `:background-scrollable="true"` |
+| background-clickable  | Boolean  | Enable background click, doesn't work if `click-to-close=true` | `:background-clickable="true"` |
 
 ## Events
 

dev/serve.vue

@@ -72,6 +72,28 @@
             >Full Screen</label
             >
           </div>
+          <div class="form-check form-switch mb-3">
+            <input
+                class="form-check-input"
+                type="checkbox"
+                id="srollableSwitchCheckChecked"
+                v-model="backgroundScrollable"
+            />
+            <label class="form-check-label" for="srollableSwitchCheckChecked"
+            >Background scrollable</label
+            >
+          </div>
+          <div class="form-check form-switch mb-3">
+            <input
+                class="form-check-input"
+                type="checkbox"
+                id="clickableSwitchCheckChecked"
+                v-model="backgroundClickable"
+            />
+            <label class="form-check-label" for="clickableSwitchCheckChecked"
+            >Background clickable</label
+            >
+          </div>
         </div>
         <div class="col-md-4 col-12">
           <div class="mb-3">
@@ -136,6 +158,8 @@
           :swipeAble="swipeAble"
           :overlayColor="overlyHexColor"
           :isFullScreen="isFullScreen"
+          :backgroundScrollable="backgroundScrollable"
+          :backgroundClickable="backgroundClickable"
           ref="myBottomSheet"
       >
         <div class="sheet-content">
@@ -200,7 +224,9 @@ export default Vue.extend({
       rounded: true,
       swipeAble: true,
       isFullScreen: false,
-      overlayColorSelect: "#0000004D"
+      overlayColorSelect: "#0000004D",
+      backgroundScrollable: false,
+      backgroundClickable: false,
     };
   },
   components: {

package-lock.json

@@ -10,10 +10,11 @@
     ]"
       v-on="handlers"
       ref="bottomSheet"
+      :style="{ 'pointer-events': backgroundClickable && clickToClose == false ? 'none' : 'all' }"
   >
     <div v-if="overlay" class="bottom-sheet__backdrop" :style="{ 'background': overlayColor }" />
     <div
-        :style="[{ bottom: cardP+'px', maxWidth: maxWidth, maxHeight: maxHeight },{'height':isFullScreen ? '100%' : 'auto'}]"
+        :style="[{ bottom: cardP+'px', maxWidth: maxWidth, maxHeight: maxHeight },{'height':isFullScreen ? '100%' : 'auto'},{'pointer-events': 'all'}]"
         :class="[
         'bottom-sheet__card',
         { stripe: stripe, square: !rounded },
@@ -98,6 +99,14 @@ export default {
       type: String,
       default: "#0000004D"
     },
+    backgroundScrollable: {
+      type: Boolean,
+      default: false
+    },
+    backgroundClickable: {
+      type: Boolean,
+      default: false
+    }
   },
   methods: {
     isIphone() {
@@ -170,7 +179,11 @@ export default {
       this.init().then(() => {
         this.opened = true;
         this.cardP = 0;
-        document.body.style.overflow = "hidden";
+
+        if (!this.$props.backgroundScrollable) {
+          document.body.style.overflow = "hidden";
+        }
+        
         this.$emit("opened");
       });
     },