From a4f1c721cac058a5dc1bb59c1dc21ee29a85afda Mon Sep 17 00:00:00 2001 From: JeremyWuuuuu <591449570@qq.com> Date: Thu, 8 Aug 2019 16:46:56 +0800 Subject: [PATCH] =?UTF-8?q?bugfix/drawer-append-to-body-not-working=20-=20?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BA=86=20AppendToBody=20API=20=E4=B8=8D?= =?UTF-8?q?=E7=AE=A1=E7=94=A8=E7=9A=84=E9=97=AE=E9=A2=98.=20-=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E4=BA=86=E5=B1=95=E5=BC=80=E5=8A=A8=E7=94=BB=E4=BC=9A?= =?UTF-8?q?=E5=87=BA=E7=8E=B0=E6=BB=9A=E5=8A=A8=E6=9D=A1=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98=20-=20=E6=96=B0=E5=A2=9E=E4=BA=86=E4=B8=80=E4=B8=AA?= =?UTF-8?q?=E6=96=B0=E7=9A=84=20API=20`withHeader`=20=E6=9D=A5=E6=8E=A7?= =?UTF-8?q?=E5=88=B6=E6=98=AF=E5=90=A6=E6=98=BE=E7=A4=BA=20Header=20?= =?UTF-8?q?=E6=A0=8F=20-=20=E5=8A=A8=E7=94=BB=E6=B5=81=E7=95=85=E5=BA=A6?= =?UTF-8?q?=E7=9A=84=E4=B8=80=E4=B8=AA=E5=B0=8F=E6=94=B9=E5=8A=A8=20-=20?= =?UTF-8?q?=E5=AF=B9=E5=BA=94=E6=96=87=E6=A1=A3=E7=9A=84=E6=94=B9=E5=8A=A8?= =?UTF-8?q?=20-=20=E5=AF=B9=E5=BA=94=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95?= =?UTF-8?q?=E7=9A=84=E6=94=B9=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/docs/en-US/drawer.md | 51 ++++++++++++++++++++++++--- examples/docs/es/drawer.md | 51 ++++++++++++++++++++++++--- 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, 261 insertions(+), 29 deletions(-) diff --git a/examples/docs/en-US/drawer.md b/examples/docs/en-US/drawer.md index d52ac42419f..7a246e31aa8 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 d52ac42419f..7a246e31aa8 100644 --- a/examples/docs/es/drawer.md +++ b/examples/docs/es/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/fr-FR/drawer.md b/examples/docs/fr-FR/drawer.md index d52ac42419f..7a246e31aa8 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 c211c7f159b..118a3a30e12 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">