diff --git a/CHANGELOG.md b/CHANGELOG.md index 1cb072626..4e4028c51 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ - 修复 Tabs 切换后 Tab-panel 被销毁的问题 - 修复 Table Cell 的样式, #204 +- 为 Message Box 和 Dialog 添加 lockScroll 属性,用于定义是否在弹框出现时将 body 滚动锁定 ### 1.0.0-rc.5 diff --git a/examples/docs/zh-cn/dialog.md b/examples/docs/zh-cn/dialog.md index 58d2a6937..4e18f84ea 100644 --- a/examples/docs/zh-cn/dialog.md +++ b/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 | diff --git a/examples/docs/zh-cn/message-box.md b/examples/docs/zh-cn/message-box.md index 3d3297ece..b5439b41e 100644 --- a/examples/docs/zh-cn/message-box.md +++ b/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 | — | 取消 | diff --git a/examples/docs/zh-cn/progress.md b/examples/docs/zh-cn/progress.md index 842d56234..ed9ab55ef 100644 --- a/examples/docs/zh-cn/progress.md +++ b/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 | diff --git a/package.json b/package.json index cf4a07485..90e21f918 100644 --- a/package.json +++ b/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", diff --git a/packages/dialog/package.json b/packages/dialog/package.json index 0a61df385..be3b98c41 100644 --- a/packages/dialog/package.json +++ b/packages/dialog/package.json @@ -12,6 +12,6 @@ "author": "elemefe", "license": "MIT", "devDependencies": { - "vue-popup": "^0.2.5" + "vue-popup": "^0.2.6" } } diff --git a/packages/dialog/src/component.vue b/packages/dialog/src/component.vue index bf7f419d0..b718f1671 100644 --- a/packages/dialog/src/component.vue +++ b/packages/dialog/src/component.vue @@ -36,6 +36,11 @@ default: true }, + lockScroll: { + type: Boolean, + default: true + }, + closeOnClickModal: { type: Boolean, default: true diff --git a/packages/message-box/package.json b/packages/message-box/package.json index 10ec25e40..3b561b6af 100644 --- a/packages/message-box/package.json +++ b/packages/message-box/package.json @@ -12,6 +12,6 @@ "author": "elemefe", "license": "MIT", "dependencies": { - "vue-popup": "^0.2.5" + "vue-popup": "^0.2.6" } } diff --git a/packages/message-box/src/main.js b/packages/message-box/src/main.js index f9b3dc4f2..b4459034a 100644 --- a/packages/message-box/src/main.js +++ b/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: '', diff --git a/packages/message-box/src/main.vue b/packages/message-box/src/main.vue index 5f60fec68..e9d1548db 100644 --- a/packages/message-box/src/main.vue +++ b/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) {