Vue.component('drawer', drawer)```

#### Использование

##### Атрибуты
| Атрибут | Описание | Тип | Возможные значения | Значение по умолчанию |
|:---- |:---|:-----|:----- |-----   |
|     visible.sync        |    Отображение Dialog, поддерживает .sync модификатор   |      boolean     |             ——             |       false|
|     loading.sync        |    Отображает ли значок загрузки, поддерживает .sync модификатор   |      boolean     |             ——             |       false|
|     loadingColor        |    Цвет значка загрузки                       |      string     |             ——             |       #409EFF|
|      title              |           Заголовок                |           string |                 ——          |            标题|
|      headerShow         |       Заголовок отображается                |       boolean    |               ——           |         true|
|   header-background     |       Фон заголовка                |       string     |               ——           |          #fff|
|     closeBtnShow        |        Кнопка закрытия отображается               |        boolean   |                 ——         |         true|
|     title-color         |        Цвет заголовка                 |         string   |                ——          |            #000|
|   main-background       |        Фон содержимого                 |         string   |                ——          |           #fff|
|   footerShow            |        Нижний колонтитул отображается                 |         boolean  |                 ——         |            false|
|   footer-height         |          Высота нижнего колонтитула                 |           string |                  ——        |              60px|
|   footer-background     |      Фон нижнего колонтитула                  |         string   |                 ——         |             #fff|
|       width             |   Ширина боковой панели (align справа или слева)  |           string |                  ——        |             500px|
|       height             |  Высота боковой панели (align сверху или снизу)  |           string |                  ——        |             300px|
|       align             |         Расположение боковой панели                |          string  |    top,bottom,right,left   |            right|
|       modal             |       Есть ли наложение                 |       boolean    |              ——            |         true|
|   close-on-click-modal  |     Закрывается ли при нажатии на наложение                |       boolean    |              ——            |         false|

##### События
|Событие|Описание|Значение по умолчанию|
|:---- |:---|-----   |
|   open     |  Открытие диалога | ——  |  
|   opened   |  Завершение анимации открытия диалога | ——  |  
|   close    |  Закрытие диалога | ——   |  
|   closed   |  Завершение анимации закрытия диалога | ——|  

#### Slot
|Slot|Описание|Значение по умолчанию|
|:---- |:---|-----   |
| header   |  Содержание области заголовка| ——  |
| footer   |  Содержание нижней области| ——| 

#### Пример (простой)

 <drawer
   :visible.sync='dialogVisible'
   :headerShow="true"
   header-background="#f5f5f5"
   title-color="#000"
   main-background="#EBEEF5"
   :footerShow="true"
   footer-height="60px"
   footer-background="#f5f5f5"
   width="500px"
   height="300px"
   align="right"
   :modal="true"
   close-on-click-modal
   :loading.sync="loading"
   loadingColor="#ff6700"
   @close="text"
   @closed="text"
   @open="text"
   @opend="text"
    >
     <div slot="header">
       <p>Заголовок</p>
     </div>

   <!--Содержимое-->
   <div>
     <p>Содержимое</p>
   </div>

   <!--Здесь нижний колонтитул-->
   <div slot="footer">
     <p>Нижний колонтитул</p>
   </div>
 </drawer>