update

Coffcer · Mar 18, 2016 · 3c0167a · 3c0167a
1 parent 037bc8b
commit 3c0167a
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ import Bootstrap.css
 ```
 <link href="bootstrap.css"></link>
 ```
-** NOTE: **  By default, the modal style is pure bootstrap style, you can use any 3rd party bootstrap framework, like above GIF.
+**NOTE:**  By default, the modal style is pure bootstrap style, you can use any 3rd party bootstrap framework, like above GIF.
 
 
 simple options:
@@ -22,12 +22,11 @@ simple options:
 
 <!--custom content-->
 <modal title="Modal Title" :show.sync="show" @ok="ok" @cancel="cancel">
-    <p>Modal Body1</p>
-    <div>Modal Body2</div>
+    <div>Modal Body</div>
 
-    <p slot="header">Modal Header</p>
-    <p slot="title">Modal Title</p>
-    <p slot="footer">Modal Footer</p>
+    <div slot="header">Modal Header</div>
+    <div slot="title">Modal Title</div>
+    <div slot="footer">Modal Footer</div>
 </modal>
 
 ```

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-bootstrap-modal",
   "description": "Bootstrap Style Modal for Vue",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "author": "coffce",
   "main": "./src/modal.vue"
 }
diff --git a/src/modal.vue b/src/modal.vue
@@ -64,6 +64,13 @@
                 default: false
             }
         },
+        data () {
+            return {
+                marginTop: null,
+                marginBottom: null,
+                duration: null
+            };
+        },
         computed: {
             modalClass () {
                 return {
@@ -75,24 +82,27 @@
         },
         watch: {
             show (value) {
+                // 太长的modal，在显示时去掉body滚动条，防止出现双滚动条
                 if (value) {
-                    // 太长的modal，在显示时去掉body滚动条，防止出现双滚动条
-                    let style = window.getComputedStyle(this.$els.dialog),
-                        mt = +style['margin-top'].replace('px', ''),
-                        mb = +style['margin-bottom'].replace('px', '');
+                    if (!this.marginTop) {
+                        let style = window.getComputedStyle(this.$els.dialog);
+                        this.marginTop = +style['margin-top'].replace('px', '');
+                        this.marginBottom = +style['margin-bottom'].replace('px', '');
+                    }
 
-                    if (this.$els.dialog.clientHeight + mt + mb + 10 > window.innerHeight) {
-                        //document.body.className += ' modal-open-noscroll';
+                    if (this.$els.dialog.clientHeight + this.marginTop + this.marginBottom + 10 > window.innerHeight) {
                         document.body.style.overflowY = 'hidden';
                     }
-                } else {
-                    // 在modal动画结束后再加上body滚动条
-                    let duration = window.getComputedStyle(this.$el)['transition-duration'].replace('s', '') * 1000;
+                }
+                // 在modal动画结束后再加上body滚动条
+                else {
+                    if (!this.duration) {
+                        this.duration = window.getComputedStyle(this.$el)['transition-duration'].replace('s', '') * 1000;
+                    }
 
                     window.setTimeout(() => {
-                        //document.body.className = document.body.className.replace('modal-open-noscroll', '');
                         document.body.style.overflowY = 'auto';
-                    }, duration);
+                    }, this.duration);
                 }
             }
         },