mirror of https://github.com/ElemeFE/element
add lockScroll in msgbox and dialog
parent
73c50502f2
commit
b7208300a1
|
@ -6,6 +6,7 @@
|
||||||
|
|
||||||
- 修复 Tabs 切换后 Tab-panel 被销毁的问题
|
- 修复 Tabs 切换后 Tab-panel 被销毁的问题
|
||||||
- 修复 Table Cell 的样式, #204
|
- 修复 Table Cell 的样式, #204
|
||||||
|
- 为 Message Box 和 Dialog 添加 lockScroll 属性,用于定义是否在弹框出现时将 body 滚动锁定
|
||||||
|
|
||||||
### 1.0.0-rc.5
|
### 1.0.0-rc.5
|
||||||
|
|
||||||
|
|
|
@ -134,6 +134,7 @@ Dialog 组件的内容可以是任意的,甚至可以是表格或表单,下
|
||||||
| title | Dialog 的标题 | string | — | — |
|
| title | Dialog 的标题 | string | — | — |
|
||||||
| size | Dialog 的大小 | string | tiny/small/large/full | small |
|
| size | Dialog 的大小 | string | tiny/small/large/full | small |
|
||||||
| modal | 是否需要遮罩层 | boolean | — | true |
|
| modal | 是否需要遮罩层 | boolean | — | true |
|
||||||
|
| lockScroll | 是否在 Dialog 出现时将 body 滚动锁定 | boolean | — | true |
|
||||||
| custom-class | Dialog 的自定义类名 | string | — | — |
|
| custom-class | Dialog 的自定义类名 | string | — | — |
|
||||||
| close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean | — | true |
|
| close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean | — | true |
|
||||||
| close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean | — | true |
|
| close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean | — | true |
|
||||||
|
|
|
@ -214,6 +214,7 @@ import { MessageBox } from 'element-ui';
|
||||||
| title | MessageBox 标题 | string | — | — |
|
| title | MessageBox 标题 | string | — | — |
|
||||||
| message | MessageBox 消息正文内容 | string | — | — |
|
| message | MessageBox 消息正文内容 | string | — | — |
|
||||||
| type | 消息类型,用于显示图标 | string | success/info/<br>warning/error | — |
|
| type | 消息类型,用于显示图标 | string | success/info/<br>warning/error | — |
|
||||||
|
| lockScroll | 是否在 MessageBox 出现时将 body 滚动锁定 | boolean | — | true |
|
||||||
| showCancelButton | 是否显示取消按钮 | boolean | — | false(以 confirm 和 prompt 方式调用时为 true) |
|
| showCancelButton | 是否显示取消按钮 | boolean | — | false(以 confirm 和 prompt 方式调用时为 true) |
|
||||||
| showConfirmButton | 是否显示确定按钮 | boolean | — | true |
|
| showConfirmButton | 是否显示确定按钮 | boolean | — | true |
|
||||||
| cancelButtonText | 取消按钮的文本内容 | string | — | 取消 |
|
| cancelButtonText | 取消按钮的文本内容 | string | — | 取消 |
|
||||||
|
|
|
@ -58,7 +58,7 @@
|
||||||
| **percentage** | **百分比(必填)** | number | 0-100 | 0 |
|
| **percentage** | **百分比(必填)** | number | 0-100 | 0 |
|
||||||
| type | 进度条类型 | string | line/circle | line |
|
| type | 进度条类型 | string | line/circle | line |
|
||||||
| stroke-width | 进度条的宽度,单位 px | number | — | 6 |
|
| stroke-width | 进度条的宽度,单位 px | number | — | 6 |
|
||||||
| text-inside | 进度条显示文字内置在进度条内(只在 type=circle 时可用) | Boolean | — | false |
|
| text-inside | 进度条显示文字内置在进度条内(只在 type=line 时可用) | Boolean | — | false |
|
||||||
| status | 进度条当前状态 | string | success/exception | — |
|
| status | 进度条当前状态 | string | success/exception | — |
|
||||||
| width | 环形进度条画布宽度(只在 type=circle 时可用) | number | | 126 |
|
| width | 环形进度条画布宽度(只在 type=circle 时可用) | number | | 126 |
|
||||||
| show-text | 是否显示进度条文字内容 | boolean | — | true |
|
| show-text | 是否显示进度条文字内容 | boolean | — | true |
|
||||||
|
|
|
@ -74,7 +74,7 @@
|
||||||
"vue": "^2.0.1",
|
"vue": "^2.0.1",
|
||||||
"vue-loader": "^9.5.1",
|
"vue-loader": "^9.5.1",
|
||||||
"vue-markdown-loader": "^0.5.1",
|
"vue-markdown-loader": "^0.5.1",
|
||||||
"vue-popup": "^0.2.5",
|
"vue-popup": "^0.2.6",
|
||||||
"vue-router": "^2.0.0",
|
"vue-router": "^2.0.0",
|
||||||
"webpack": "^1.13.2",
|
"webpack": "^1.13.2",
|
||||||
"webpack-dev-server": "^1.15.1",
|
"webpack-dev-server": "^1.15.1",
|
||||||
|
|
|
@ -12,6 +12,6 @@
|
||||||
"author": "elemefe",
|
"author": "elemefe",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"vue-popup": "^0.2.5"
|
"vue-popup": "^0.2.6"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -36,6 +36,11 @@
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
|
|
||||||
|
lockScroll: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
|
||||||
closeOnClickModal: {
|
closeOnClickModal: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
|
|
|
@ -12,6 +12,6 @@
|
||||||
"author": "elemefe",
|
"author": "elemefe",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"vue-popup": "^0.2.5"
|
"vue-popup": "^0.2.6"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,6 +8,7 @@ var defaults = {
|
||||||
showInput: false,
|
showInput: false,
|
||||||
showClose: true,
|
showClose: true,
|
||||||
modalFade: true,
|
modalFade: true,
|
||||||
|
lockScroll: true,
|
||||||
closeOnClickModal: true,
|
closeOnClickModal: true,
|
||||||
inputValue: null,
|
inputValue: null,
|
||||||
inputPlaceholder: '',
|
inputPlaceholder: '',
|
||||||
|
|
|
@ -43,6 +43,9 @@
|
||||||
modal: {
|
modal: {
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
|
lockScroll: {
|
||||||
|
default: true
|
||||||
|
},
|
||||||
showClose: {
|
showClose: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
|
@ -79,6 +82,7 @@
|
||||||
|
|
||||||
this.onClose && this.onClose();
|
this.onClose && this.onClose();
|
||||||
|
|
||||||
|
if (this.lockScroll) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (this.modal && this.bodyOverflow !== 'hidden') {
|
if (this.modal && this.bodyOverflow !== 'hidden') {
|
||||||
document.body.style.overflow = this.bodyOverflow;
|
document.body.style.overflow = this.bodyOverflow;
|
||||||
|
@ -87,6 +91,7 @@
|
||||||
this.bodyOverflow = null;
|
this.bodyOverflow = null;
|
||||||
this.bodyPaddingRight = null;
|
this.bodyPaddingRight = null;
|
||||||
}, 200);
|
}, 200);
|
||||||
|
}
|
||||||
this.opened = false;
|
this.opened = false;
|
||||||
|
|
||||||
if (!this.transition) {
|
if (!this.transition) {
|
||||||
|
|
Loading…
Reference in New Issue