Skip to content

E
Element
Commit 068b3ad1 authored by jeremywu's avatar jeremywu Committed by Zhi Cun
Browse files
Options

Drawer: bugfix/drawer-append-to-body-not-working (#16953) 

- 修复了 AppendToBody API 不管用的问题.
- 修复了展开动画会出现滚动条的问题
- 新增了一个新的 API `withHeader` 来控制是否显示 Header 栏
- 动画流畅度的一个小改动
- 对应文档的改动
- 对应单元测试的改动
parent 7bf3924b
Hide whitespace changes
Inline Side-by-side
Showing with 262 additions and 30 deletions
examples/docs/en-US/drawer.md
View file @ 068b3ad1
......@@ -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
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<el-drawer
title="I am the title"
:visible.sync="drawer"
:with-header="false">
<span>Hi there!</span>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
};
}
};
</script>
```
:::
### 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.
</el-form-item>
</el-form>
<div class="demo-drawer__footer">
<el-button @click="dialog = false">Cancel</el-button>
<el-button @click="cancelForm">Cancel</el-button>
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>
</div>
</div>
......@@ -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
......
examples/docs/es/drawer.md
View file @ 068b3ad1
......@@ -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
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<el-drawer
title="I am the title"
:visible.sync="drawer"
:with-header="false">
<span>Hi there!</span>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
};
}
};
</script>
```
:::
### 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.
</el-form-item>
</el-form>
<div class="demo-drawer__footer">
<el-button @click="dialog = false">Cancel</el-button>
<el-button @click="cancelForm">Cancel</el-button>
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>
</div>
</div>
......@@ -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
......
examples/docs/fr-FR/drawer.md
View file @ 068b3ad1
......@@ -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
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<el-drawer
title="I am the title"
:visible.sync="drawer"
:with-header="false">
<span>Hi there!</span>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
};
}
};
</script>
```
:::
### 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.
</el-form-item>
</el-form>
<div class="demo-drawer__footer">
<el-button @click="dialog = false">Cancel</el-button>
<el-button @click="cancelForm">Cancel</el-button>
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>
</div>
</div>
......@@ -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
......
examples/docs/zh-CN/drawer.md
View file @ 068b3ad1
......@@ -50,6 +50,37 @@
```
:::
### 不添加 Title
当你不需要标题到时候, 你还可以去掉标题
:::demo 当遇到不需要 title 的场景时, 可以通过 `withHeader` 这个属性来关闭掉 title 的显示, 这样可以留出更大的空间给到用户, 为了用户的可访问性, 请务必设定 `title` 的值
```html
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
点我打开
</el-button>
<el-drawer
title="我是标题"
:visible.sync="drawer"
:with-header="false">
<span>我来啦!</span>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
};
}
};
</script>
```
:::
### 自定义内容
和 `Dialog` 组件一样, `Drawer` 同样可以在其内部嵌套各种丰富的操作
......@@ -92,7 +123,7 @@
</el-form-item>
</el-form>
<div class="demo-drawer__footer">
<el-button @click="dialog = false">取 消</el-button>
<el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
</div>
</div>
......@@ -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
......
packages/drawer/src/main.vue
View file @ 068b3ad1
......@@ -4,8 +4,8 @@
@after-enter="afterEnter"
@after-leave="afterLeave">
<div
class="el-dialog__wrapper"
role="presentation"
class="el-drawer__wrapper"
tabindex="-1"
v-show="visible">
<div
class="el-drawer__container"
......@@ -16,14 +16,17 @@
<div
aria-modal="true"
aria-labelledby="el-drawer__title"
:aria-label="title"
class="el-drawer"
:class="[direction, customClass]"
:style="isHorizontal ? `width: ${size}` : `height: ${size}`"
ref="drawer"
role="presentation">
<header class="el-drawer__header" id="el-drawer__title">
role="dialog"
tabindex="-1"
>
<header class="el-drawer__header" id="el-drawer__title" v-if="withHeader">
<slot name="title">
<span role="heading">{{ title }}</span>
<span role="heading" tabindex="0" :title="title">{{ title }}</span>
</slot>
<button
:aria-label="`close ${title || 'drawer'}`"
......@@ -45,16 +48,16 @@
<script>
import Popup from 'element-ui/src/utils/popup';
import Migrating from 'element-ui/src/mixins/migrating';
import emitter from 'element-ui/src/mixins/emitter';
import Utils from 'element-ui/src/utils/aria-utils';
export default {
name: 'ElDrawer',
mixins: [Popup, emitter, Migrating],
mixins: [Popup, emitter],
props: {
appendToBody: {
type: Boolean,
default: true
default: false
},
beforeClose: {
type: Function
......@@ -63,6 +66,10 @@ export default {
type: String,
default: ''
},
closeOnPressEscape: {
type: Boolean,
default: true
},
destroyOnClose: {
type: Boolean,
default: false
......@@ -78,6 +85,10 @@ export default {
return ['ltr', 'rtl', 'ttb', 'btt'].indexOf(val) !== -1;
}
},
modalAppendToBody: {
type: Boolean,
default: true
},
showClose: {
type: Boolean,
default: true
......@@ -96,6 +107,10 @@ export default {
wrapperClosable: {
type: Boolean,
default: true
},
withHeader: {
type: Boolean,
default: true
}
},
computed: {
......@@ -105,7 +120,8 @@ export default {
},
data() {
return {
closed: false
closed: false,
prevActiveElement: null
};
},
watch: {
......@@ -116,8 +132,17 @@ export default {
if (this.appendToBody) {
document.body.appendChild(this.$el);
}
this.prevActiveElement = document.activeElement;
this.$nextTick(() => {
Utils.focusFirstDescendant(this.$refs.drawer);
});
} else {
if (!this.closed) this.$emit('close');
this.$nextTick(() => {
if (this.prevActiveElement) {
this.prevActiveElement.focus();
}
});
}
}
},
......@@ -149,6 +174,12 @@ export default {
} else {
this.hide();
}
},
handleClose() {
// This method here will be called by PopupManger, when the `closeOnPressEscape` was set to true
// pressing `ESC` will call this method, and also close the drawer.
// This method also calls `beforeClose` if there was one.
this.closeDrawer();
}
},
mounted() {
......
packages/theme-chalk/src/drawer.scss
View file @ 068b3ad1
......@@ -92,13 +92,13 @@
@mixin animation-in($direction) {
.el-drawer__open &.#{$direction} {
animation: #{$direction}-drawer-in 225ms cubic-bezier(0, 0, .2, 1) 0ms;
animation: #{$direction}-drawer-in .3s 1ms;
}
}
@mixin animation-out($direction) {
&.#{$direction} {
animation: #{$direction}-drawer-out 225ms cubic-bezier(0, 0, .2, 1) 0ms;
animation: #{$direction}-drawer-out .3s;
}
}
......@@ -125,6 +125,16 @@ $directions: rtl, ltr, ttb, btt;
@include animation-in($direction);
}
&__wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
margin: 0;
}
&__header {
align-items: center;
color: rgb(114, 118, 123);
......@@ -199,9 +209,9 @@ $directions: rtl, ltr, ttb, btt;
}
.el-drawer-fade-enter-active {
animation: el-drawer-fade-in 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
animation: el-drawer-fade-in .3s;
}
.el-drawer-fade-leave-active {
animation: el-drawer-fade-in 225ms cubic-bezier(0, 0, 0.2, 1) 0ms reverse;
animation: el-drawer-fade-in .3s reverse;
}
test/unit/specs/drawer.spec.js
View file @ 068b3ad1
......@@ -218,6 +218,24 @@ describe('Drawer', () => {
expect(vm.$el.querySelector(`.${classes}`)).to.exist;
});
it('should not render header when withHeader attribute is false', () => {
vm = createVue({
template: `
<el-drawer :title='title' :visible='visible' ref='drawer' :with-header='false'>
<span>${content}</span>
</el-drawer>
`,
data() {
return {
title,
visible: true
};
}
});
expect(vm.$el.querySelector('.el-drawer__header')).to.not.exist;
});
describe('directions', () => {
const renderer = direction => {
return createVue({
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment