Vue-Drawer-Plugin

A panel which slides in from the edge of the screen.

When To Use

A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.

• Use a Form to create or edit a set of information.

• Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.

• When the same Form is needed in multiple places.

API

Props | Description | Type | Default -|-|-|- showClose | Whether a close (x) button is visible on top right of the Drawer dialog or not. | Boolean | true | showHeader | Whether a header container is visible on top of the Drawer dialog or not, which you can set the title. | Boolean | true | title | You can set the title if showHeader is true. | String | - | mask | Whether to show mask or not. | Boolean | true | maskCloseable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | Boolean | true | maskStyle | Style of Drawer's mask element. | Object | - | wrapStyle | Style of Drawer wrapper. | Object | - | bodyStyle | Style of floating layer, typically used for adjusting its position. | Object | - | visible | Whether the Drawer dialog is visible or not. | Boolean | false | width | Width of the Drawer dialog. | String ｜ Number | 256 | height | Placement is top or bottom, height of the Drawer dialog. | String ｜ Number | 256 | className | The class name of the container of the Drawer dialog. | String | - | zIndex | The z-index of the Drawer. | Number | 1000 | placement | The placement of the Drawer. | String | 'right' | close-on-press-escape | Whether the dialog can be closed by pressing ESC. | boolean | true | before-close | Callback before Drawer Dialog close, and it will prevent Dialog from closing. | function(done)，done is used to close the Drawer Dialog | - |

How to use

Install

npm install vue-drawer-plugin -S

// or

yarn add vue-drawer-plugin

Demo

Quick Start

import vueDrawer from 'vue-drawer-plugin';

Vue.use(vueDrawer);

// single-component.vue
<template>
    <vue-drawer
        :visible.sync="visible"
        class="test-wrap-class"
        title="header"
        width="70vw"
        height="200px"
        @opened="opened"
        :before-close="handleClose"
        @close="closeRightNow"
        @closed="closed"
        :wrap-style="{ border: '1px solid #ddd' }"
        :body-style="{ background: '#ddd' }"
        :mask-closeable="true"
        :show-close="true"
    >
    <div>This is content inside Drawer dialog</div>
    <button @click="openAnother">feel free to open another Drawer inside your Drawer</button>
</vue-drawer>
</template>

Browser Support

Modern browsers and Internet Explorer 10+.

| IE / Edge | Firefox | Chrome | Safari | Opera | Electron | | --- | --- | --- | --- | --- | --- | | IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

Development

Skip this part if you just want to use vue-drawer-plugin.

For those who are interested in contributing to this plugin, you can submit pull request or just download this repository and run.

License

vue-drawer-plugin is released under the MIT License.