- 调整了 demo 的样式 Adjust demo styles

- 修改了文档的格式 Modify documentation format

examples/demo-styles/drawer.scss

@@ -3,7 +3,6 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    padding: 10px;
     form {
       flex: 1;
     }
@@ -16,3 +15,7 @@
     }
   }
 }
+
+.el-drawer__body {
+  padding: 20px;
+}

examples/docs/en-US/drawer.md

@@ -1,9 +1,13 @@
 ## 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>
@@ -47,9 +51,11 @@ Callout a temporary drawer, from multiple direction
 :::
 
 ### 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>
@@ -148,6 +154,7 @@ export default {
 :::
 
 ### 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**
 
@@ -197,18 +204,25 @@ You can also have multiple layer of `Drawer` just like `Dialog`.
 :::
 
 :::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 |
@@ -226,6 +240,7 @@ If the variable bound to `visible` is managed in Vuex store, the `.sync` can not
 | wrapperClosable | Indicates whether user can close Drawer by clicking the shadowing layer. | boolean | - | true |
 
 ### Drawer Slot
+
 | Name | Description |
 |------|--------|
 | — | Drawer's Content |
@@ -238,6 +253,7 @@ If the variable bound to `visible` is managed in Vuex store, the `.sync` can not
 | 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  | — |

examples/docs/es/drawer.md

@@ -1,9 +1,13 @@
 ## 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>
@@ -47,9 +51,11 @@ Callout a temporary drawer, from multiple direction
 :::
 
 ### 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>
@@ -148,6 +154,7 @@ export default {
 :::
 
 ### 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**
 
@@ -197,18 +204,25 @@ You can also have multiple layer of `Drawer` just like `Dialog`.
 :::
 
 :::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 |
@@ -226,6 +240,7 @@ If the variable bound to `visible` is managed in Vuex store, the `.sync` can not
 | wrapperClosable | Indicates whether user can close Drawer by clicking the shadowing layer. | boolean | - | true |
 
 ### Drawer Slot
+
 | Name | Description |
 |------|--------|
 | — | Drawer's Content |
@@ -238,6 +253,7 @@ If the variable bound to `visible` is managed in Vuex store, the `.sync` can not
 | 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  | — |

examples/docs/fr-FR/drawer.md

@@ -1,9 +1,13 @@
 ## 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>
@@ -47,9 +51,11 @@ Callout a temporary drawer, from multiple direction
 :::
 
 ### 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>
@@ -148,6 +154,7 @@ export default {
 :::
 
 ### 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**
 
@@ -197,18 +204,25 @@ You can also have multiple layer of `Drawer` just like `Dialog`.
 :::
 
 :::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 |
@@ -226,6 +240,7 @@ If the variable bound to `visible` is managed in Vuex store, the `.sync` can not
 | wrapperClosable | Indicates whether user can close Drawer by clicking the shadowing layer. | boolean | - | true |
 
 ### Drawer Slot
+
 | Name | Description |
 |------|--------|
 | — | Drawer's Content |
@@ -238,6 +253,7 @@ If the variable bound to `visible` is managed in Vuex store, the `.sync` can not
 | 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  | — |

examples/docs/zh-CN/drawer.md

@@ -1,9 +1,13 @@
 ## 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>
@@ -47,9 +51,11 @@
 :::
 
 ### 自定义内容
+
 和 `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>
@@ -148,7 +154,9 @@ export default {
 :::
 
 ### 多层嵌套
+
 `Drawer` 组件也拥有多层嵌套的方法
+
 :::demo 同样, 如果你需要嵌套多层 `Drawer` 请一定要设置 `append-to-body` 属性为 **true**
 
 ```html
@@ -197,18 +205,25 @@ export default {
 :::
 
 :::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 |
@@ -226,6 +241,7 @@ Drawer 提供一个 `destroyOnClose` API, 用来在关闭 Drawer 时销毁子组
 | wrapperClosable | 点击遮罩层是否可以关闭 Drawer | boolean | - | true |
 
 ### Drawer Slot
+
 | name | 说明 |
 |------|--------|
 | — | Drawer 的内容 |
@@ -238,6 +254,7 @@ Drawer 提供一个 `destroyOnClose` API, 用来在关闭 Drawer 时销毁子组
 | closeDrawer | 用于关闭 Drawer, 该方法会调用传入的 `before-close` 方法 |
 
 ### Drawer Events
+
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | open  | Drawer 打开的回调 | — |