Merge pull request #217 from Leopoldthecoder/lock-scroll

add lockScroll in msgbox and dialog

CHANGELOG.md

@@ -7,6 +7,7 @@
 - 修复 Tabs 切换后 Tab-panel 被销毁的问题
 - 修复 TimePicker 错误的隐藏面板
 - 修复 Table Cell 的样式, #204
+- 为 Message Box 和 Dialog 添加 lockScroll 属性，用于定义是否在弹框出现时将 body 滚动锁定
 
 ### 1.0.0-rc.5
 

examples/docs/zh-cn/dialog.md

@@ -134,6 +134,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 | title     | Dialog 的标题 | string    | —                               | —      |
 | size      | Dialog 的大小 | string    | tiny/small/large/full | small |
 | modal     | 是否需要遮罩层   | boolean   | — | true |
+| lockScroll | 是否在 Dialog 出现时将 body 滚动锁定 | boolean | — | true |
 | custom-class      | Dialog 的自定义类名 | string    | — | — |
 | close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean    | — | true |
 | close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean    | — | true |

examples/docs/zh-cn/message-box.md

@@ -211,9 +211,10 @@ import { MessageBox } from 'element-ui';
 
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| title | MessageBox标题 | string | — | — |
-| message | MessageBox消息正文内容 | string | — | — |
+| title | MessageBox 标题 | string | — | — |
+| message | MessageBox 消息正文内容 | string | — | — |
 | type | 消息类型，用于显示图标 | string | success/info/<br>warning/error | — |
+| lockScroll | 是否在 MessageBox 出现时将 body 滚动锁定 | boolean | — | true |
 | showCancelButton | 是否显示取消按钮 | boolean | — | false（以 confirm 和 prompt 方式调用时为 true） |
 | showConfirmButton | 是否显示确定按钮 | boolean | — | true |
 | cancelButtonText | 取消按钮的文本内容 | string | — | 取消 |

examples/docs/zh-cn/progress.md

@@ -58,7 +58,7 @@
 | **percentage** | **百分比（必填）**   | number          |     0-100          |     0    |
 | type          | 进度条类型           | string         | line/circle | line |
 | stroke-width  | 进度条的宽度，单位 px | number          | — | 6 |
-| text-inside  | 进度条显示文字内置在进度条内（只在 type=circle 时可用） | Boolean | — | false |
+| text-inside  | 进度条显示文字内置在进度条内（只在 type=line 时可用） | Boolean | — | false |
 | status  | 进度条当前状态 | string | success/exception | — |
 | width  | 环形进度条画布宽度（只在 type=circle 时可用） | number |  | 126 |
 | show-text  | 是否显示进度条文字内容 | boolean | — | true |

package.json

@@ -74,7 +74,7 @@
     "vue": "^2.0.1",
     "vue-loader": "^9.5.1",
     "vue-markdown-loader": "^0.5.1",
-    "vue-popup": "^0.2.5",
+    "vue-popup": "^0.2.6",
     "vue-router": "^2.0.0",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.15.1",

packages/dialog/package.json

@@ -12,6 +12,6 @@
   "author": "elemefe",
   "license": "MIT",
   "devDependencies": {
-    "vue-popup": "^0.2.5"
+    "vue-popup": "^0.2.6"
   }
 }

packages/dialog/src/component.vue

@@ -36,6 +36,11 @@
         default: true
       },
 
+      lockScroll: {
+        type: Boolean,
+        default: true
+      },
+
       closeOnClickModal: {
         type: Boolean,
         default: true

packages/message-box/package.json

@@ -12,6 +12,6 @@
   "author": "elemefe",
   "license": "MIT",
   "dependencies": {
-    "vue-popup": "^0.2.5"
+    "vue-popup": "^0.2.6"
   }
 }

packages/message-box/src/main.js

@@ -8,6 +8,7 @@ var defaults = {
   showInput: false,
   showClose: true,
   modalFade: true,
+  lockScroll: true,
   closeOnClickModal: true,
   inputValue: null,
   inputPlaceholder: '',

packages/message-box/src/main.vue

@@ -43,6 +43,9 @@
       modal: {
         default: true
       },
+      lockScroll: {
+        default: true
+      },
       showClose: {
         type: Boolean,
         default: true
@@ -79,14 +82,16 @@
 
         this.onClose && this.onClose();
 
-        setTimeout(() => {
-          if (this.modal && this.bodyOverflow !== 'hidden') {
-            document.body.style.overflow = this.bodyOverflow;
-            document.body.style.paddingRight = this.bodyPaddingRight;
-          }
-          this.bodyOverflow = null;
-          this.bodyPaddingRight = null;
-        }, 200);
+        if (this.lockScroll) {
+          setTimeout(() => {
+            if (this.modal && this.bodyOverflow !== 'hidden') {
+              document.body.style.overflow = this.bodyOverflow;
+              document.body.style.paddingRight = this.bodyPaddingRight;
+            }
+            this.bodyOverflow = null;
+            this.bodyPaddingRight = null;
+          }, 200);
+        }
         this.opened = false;
 
         if (!this.transition) {