Skip to content

E
Element
Commit 9617e934 authored by jeremywu's avatar jeremywu Committed by iamkun
Browse files
Options

Drawer: Add drawer component (#16577)

parent 2c7911e5
Hide whitespace changes
Inline Side-by-side
Showing with 1875 additions and 2 deletions
components.json
View file @ 9617e934
......@@ -78,5 +78,6 @@
"infinite-scroll": "./packages/infinite-scroll/index.js",
"page-header": "./packages/page-header/index.js",
"cascader-panel": "./packages/cascader-panel/index.js",
"avatar": "./packages/avatar/index.js"
"avatar": "./packages/avatar/index.js",
"drawer": "./packages/drawer/index.js"
}
examples/demo-styles/drawer.scss 0 → 100644
View file @ 9617e934
.demo-drawer {
&__content {
display: flex;
flex-direction: column;
height: 100%;
form {
flex: 1;
}
}
&__footer {
display: flex;
button {
flex: 1;
}
}
}
.el-drawer__body {
padding: 20px;
}
examples/demo-styles/index.scss
View file @ 9617e934
......@@ -43,4 +43,5 @@
@import "./image.scss";
@import "./infinite-scroll.scss";
@import "./avatar.scss";
@import "./drawer.scss";
examples/docs/en-US/drawer.md 0 → 100644
View file @ 9617e934
## Drawer
Sometimes, `Dialog` does not always satisfy our requirements, let's say you have a massive form, or you need space to display something like `terms & conditions`, `Drawer` has almost identical API with `Dialog`, but it introduces different user experience.
### Basic Usage
Callout a temporary drawer, from multiple direction
:::demo You must set `visible` for `Drawer` like `Dialog` does to control the visibility of `Drawer` itself, it's `boolean` type. `Drawer` has to parts: `title` & `body`, the `title` is a named slot, you can also set the title through attribute named `title`, default to an empty string, the `body` part is the main area of `Drawer`, which contains user defined content. When opening, `Drawer` expand itself from the **right corner to left** which size is **30%** of the browser window by default. You can change that default behavior by setting `direction` and `size` attribute. This show case also demonstrated how to use the `before-close` API, check the Attribute section for more detail
```html
<el-radio-group v-model="direction">
<el-radio label="ltr">left to right</el-radio>
<el-radio label="rtl">right to left</el-radio>
<el-radio label="ttb">top to bottom</el-radio>
<el-radio label="btt">bottom to top</el-radio>
</el-radio-group>
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<el-drawer
title="I am the title"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose">
<span>Hi, there!</span>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
direction: 'rtl',
};
},
methods: {
handleClose(done) {
this.$confirm('Are you sure you want to close this?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
```
:::
### Customization Content
Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
:::demo
```html
<el-button type="text" @click="table = true">Open Drawer with nested table</el-button>
<el-button type="text" @click="dialog = true">Open Drawer with nested form</el-button>
<el-drawer
title="I have a nested table inside!"
:visible.sync="table"
direction="rtl"
size="50%">
<el-table :data="gridData">
<el-table-column property="date" label="Date" width="150"></el-table-column>
<el-table-column property="name" label="Name" width="200"></el-table-column>
<el-table-column property="address" label="Address"></el-table-column>
</el-table>
</el-drawer>
<el-drawer
title="I have a nested form inside!"
:before-close="handleClose"
:visible.sync="dialog"
direction="ltr"
custom-class="demo-drawer"
ref="drawer"
>
<div class="demo-drawer__content">
<el-form :model="form">
<el-form-item label="Name" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="Area" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="Please select activity area">
<el-option label="Area1" value="shanghai"></el-option>
<el-option label="Area2" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div class="demo-drawer__footer">
<el-button @click="dialog = false">Cancel</el-button>
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>
</div>
</div>
</el-drawer>
<script>
export default {
data() {
return {
table: false,
dialog: false,
loading: false,
gridData: [{
date: '2016-05-02',
name: 'Peter Parker',
address: 'Queens, New York City'
}, {
date: '2016-05-04',
name: 'Peter Parker',
address: 'Queens, New York City'
}, {
date: '2016-05-01',
name: 'Peter Parker',
address: 'Queens, New York City'
}, {
date: '2016-05-03',
name: 'Peter Parker',
address: 'Queens, New York City'
}],
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '80px'
};
},
methods: {
handleClose(done) {
this.$confirm('Do you want to submit?')
.then(_ => {
this.loading = true;
setTimeout(() => {
this.loading = false;
done();
}, 2000);
})
.catch(_ => {});
}
}
}
</script>
```
:::
### Nested Drawer
You can also have multiple layer of `Drawer` just like `Dialog`.
:::demo If you need multiple Drawer in different layer, you must set the `append-to-body` attribute to **true**
```html
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<el-drawer
title="I'm outer Drawer"
:visible.sync="drawer"
size="50%">
<div>
<el-button @click="innerDrawer = true">Click me!</el-button>
<el-drawer
title="I'm inner Drawer"
:append-to-body="true"
:before-close="handleClose"
:visible.sync="innerDrawer">
<p>_(:зゝ∠)_</p>
</el-drawer>
</div>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
innerDrawer: false,
};
},
methods: {
handleClose(done) {
this.$confirm('You still have unsaved data, proceed?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
```
:::
:::tip
The content inside Drawer should be lazy rendered, which means that the content inside Drawer will not impact the initial render performance, therefore any DOM operation should be performed through `ref` or after `open` event emitted.
:::
:::tip
Drawer provides an API called `destroyOnClose`, which is a flag variable that indicates should destroy the children content inside Drawer after Drawer was closed. You can use this API when you need your `mounted` life cycle to be called every time the Drawer opens.
:::
:::tip
If the variable bound to `visible` is managed in Vuex store, the `.sync` can not work properly. In this case, please remove the `.sync` modifier, listen to `open` and `close` events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.
:::
### Drawer Attributes
| Parameter| Description | Type | Acceptable Values | Defaults |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| append-to-body | Controls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to **true**| boolean | — | false |
| before-close | If set, closing procedure will be halted | function(done), done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure | — | — |
| close-on-press-escape | Indicates whether Drawer can be closed by pressing ESC | boolean | — | true |
| custom-class | Extra class names for Drawer | string | — | — |
| destroy-on-close | Indicates whether children should be destroyed after Drawer closed | boolean | - | false |
| modal | Should show shadowing layer | boolean | — | true |
| modal-append-to-body | Indicates should shadowing layer be insert into DocumentBody element | boolean | — | true |
| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / tbb | rtl |
| show-close | Should show close button at the top right of Drawer | boolean | — | true |
| size | Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is `number` type, it describes the size by unit of pixels; when size is `string` type, it should be used with `x%` notation, other wise it will be interpreted to pixel unit | number / string | - | '30%' |
| 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 |
### Drawer Slot
| Name | Description |
|------|--------|
| — | Drawer's Content |
| title | Drawer Title Section |
### Drawer Methods
| Name | Description |
| ---- | --- |
| closeDrawer | In order to close Drawer, this method will call `before-close`. |
### Drawer Events
| Event Name | Description | Parameter |
|---------- |-------- |---------- |
| open | Triggered before Drawer opening animation begins | — |
| opened | Triggered after Drawer opening animation ended | — |
| close | Triggered before Drawer closing animation begins | — |
| closed | Triggered after Drawer closing animation ended | — |
examples/docs/es/drawer.md 0 → 100644
View file @ 9617e934
## Drawer
Sometimes, `Dialog` does not always satisfy our requirements, let's say you have a massive form, or you need space to display something like `terms & conditions`, `Drawer` has almost identical API with `Dialog`, but it introduces different user experience.
### Basic Usage
Callout a temporary drawer, from multiple direction
:::demo You must set `visible` for `Drawer` like `Dialog` does to control the visibility of `Drawer` itself, it's `boolean` type. `Drawer` has to parts: `title` & `body`, the `title` is a named slot, you can also set the title through attribute named `title`, default to an empty string, the `body` part is the main area of `Drawer`, which contains user defined content. When opening, `Drawer` expand itself from the **right corner to left** which size is **30%** of the browser window by default. You can change that default behavior by setting `direction` and `size` attribute. This show case also demonstrated how to use the `before-close` API, check the Attribute section for more detail
```html
<el-radio-group v-model="direction">
<el-radio label="ltr">left to right</el-radio>
<el-radio label="rtl">right to left</el-radio>
<el-radio label="ttb">top to bottom</el-radio>
<el-radio label="btt">bottom to top</el-radio>
</el-radio-group>
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<el-drawer
title="I am the title"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose">
<span>Hi, there!</span>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
direction: 'rtl',
};
},
methods: {
handleClose(done) {
this.$confirm('Are you sure you want to close this?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
```
:::
### Customization Content
Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
:::demo
```html
<el-button type="text" @click="table = true">Open Drawer with nested table</el-button>
<el-button type="text" @click="dialog = true">Open Drawer with nested form</el-button>
<el-drawer
title="I have a nested table inside!"
:visible.sync="table"
direction="rtl"
size="50%">
<el-table :data="gridData">
<el-table-column property="date" label="Date" width="150"></el-table-column>
<el-table-column property="name" label="Name" width="200"></el-table-column>
<el-table-column property="address" label="Address"></el-table-column>
</el-table>
</el-drawer>
<el-drawer
title="I have a nested form inside!"
:before-close="handleClose"
:visible.sync="dialog"
direction="ltr"
custom-class="demo-drawer"
ref="drawer"
>
<div class="demo-drawer__content">
<el-form :model="form">
<el-form-item label="Name" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="Area" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="Please select activity area">
<el-option label="Area1" value="shanghai"></el-option>
<el-option label="Area2" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div class="demo-drawer__footer">
<el-button @click="dialog = false">Cancel</el-button>
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>
</div>
</div>
</el-drawer>
<script>
export default {
data() {
return {
table: false,
dialog: false,
loading: false,
gridData: [{
date: '2016-05-02',
name: 'Peter Parker',
address: 'Queens, New York City'
}, {
date: '2016-05-04',
name: 'Peter Parker',
address: 'Queens, New York City'
}, {
date: '2016-05-01',
name: 'Peter Parker',
address: 'Queens, New York City'
}, {
date: '2016-05-03',
name: 'Peter Parker',
address: 'Queens, New York City'
}],
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '80px'
};
},
methods: {
handleClose(done) {
this.$confirm('Do you want to submit?')
.then(_ => {
this.loading = true;
setTimeout(() => {
this.loading = false;
done();
}, 2000);
})
.catch(_ => {});
}
}
}
</script>
```
:::
### Nested Drawer
You can also have multiple layer of `Drawer` just like `Dialog`.
:::demo If you need multiple Drawer in different layer, you must set the `append-to-body` attribute to **true**
```html
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<el-drawer
title="I'm outer Drawer"
:visible.sync="drawer"
size="50%">
<div>
<el-button @click="innerDrawer = true">Click me!</el-button>
<el-drawer
title="I'm inner Drawer"
:append-to-body="true"
:before-close="handleClose"
:visible.sync="innerDrawer">
<p>_(:зゝ∠)_</p>
</el-drawer>
</div>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
innerDrawer: false,
};
},
methods: {
handleClose(done) {
this.$confirm('You still have unsaved data, proceed?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
```
:::
:::tip
The content inside Drawer should be lazy rendered, which means that the content inside Drawer will not impact the initial render performance, therefore any DOM operation should be performed through `ref` or after `open` event emitted.
:::
:::tip
Drawer provides an API called `destroyOnClose`, which is a flag variable that indicates should destroy the children content inside Drawer after Drawer was closed. You can use this API when you need your `mounted` life cycle to be called every time the Drawer opens.
:::
:::tip
If the variable bound to `visible` is managed in Vuex store, the `.sync` can not work properly. In this case, please remove the `.sync` modifier, listen to `open` and `close` events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.
:::
### Drawer Attributes
| Parameter| Description | Type | Acceptable Values | Defaults |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| append-to-body | Controls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to **true**| boolean | — | false |
| before-close | If set, closing procedure will be halted | function(done), done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure | — | — |
| close-on-press-escape | Indicates whether Drawer can be closed by pressing ESC | boolean | — | true |
| custom-class | Extra class names for Drawer | string | — | — |
| destroy-on-close | Indicates whether children should be destroyed after Drawer closed | boolean | - | false |
| modal | Should show shadowing layer | boolean | — | true |
| modal-append-to-body | Indicates should shadowing layer be insert into DocumentBody element | boolean | — | true |
| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / tbb | rtl |
| show-close | Should show close button at the top right of Drawer | boolean | — | true |
| size | Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is `number` type, it describes the size by unit of pixels; when size is `string` type, it should be used with `x%` notation, other wise it will be interpreted to pixel unit | number / string | - | '30%' |
| 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 |
### Drawer Slot
| Name | Description |
|------|--------|
| — | Drawer's Content |
| title | Drawer Title Section |
### Drawer Methods
| Name | Description |
| ---- | --- |
| closeDrawer | In order to close Drawer, this method will call `before-close`. |
### Drawer Events
| Event Name | Description | Parameter |
|---------- |-------- |---------- |
| open | Triggered before Drawer opening animation begins | — |
| opened | Triggered after Drawer opening animation ended | — |
| close | Triggered before Drawer closing animation begins | — |
| closed | Triggered after Drawer closing animation ended | — |
examples/docs/fr-FR/drawer.md 0 → 100644
View file @ 9617e934
## Drawer
Sometimes, `Dialog` does not always satisfy our requirements, let's say you have a massive form, or you need space to display something like `terms & conditions`, `Drawer` has almost identical API with `Dialog`, but it introduces different user experience.
### Basic Usage
Callout a temporary drawer, from multiple direction
:::demo You must set `visible` for `Drawer` like `Dialog` does to control the visibility of `Drawer` itself, it's `boolean` type. `Drawer` has to parts: `title` & `body`, the `title` is a named slot, you can also set the title through attribute named `title`, default to an empty string, the `body` part is the main area of `Drawer`, which contains user defined content. When opening, `Drawer` expand itself from the **right corner to left** which size is **30%** of the browser window by default. You can change that default behavior by setting `direction` and `size` attribute. This show case also demonstrated how to use the `before-close` API, check the Attribute section for more detail
```html
<el-radio-group v-model="direction">
<el-radio label="ltr">left to right</el-radio>
<el-radio label="rtl">right to left</el-radio>
<el-radio label="ttb">top to bottom</el-radio>
<el-radio label="btt">bottom to top</el-radio>
</el-radio-group>
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<el-drawer
title="I am the title"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose">
<span>Hi, there!</span>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
direction: 'rtl',
};
},
methods: {
handleClose(done) {
this.$confirm('Are you sure you want to close this?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
```
:::
### Customization Content
Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
:::demo
```html
<el-button type="text" @click="table = true">Open Drawer with nested table</el-button>
<el-button type="text" @click="dialog = true">Open Drawer with nested form</el-button>
<el-drawer
title="I have a nested table inside!"
:visible.sync="table"
direction="rtl"
size="50%">
<el-table :data="gridData">
<el-table-column property="date" label="Date" width="150"></el-table-column>
<el-table-column property="name" label="Name" width="200"></el-table-column>
<el-table-column property="address" label="Address"></el-table-column>
</el-table>
</el-drawer>
<el-drawer
title="I have a nested form inside!"
:before-close="handleClose"
:visible.sync="dialog"
direction="ltr"
custom-class="demo-drawer"
ref="drawer"
>
<div class="demo-drawer__content">
<el-form :model="form">
<el-form-item label="Name" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="Area" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="Please select activity area">
<el-option label="Area1" value="shanghai"></el-option>
<el-option label="Area2" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div class="demo-drawer__footer">
<el-button @click="dialog = false">Cancel</el-button>
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>
</div>
</div>
</el-drawer>
<script>
export default {
data() {
return {
table: false,
dialog: false,
loading: false,
gridData: [{
date: '2016-05-02',
name: 'Peter Parker',
address: 'Queens, New York City'
}, {
date: '2016-05-04',
name: 'Peter Parker',
address: 'Queens, New York City'
}, {
date: '2016-05-01',
name: 'Peter Parker',
address: 'Queens, New York City'
}, {
date: '2016-05-03',
name: 'Peter Parker',
address: 'Queens, New York City'
}],
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '80px'
};
},
methods: {
handleClose(done) {
this.$confirm('Do you want to submit?')
.then(_ => {
this.loading = true;
setTimeout(() => {
this.loading = false;
done();
}, 2000);
})
.catch(_ => {});
}
}
}
</script>
```
:::
### Nested Drawer
You can also have multiple layer of `Drawer` just like `Dialog`.
:::demo If you need multiple Drawer in different layer, you must set the `append-to-body` attribute to **true**
```html
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
open
</el-button>
<el-drawer
title="I'm outer Drawer"
:visible.sync="drawer"
size="50%">
<div>
<el-button @click="innerDrawer = true">Click me!</el-button>
<el-drawer
title="I'm inner Drawer"
:append-to-body="true"
:before-close="handleClose"
:visible.sync="innerDrawer">
<p>_(:зゝ∠)_</p>
</el-drawer>
</div>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
innerDrawer: false,
};
},
methods: {
handleClose(done) {
this.$confirm('You still have unsaved data, proceed?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
```
:::
:::tip
The content inside Drawer should be lazy rendered, which means that the content inside Drawer will not impact the initial render performance, therefore any DOM operation should be performed through `ref` or after `open` event emitted.
:::
:::tip
Drawer provides an API called `destroyOnClose`, which is a flag variable that indicates should destroy the children content inside Drawer after Drawer was closed. You can use this API when you need your `mounted` life cycle to be called every time the Drawer opens.
:::
:::tip
If the variable bound to `visible` is managed in Vuex store, the `.sync` can not work properly. In this case, please remove the `.sync` modifier, listen to `open` and `close` events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.
:::
### Drawer Attributes
| Parameter| Description | Type | Acceptable Values | Defaults |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| append-to-body | Controls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to **true**| boolean | — | false |
| before-close | If set, closing procedure will be halted | function(done), done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure | — | — |
| close-on-press-escape | Indicates whether Drawer can be closed by pressing ESC | boolean | — | true |
| custom-class | Extra class names for Drawer | string | — | — |
| destroy-on-close | Indicates whether children should be destroyed after Drawer closed | boolean | - | false |
| modal | Should show shadowing layer | boolean | — | true |
| modal-append-to-body | Indicates should shadowing layer be insert into DocumentBody element | boolean | — | true |
| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / tbb | rtl |
| show-close | Should show close button at the top right of Drawer | boolean | — | true |
| size | Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is `number` type, it describes the size by unit of pixels; when size is `string` type, it should be used with `x%` notation, other wise it will be interpreted to pixel unit | number / string | - | '30%' |
| 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 |
### Drawer Slot
| Name | Description |
|------|--------|
| — | Drawer's Content |
| title | Drawer Title Section |
### Drawer Methods
| Name | Description |
| ---- | --- |
| closeDrawer | In order to close Drawer, this method will call `before-close`. |
### Drawer Events
| Event Name | Description | Parameter |
|---------- |-------- |---------- |
| open | Triggered before Drawer opening animation begins | — |
| opened | Triggered after Drawer opening animation ended | — |
| close | Triggered before Drawer closing animation begins | — |
| closed | Triggered after Drawer closing animation ended | — |
examples/docs/zh-CN/drawer.md 0 → 100644
View file @ 9617e934
## Drawer 抽屉
有些时候, `Dialog` 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, `Drawer` 拥有和 `Dialog` 几乎相同的 API, 在 UI 上带来不一样的体验.
### 基本用法
呼出一个临时的侧边栏, 可以从多个方向呼出
:::demo 需要设置 `visible` 属性，它的**类型**是 `boolean`,当为 **true** 时显示 Drawer。Drawer 分为两个部分：`title` 和 `body`，`title` 需要具名为 **title** 的 `slot`, 也可以通过 `title` 属性来定义，默认值为空。需要注意的是, Drawer 默认是从右往左打开, 当然可以设置对应的 `direction`, 详细请参考 `direction` 用法 最后，本例还展示了 `before-close` 的用法
```html
<el-radio-group v-model="direction">
<el-radio label="ltr">从左往右开</el-radio>
<el-radio label="rtl">从右往左开</el-radio>
<el-radio label="ttb">从上往下开</el-radio>
<el-radio label="btt">从下往上开</el-radio>
</el-radio-group>
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
点我打开
</el-button>
<el-drawer
title="我是标题"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose">
<span>我来啦!</span>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
direction: 'rtl',
};
},
methods: {
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
```
:::
### 自定义内容
和 `Dialog` 组件一样, `Drawer` 同样可以在其内部嵌套各种丰富的操作
:::demo
```html
<el-button type="text" @click="table = true">打开嵌套表格的 Drawer</el-button>
<el-button type="text" @click="dialog = true">打开嵌套 Form 的 Drawer</el-button>
<el-drawer
title="我嵌套了表格!"
:visible.sync="table"
direction="rtl"
size="50%">
<el-table :data="gridData">
<el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
</el-table>
</el-drawer>
<el-drawer
title="我嵌套了 Form !"
:before-close="handleClose"
:visible.sync="dialog"
direction="ltr"
custom-class="demo-drawer"
ref="drawer"
>
<div class="demo-drawer__content">
<el-form :model="form">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div class="demo-drawer__footer">
<el-button @click="dialog = false">取 消</el-button>
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
</div>
</div>
</el-drawer>
<script>
export default {
data() {
return {
table: false,
dialog: false,
loading: false,
gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '80px'
};
},
methods: {
handleClose(done) {
this.$confirm('确定要提交表单吗？')
.then(_ => {
this.loading = true;
setTimeout(() => {
this.loading = false;
done();
}, 2000);
})
.catch(_ => {});
}
}
}
</script>
```
:::
### 多层嵌套
`Drawer` 组件也拥有多层嵌套的方法
:::demo 同样, 如果你需要嵌套多层 `Drawer` 请一定要设置 `append-to-body` 属性为 **true**
```html
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
点我打开
</el-button>
<el-drawer
title="我是外面的 Drawer"
:visible.sync="drawer"
size="50%">
<div>
<el-button @click="innerDrawer = true">打开里面的!</el-button>
<el-drawer
title="我是里面的"
:append-to-body="true"
:before-close="handleClose"
:visible.sync="innerDrawer">
<p>_(:зゝ∠)_</p>
</el-drawer>
</div>
</el-drawer>
<script>
export default {
data() {
return {
drawer: false,
innerDrawer: false,
};
},
methods: {
handleClose(done) {
this.$confirm('还有未保存的工作哦确定关闭吗？')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
```
:::
:::tip
Drawer 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 `ref` 获取相应组件，请在 `open` 事件回调中进行。
:::
:::tip
Drawer 提供一个 `destroyOnClose` API, 用来在关闭 Drawer 时销毁子组件内容, 例如清理表单内的状态, 在必要时可以将该属性设置为 **true** 用来保证初始状态的一致性
:::
:::tip
如果 `visible` 属性绑定的变量位于 Vuex 的 store 内，那么 `.sync` 不会正常工作。此时需要去除 `.sync` 修饰符，同时监听 Drawer 的 `open` 和 `close` 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 `visible` 属性绑定的变量的值。
:::
### Drawer Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| append-to-body | Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true | boolean | — | false |
| before-close | 关闭前的回调，会暂停 Drawer 的关闭 | function(done)，done 用于关闭 Drawer | — | — |
| close-on-press-escape | 是否可以通过按下 ESC 关闭 Drawer | boolean | — | true |
| custom-class | Drawer 的自定义类名 | string | — | — |
| destroy-on-close | 控制是否在关闭 Drawer 之后将子元素全部销毁 | boolean | - | false |
| modal | 是否需要遮罩层 | boolean | — | true |
| modal-append-to-body | 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上 | boolean | — | true |
| direction | Drawer 打开的方向 | Direction | rtl / ltr / ttb / tbb | rtl |
| show-close | 是否显示关闭按钮 | boolean | — | true |
| size | Drawer 窗体的大小, 当使用 `number` 类型时, 以像素为单位, 当使用 `string` 类型时, 请传入 'x%', 否则便会以 `number` 类型解释 | number / string | - | '30%' |
| title | Drawer 的标题，也可通过具名 slot （见下表）传入 | string | — | — |
| visible | 是否显示 Drawer，支持 .sync 修饰符 | boolean | — | false |
| wrapperClosable | 点击遮罩层是否可以关闭 Drawer | boolean | - | true |
### Drawer Slot
| name | 说明 |
|------|--------|
| — | Drawer 的内容 |
| title | Drawer 标题区的内容 |
### Drawer Methods
| name | 说明 |
| ---- | --- |
| closeDrawer | 用于关闭 Drawer, 该方法会调用传入的 `before-close` 方法 |
### Drawer Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| open | Drawer 打开的回调 | — |
| opened | Drawer 打开动画结束时的回调 | — |
| close | Drawer 关闭的回调 | — |
| closed | Drawer 关闭动画结束时的回调 | — |
examples/nav.config.json
View file @ 9617e934
......@@ -283,6 +283,10 @@
{
"path": "/infiniteScroll",
"title": "InfiniteScroll 无限滚动"
},
{
"path": "/drawer",
"title": "Drawer 抽屉"
}
]
}
......@@ -573,6 +577,10 @@
{
"path": "/avatar",
"title": "Avatar"
},
{
"path": "/drawer",
"title": "Drawer"
}
]
}
......@@ -863,6 +871,10 @@
{
"path": "/avatar",
"title": "Avatar"
},
{
"path": "/drawer",
"title": "Drawer"
}
]
}
......@@ -1153,6 +1165,10 @@
{
"path": "/avatar",
"title": "Avatar"
},
{
"path": "/drawer",
"title": "Drawer"
}
]
}
......
packages/drawer/index.js 0 → 100644
View file @ 9617e934
import Drawer from './src/main';
/* istanbul ignore next */
Drawer.install = function(Vue) {
Vue.component(Drawer.name, Drawer);
};
export default Drawer;
packages/drawer/src/main.vue 0 → 100644
View file @ 9617e934
<template>
<transition
name="el-drawer-fade"
@after-enter="afterEnter"
@after-leave="afterLeave">
<div
class="el-dialog__wrapper"
role="presentation"
v-show="visible">
<div
class="el-drawer__container"
:class="visible && 'el-drawer__open'"
@click.self="handleWrapperClick"
role="document"
tabindex="-1">
<div
aria-modal="true"
aria-labelledby="el-drawer__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">
<slot name="title">
<span role="heading">{{ title }}</span>
</slot>
<button
:aria-label="`close ${title || 'drawer'}`"
class="el-drawer__close-btn"
type="button"
v-if="showClose"
@click="closeDrawer">
<i class="el-dialog__close el-icon el-icon-close"></i>
</button>
</header>
<section class="el-drawer__body" v-if="rendered">
<slot></slot>
</section>
</div>
</div>
</div>
</transition>
</template>
<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';
export default {
name: 'ElDrawer',
mixins: [Popup, emitter, Migrating],
props: {
appendToBody: {
type: Boolean,
default: true
},
beforeClose: {
type: Function
},
customClass: {
type: String,
default: ''
},
destroyOnClose: {
type: Boolean,
default: false
},
modal: {
type: Boolean,
default: true
},
direction: {
type: String,
default: 'rtl',
validator(val) {
return ['ltr', 'rtl', 'ttb', 'btt'].indexOf(val) !== -1;
}
},
showClose: {
type: Boolean,
default: true
},
size: {
type: String,
default: '30%'
},
title: {
type: String,
default: ''
},
visible: {
type: Boolean
},
wrapperClosable: {
type: Boolean,
default: true
}
},
computed: {
isHorizontal() {
return this.direction === 'rtl' || this.direction === 'ltr';
}
},
data() {
return {
closed: false
};
},
watch: {
visible(val) {
if (val) {
this.closed = false;
this.$emit('open');
if (this.appendToBody) {
document.body.appendChild(this.$el);
}
} else {
if (!this.closed) this.$emit('close');
}
}
},
methods: {
afterEnter() {
this.$emit('opened');
},
afterLeave() {
this.$emit('closed');
},
hide(cancel) {
if (cancel !== false) {
this.$emit('update:visible', false);
this.$emit('close');
if (this.destroyOnClose === true) {
this.rendered = false;
}
this.closed = true;
}
},
handleWrapperClick() {
if (this.wrapperClosable) {
this.closeDrawer();
}
},
closeDrawer() {
if (typeof this.beforeClose === 'function') {
this.beforeClose(this.hide);
} else {
this.hide();
}
}
},
mounted() {
if (this.visible) {
this.rendered = true;
this.open();
}
},
destroyed() {
// if appendToBody is true, remove DOM node after destroy
if (this.appendToBody && this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
}
}
};
</script>
packages/theme-chalk/src/drawer.scss 0 → 100644
View file @ 9617e934
@import "mixins/mixins";
@import "common/var";
@keyframes el-drawer-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@mixin drawer-animation($direction) {
@keyframes #{$direction}-drawer-in {
0% {
@if $direction == ltr {
transform: translate(-100%, 0px);
}
@if $direction == rtl {
transform: translate(100%, 0px);
}
@if $direction == ttb {
transform: translate(0px, -100%);
}
@if $direction == btt {
transform: translate(0px, 100%);
}
}
100% {
@if $direction == ltr {
transform: translate(0px, 0px);
}
@if $direction == rtl {
transform: translate(0px, 0px);
}
@if $direction == ttb {
transform: translate(0px, 0px);
}
@if $direction == btt {
transform: translate(0px, 0px);
}
}
}
@keyframes #{$direction}-drawer-out {
0% {
@if $direction == ltr {
transform: translate(0px, 0px);
}
@if $direction == rtl {
transform: translate(0px, 0px);;
}
@if $direction == ttb {
transform: translate(0px, 0px);
}
@if $direction == btt {
transform: translate(0px, 0);
}
}
100% {
@if $direction == ltr {
transform: translate(-100%, 0px);
}
@if $direction == rtl {
transform: translate(100%, 0px);
}
@if $direction == ttb {
transform: translate(0px, -100%);
}
@if $direction == btt {
transform: translate(0px, 100%);
}
}
}
}
@mixin animation-in($direction) {
.el-drawer__open &.#{$direction} {
animation: #{$direction}-drawer-in 225ms cubic-bezier(0, 0, .2, 1) 0ms;
}
}
@mixin animation-out($direction) {
&.#{$direction} {
animation: #{$direction}-drawer-out 225ms cubic-bezier(0, 0, .2, 1) 0ms;
}
}
@include drawer-animation(rtl)
@include drawer-animation(ltr)
@include drawer-animation(ttb)
@include drawer-animation(btt)
$directions: rtl, ltr, ttb, btt;
@include b(drawer) {
position: absolute;
box-sizing: border-box;
background-color: $--dialog-background-color;
display: flex;
flex-direction: column;
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
0 16px 24px 2px rgba(0, 0, 0, 0.14),
0 6px 30px 5px rgba(0, 0, 0, 0.12);
overflow: hidden;
@each $direction in $directions {
@include animation-out($direction);
@include animation-in($direction);
}
&__header {
align-items: center;
color: rgb(114, 118, 123);
display: flex;
margin-bottom: 32px;
padding: $--dialog-padding-primary;
padding-bottom: 0;
& > :first-child {
flex: 1;
}
}
&__title {
margin: 0;
flex: 1;
line-height: inherit;
font-size: 1rem;
}
&__close-btn {
border: none;
cursor: pointer;
font-size: $--font-size-extra-large;
color: inherit;
background-color: transparent;
}
&__body {
flex: 1;
& > * {
box-sizing: border-box;
}
}
&.ltr, &.rtl {
height: 100%;
top: 0;
bottom: 0;
}
&.ttb, &.btt {
width: 100%;
left: 0;
right: 0;
}
&.ltr {
left: 0;
}
&.rtl {
right: 0;
}
&.ttb {
top: 0;
}
&.btt {
bottom: 0;
}
}
.el-drawer__container {
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
}
.el-drawer-fade-enter-active {
animation: el-drawer-fade-in 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}
.el-drawer-fade-leave-active {
animation: el-drawer-fade-in 225ms cubic-bezier(0, 0, 0.2, 1) 0ms reverse;
}
packages/theme-chalk/src/index.scss
View file @ 9617e934
......@@ -76,3 +76,4 @@
@import "./page-header.scss";
@import "./cascader-panel.scss";
@import "./avatar.scss";
@import "./drawer.scss";
src/index.js
View file @ 9617e934
......@@ -80,6 +80,7 @@ import InfiniteScroll from '../packages/infinite-scroll/index.js';
import PageHeader from '../packages/page-header/index.js';
import CascaderPanel from '../packages/cascader-panel/index.js';
import Avatar from '../packages/avatar/index.js';
import Drawer from '../packages/drawer/index.js';
import locale from 'element-ui/src/locale';
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
......@@ -159,6 +160,7 @@ const components = [
PageHeader,
CascaderPanel,
Avatar,
Drawer,
CollapseTransition
];
......@@ -278,5 +280,6 @@ export default {
InfiniteScroll,
PageHeader,
CascaderPanel,
Avatar
Avatar,
Drawer
};
test/unit/specs/drawer.spec.js 0 → 100644
View file @ 9617e934
import { createVue, destroyVM, waitImmediate, wait } from '../util';
const title = '我是测试 title';
const content = 'content';
describe('Drawer', () => {
let vm;
afterEach(() => {
destroyVM(vm);
});
it('create', async() => {
vm = createVue(
{
template: `
<el-drawer :title='title' :visible='visible'></el-drawer>
`,
data() {
return {
title,
visible: true
};
}
},
true
);
const drawer = vm.$children[0];
await waitImmediate();
expect(document.querySelector('.v-modal')).to.exist;
expect(vm.$el.querySelector('.el-drawer__header').textContent).to.equal(
title
);
expect(drawer.$el.style.display).to.not.equal('none');
});
it('render correct content', async() => {
vm = createVue(
{
template: `
<el-drawer :title='title' :visible='visible'>
<span>这是一段信息</span>
<el-button @click.native='dialogVisible = false'>取消</el-button>
<el-button type='primary' @click.native='dialogVisible = false'>确定</el-button>
</el-drawer>
`,
data() {
return {
title: 'drawer test',
visible: true
};
}
},
true
);
await waitImmediate();
expect(vm.$el.querySelector('.el-drawer__body span').textContent).to.equal(
'这是一段信息'
);
const footerBtns = vm.$el.querySelectorAll('.el-button');
expect(footerBtns.length).to.equal(2);
expect(footerBtns[0].querySelector('span').textContent).to.equal('取消');
expect(footerBtns[1].querySelector('span').textContent).to.equal('确定');
});
it('should append to body, when append-to-body flag is true', async() => {
vm = createVue(
{
template: `
<el-drawer :title='title' :visible='visible' :append-to-body='true'>
<span> content </span>
</el-drawer>
`,
data() {
return {
title,
visible: true
};
}
},
true
);
await waitImmediate();
expect(vm.$el.parentNode).to.equal(document.body);
});
it('should open and close drawer properly', async() => {
vm = createVue({
template: `
<el-drawer :title='title' :visible='visible' ref='drawer'>
<span>${content}</span>
</el-drawer>
`,
data() {
return {
title,
visible: false
};
}
});
let drawer = vm.$children[0].$el;
expect(drawer.style.display).to.equal('none');
vm.visible = true;
await waitImmediate();
expect(drawer.style.display).not.to.equal('none');
vm.visible = false;
await wait(400);
expect(drawer.style.display).to.equal('none');
});
it('should destroy every child after drawer was closed when destroy-on-close flag is true', async() => {
vm = createVue({
template: `
<el-drawer :title='title' :visible='visible' :append-to-body='true' :destroy-on-close='true' ref='drawer'>
<span>${content}</span>
</el-drawer>
`,
data() {
return {
title,
visible: true
};
}
});
await waitImmediate();
expect(vm.$el.querySelector('.el-drawer__body span').textContent).to.equal(
content
);
vm.$refs.drawer.closeDrawer();
await wait(400);
expect(vm.$el.querySelector('.el-drawer__body')).not.to.exist;
});
it('should close dialog by clicking the close button', async() => {
vm = createVue({
template: `
<el-drawer :title='title' :visible.sync='visible' :append-to-body='true' :destroy-on-close='true' ref='drawer'>
<span>${content}</span>
</el-drawer>
`,
data() {
return {
title,
visible: true
};
}
});
await waitImmediate();
vm.$children[0].$el.querySelector('.el-drawer__close-btn').click();
expect(vm.visible).to.equal(false);
});
it('should invoke before-close', async() => {
const beforeClose = sinon.spy();
vm = createVue({
template: `
<el-drawer
:before-close='beforeClose'
:title='title'
:visible.sync='visible'
:append-to-body='true'
:destroy-on-close='true'
ref='drawer'
>
<span>${content}</span>
</el-drawer>
`,
data() {
return {
title,
visible: true,
beforeClose
};
}
});
await waitImmediate();
vm.$refs.drawer.closeDrawer();
await waitImmediate();
expect(beforeClose.called).to.be.true;
});
it('should not show close button when show-close flag is false', async() => {
vm = createVue({
template: `
<el-drawer :title='title' :visible='visible' ref='drawer' :show-close='false'>
<span>${content}</span>
</el-drawer>
`,
data() {
return {
title,
visible: false
};
}
});
expect(vm.$el.querySelector('.el-drawer__close-btn')).not.to.exist;
});
it('should have custom classes when custom classes were given', async() => {
const classes = 'some-custom-class';
vm = createVue({
template: `
<el-drawer :title='title' :visible='visible' ref='drawer' custom-class='${classes}'>
<span>${content}</span>
</el-drawer>
`,
data() {
return {
title,
visible: false
};
}
});
expect(vm.$el.querySelector(`.${classes}`)).to.exist;
});
describe('directions', () => {
const renderer = direction => {
return createVue({
template: `
<el-drawer :title='title' :visible='visible' direction='${direction}'>
<span>${content}</span>
</el-drawer>
`,
data: {
visible: true,
title
}
});
};
it('should render from left to right', async() => {
vm = renderer('ltr');
await waitImmediate();
expect(vm.$el.querySelector('.ltr')).to.exist;
});
it('should render from right to left', async() => {
vm = renderer('rtl');
await waitImmediate();
expect(vm.$el.querySelector('.rtl')).to.exist;
});
it('should render from top to bottom', async() => {
vm = renderer('ttb');
await waitImmediate();
expect(vm.$el.querySelector('.ttb')).to.exist;
});
it('should render from bottom to top', async() => {
vm = renderer('btt');
await waitImmediate();
expect(vm.$el.querySelector('.btt')).to.exist;
});
});
it('events', async() => {
const open = sinon.spy();
const opened = sinon.spy();
const close = sinon.spy();
const closed = sinon.spy();
vm = createVue({
template: `
<el-drawer
:title='title'
:visible='visible'
ref="drawer"
@open="open"
@opened="opened"
@close="close"
@closed="closed">
<span>${content}</span>
</el-drawer>
`,
data() {
return {
content,
visible: false,
title
};
},
methods: {
close,
closed,
open,
opened
}
});
vm.visible = true;
await wait(400);
expect(open.called).to.be.true;
expect(opened.called).to.be.true;
expect(close.called).to.be.false;
expect(closed.called).to.be.false;
vm.visible = false;
await wait(500);
expect(close.called).to.be.true;
expect(closed.called).to.be.true;
});
describe('size', () => {
const renderer = (size, isVertical) =>
createVue({
template: `
<el-drawer :title='title' :visible='visible' direction='${isVertical ? 'ltr' : 'ttb'}' size='${size}'>
<span>${content}</span>
</el-drawer>
`,
data: {
visible: true,
title
}
});
it('should effect height when drawer is vertical', async() => {
const size = '50%';
vm = renderer(size, true);
expect(vm.$el.querySelector('.el-drawer').style.width).to.equal('50%');
});
it('should effect width when drawer is horizontal', async() => {
const size = '50%';
vm = renderer(size, false);
expect(vm.$el.querySelector('.el-drawer').style.height).to.equal('50%');
});
});
});
types/drawer.d.ts 0 → 100644
View file @ 9617e934
import { ElementUIComponent } from './component'
import { VNode } from 'vue'
type hide = (shouldCancel: boolean) => void
declare enum Direction {
LTR = 'ltr', // left to right
RTL = 'rtl', // right to left
TTB = 'ttb', // top to bottom
BTT = 'btt' // bottom to top
}
interface DrawerSlots {
/* Main Content Slots */
default: VNode[];
/* Title Slots */
title: VNode[];
[key: string]: VNode[]
}
/** Drawer Component */
export declare class ElDrawer extends ElementUIComponent {
/* Equivalent to `Dialog`'s append to body attribute, when applying nested drawer, make sure this one is set to true */
appendToBody: boolean
/* Hook method called before close drawer, the first parameter is a function which should determine if the drawer should be closed */
beforeClose: (done: hide) => void
/** Whether the Drawer can be closed by pressing ESC */
closeOnPressEscape: boolean
/** Custom class names for Dialog */
customClass: string
/* Determine whether the wrapped children should be destroyed, if true, children's destroyed life cycle method will be called all local state will be destroyed */
destroyOnClose: boolean
/* Equivalent to `Dialog`'s modal attribute, determines whether the dark shadowing background should show */
modal: boolean
/* Equivalent to `Dialog`'s modal-append-to-body attribute, determines whether the shadowing background should be inserted direct to DocumentBody element */
modalAppendToBody: boolean
/* Attributes that controls the drawer's direction of display*/
position: Direction
/* Whether the close button should be rendered to control the drawer's visible state */
showClose: boolean
/* The size of the drawer component, supporting number with unit of pixel, string by percentage e.g. 30% */
size: number | string
/* The Drawer's title, also can be replaced by named slot `title` */
title: string
/* Whether the drawer component should show, also can be decorated by `.sync` */
visible: boolean
/* Flag attribute whi */
wrapperClosable: boolean
$slots: DrawerSlots
}
types/element-ui.d.ts
View file @ 9617e934
......@@ -78,6 +78,7 @@ import { ElBacktop } from './backtop'
import { ElInfiniteScroll } from './infinite-scroll'
import { ElPageHeader } from './page-header'
import { ElAvatar } from './avatar'
import { ElDrawer } from './drawer'
export interface InstallationOptions {
locale: any,
......@@ -336,3 +337,6 @@ export class PageHeader extends ElPageHeader {}
/** Avatar Component */
export class Avatar extends ElAvatar {}
/** Drawer Component */
export class Drawer extends ElDrawer {}
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