@therunninghub/vue-drawer
Vue Drawer for Vue.JS.
This package is forked from the original package vue-simple-drawer by Vincent Guo.
Install
npm install @therunninghub/vue-drawer --save
or
yarn add @therunninghub/vue-drawer
Quick Start
<template>
<div id="app">
<button @click="toggle">toggle</button>
<Drawer @close="toggle" align="left" :closable="true">
<div v-if="open">content here</div>
</Drawer>
</div>
</template>
<script>
import Drawer from "vue-drawer"
export default {
name: "app",
data() {
return {
open: true
}
},
components: {
Drawer
},
methods: {
toggle() {
this.open = !this.open
}
}
}
</script>Prop Types
| Property | Type | Required? | Description |
|---|---|---|---|
| position | String | One of "left", "up", "right", "down", default: right. The position of the drawer. |
|
| animation | String | One of "slide", "bounce", default: slide. The animation of the drawer. |
|
| closable | Boolean | show the x - close button, default: true
|
|
| mask | Boolean | show the mask layer - close button, default: true
|
|
| maskClosable | Boolean | emit 'close' event when click on mask layer, default: false
|
|
| zIndex | Number | z-index value for the drawer, the nest drawer's z-index will be increased automatically, default: 1000
|
Events
| Event | Params | Required? | Description |
|---|---|---|---|
| close | None | will be triggered when user click the x close button |
Slot
| Slot Name | Description |
|---|---|
| default | the content display in the drawer which can show/hide the draw by v-if |
Advance Guide
Nest Drawer
<template>
...
<button @click="toggle">Open/Close</button>
<Drawer @close="toggle" :align="align" :closable="true">
<div v-if="open">
<span @click="innerOpen=true">
content here
content here
content here
content here
content here
content here
content here
</span>
<Drawer @close="innerOpen=false" :align="align" :closable="true">
<div v-if="innerOpen">
content here
content here
content here
</div>
</Drawer>
</div>
</Drawer>
...
</template>
<script>
export default {
data() {
return {
open: false,
innerOpen: false,
align: "left"
};
}
}
</script>Customized Theme
- In your customized scss file (demo.scss)
$drawerCloseButtonWidth: 50px;
@import "~vue-drawer/src/index";- import the scss to override the default theme in main.js (entry file) after you import the Draw component
import "./demo.scss";SCSS variables
close button style
- $drawerCloseButtonColor
- $drawerCloseButtonHoverColor
close button size
- $drawerCloseButtonWidth
drawer background
- $drawerBackgroundColor
drawer text color
- $drawerTextColor
License
Contributors
Thanks goes to these wonderful people (emoji key):
 Vincent Guo |
 Le Minh Tri |
This project follows the all-contributors specification. Contributions of any kind welcome!