From 068b3ad1b0f76233f84ae8fdceecc1dd10c1f25e Mon Sep 17 00:00:00 2001 From: jeremywu <591449570@qq.com> Date: Fri, 1 Nov 2019 15:06:56 +0800 Subject: [PATCH] Drawer: bugfix/drawer-append-to-body-not-working (#16953) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修复了 AppendToBody API 不管用的问题. - 修复了展开动画会出现滚动条的问题 - 新增了一个新的 API `withHeader` 来控制是否显示 Header 栏 - 动画流畅度的一个小改动 - 对应文档的改动 - 对应单元测试的改动 --- examples/docs/en-US/drawer.md | 51 +++++++++++++++++++++++--- examples/docs/es/drawer.md | 53 +++++++++++++++++++++++++--- examples/docs/fr-FR/drawer.md | 51 +++++++++++++++++++++++--- examples/docs/zh-CN/drawer.md | 52 ++++++++++++++++++++++++--- packages/drawer/src/main.vue | 49 ++++++++++++++++++++----- packages/theme-chalk/src/drawer.scss | 18 +++++++--- test/unit/specs/drawer.spec.js | 18 ++++++++++ 7 files changed, 262 insertions(+), 30 deletions(-) diff --git a/examples/docs/en-US/drawer.md b/examples/docs/en-US/drawer.md index b31bf988d07..7e99cdd7807 100644 --- a/examples/docs/en-US/drawer.md +++ b/examples/docs/en-US/drawer.md @@ -50,6 +50,36 @@ Callout a temporary drawer, from multiple direction ``` ::: +### No Title + +When you no longer need a title, you can remove title from drawer. + +:::demo Set the `withHeader` attribute to **false**, you can remove the title from drawer, thus your drawer can have more space on screen. If you want to be accessible, make sure to set the `title` attribute. + +```html + + open + + + + Hi there! + + + +``` +::: + ### Customization Content Like `Dialog`, `Drawer` can do many diverse interaction as you wanted. @@ -92,7 +122,7 @@ Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
- Cancel + Cancel {{ loading ? 'Submitting ...' : 'Submit' }}
@@ -132,20 +162,32 @@ export default { resource: '', desc: '' }, - formLabelWidth: '80px' + formLabelWidth: '80px', + timer: null, }; }, methods: { handleClose(done) { + if (this.loading) { + return; + } this.$confirm('Do you want to submit?') .then(_ => { this.loading = true; - setTimeout(() => { - this.loading = false; + this.timer = setTimeout(() => { done(); + // animation takes time + setTimeout(() => { + this.loading = false; + }, 400); }, 2000); }) .catch(_ => {}); + }, + cancelForm() { + this.loading = false; + this.dialog = false; + clearTimeout(this.timer); } } } @@ -238,6 +280,7 @@ If the variable bound to `visible` is managed in Vuex store, the `.sync` can not | title | Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form | string | — | — | | visible | Should Drawer be displayed, also support the `.sync` notation | boolean | — | false | | wrapperClosable | Indicates whether user can close Drawer by clicking the shadowing layer. | boolean | - | true | +| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true | ### Drawer Slot diff --git a/examples/docs/es/drawer.md b/examples/docs/es/drawer.md index 143c536acba..cd4b0ff5698 100644 --- a/examples/docs/es/drawer.md +++ b/examples/docs/es/drawer.md @@ -50,7 +50,37 @@ Llamada de un drawer temporal, desde varias direcciones ``` ::: -### Personalizar el contenido +### No Title + +When you no longer need a title, you can remove title from drawer. + +:::demo Set the `withHeader` attribute to **false**, you can remove the title from drawer, thus your drawer can have more space on screen. If you want to be accessible, make sure to set the `title` attribute. + +```html + + open + + + + Hi there! + + + +``` +::: + +### Personalizar el contenido Al igual que `Dialog`, `Drawer` puede hacer muchas interacciones diversas. @@ -92,7 +122,7 @@ Al igual que `Dialog`, `Drawer` puede hacer muchas interacciones diversas.
- Cancel + Cancel {{ loading ? 'Submitting ...' : 'Submit' }}
@@ -132,20 +162,32 @@ export default { resource: '', desc: '' }, - formLabelWidth: '80px' + formLabelWidth: '80px', + timer: null, }; }, methods: { handleClose(done) { + if (this.loading) { + return; + } this.$confirm('Do you want to submit?') .then(_ => { this.loading = true; - setTimeout(() => { - this.loading = false; + this.timer = setTimeout(() => { done(); + // animation takes time + setTimeout(() => { + this.loading = false; + }, 400); }, 2000); }) .catch(_ => {}); + }, + cancelForm() { + this.loading = false; + this.dialog = false; + clearTimeout(this.timer); } } } @@ -238,6 +280,7 @@ Si la variable `visible` se gestiona en el almacén de Vuex, el `.sync` no puede | title | El título del Drawer, también se puede establecer por slot con nombre, las descripciones detalladas se pueden encontrar en el formulario de slot. | string | — | — | | visible | Si se muestra el Drawer, también soporta la notación `.sync` | boolean | — | false | | wrapperClosable | Indica si el usuario puede cerrar el Drawer haciendo clic en la capa de sombreado. | boolean | - | true | +| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true | ### Drawer Slot's diff --git a/examples/docs/fr-FR/drawer.md b/examples/docs/fr-FR/drawer.md index b31bf988d07..7e99cdd7807 100644 --- a/examples/docs/fr-FR/drawer.md +++ b/examples/docs/fr-FR/drawer.md @@ -50,6 +50,36 @@ Callout a temporary drawer, from multiple direction ``` ::: +### No Title + +When you no longer need a title, you can remove title from drawer. + +:::demo Set the `withHeader` attribute to **false**, you can remove the title from drawer, thus your drawer can have more space on screen. If you want to be accessible, make sure to set the `title` attribute. + +```html + + open + + + + Hi there! + + + +``` +::: + ### Customization Content Like `Dialog`, `Drawer` can do many diverse interaction as you wanted. @@ -92,7 +122,7 @@ Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
- Cancel + Cancel {{ loading ? 'Submitting ...' : 'Submit' }}
@@ -132,20 +162,32 @@ export default { resource: '', desc: '' }, - formLabelWidth: '80px' + formLabelWidth: '80px', + timer: null, }; }, methods: { handleClose(done) { + if (this.loading) { + return; + } this.$confirm('Do you want to submit?') .then(_ => { this.loading = true; - setTimeout(() => { - this.loading = false; + this.timer = setTimeout(() => { done(); + // animation takes time + setTimeout(() => { + this.loading = false; + }, 400); }, 2000); }) .catch(_ => {}); + }, + cancelForm() { + this.loading = false; + this.dialog = false; + clearTimeout(this.timer); } } } @@ -238,6 +280,7 @@ If the variable bound to `visible` is managed in Vuex store, the `.sync` can not | title | Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form | string | — | — | | visible | Should Drawer be displayed, also support the `.sync` notation | boolean | — | false | | wrapperClosable | Indicates whether user can close Drawer by clicking the shadowing layer. | boolean | - | true | +| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true | ### Drawer Slot diff --git a/examples/docs/zh-CN/drawer.md b/examples/docs/zh-CN/drawer.md index 37359311279..2b6c53a212d 100644 --- a/examples/docs/zh-CN/drawer.md +++ b/examples/docs/zh-CN/drawer.md @@ -50,6 +50,37 @@ ``` ::: +### 不添加 Title + +当你不需要标题到时候, 你还可以去掉标题 + +:::demo 当遇到不需要 title 的场景时, 可以通过 `withHeader` 这个属性来关闭掉 title 的显示, 这样可以留出更大的空间给到用户, 为了用户的可访问性, 请务必设定 `title` 的值 + +```html + + 点我打开 + + + + 我来啦! + + + +``` +::: + + ### 自定义内容 和 `Dialog` 组件一样, `Drawer` 同样可以在其内部嵌套各种丰富的操作 @@ -92,7 +123,7 @@
- 取 消 + 取 消 {{ loading ? '提交中 ...' : '确 定' }}
@@ -132,20 +163,32 @@ export default { resource: '', desc: '' }, - formLabelWidth: '80px' + formLabelWidth: '80px', + timer: null, }; }, methods: { handleClose(done) { + if (this.loading) { + return; + } this.$confirm('确定要提交表单吗？') .then(_ => { this.loading = true; - setTimeout(() => { - this.loading = false; + this.timer = setTimeout(() => { done(); + // 动画关闭需要一定的时间 + setTimeout(() => { + this.loading = false; + }, 400); }, 2000); }) .catch(_ => {}); + }, + cancelForm() { + this.loading = false; + this.dialog = false; + clearTimeout(this.timer); } } } @@ -239,6 +282,7 @@ Drawer 提供一个 `destroyOnClose` API, 用来在关闭 Drawer 时销毁子组 | title | Drawer 的标题，也可通过具名 slot （见下表）传入 | string | — | — | | visible | 是否显示 Drawer，支持 .sync 修饰符 | boolean | — | false | | wrapperClosable | 点击遮罩层是否可以关闭 Drawer | boolean | - | true | +| withHeader | 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效 | boolean | - | true | ### Drawer Slot diff --git a/packages/drawer/src/main.vue b/packages/drawer/src/main.vue index e8957388138..a378194df3a 100644 --- a/packages/drawer/src/main.vue +++ b/packages/drawer/src/main.vue @@ -4,8 +4,8 @@ @after-enter="afterEnter" @after-leave="afterLeave">