Skip to content
Simple touch enabled drawer component for vue.js
Branch: master
Clone or download
Latest commit 86afcae Jul 19, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
js
.gitattributes Initial upload Jul 19, 2018
.gitignore Root demo moved Jul 19, 2018
Drawer.vue
README.md Added demo link Jul 19, 2018
favicon.ico Root demo moved Jul 19, 2018
index.html

README.md

Drawer.vue

Simple touch enabled drawer component for vue.js.

Demo

Usage

Register the drawer component with your desired name.

import Drawer from './path/to/Drawer.vue';
Vue.component('Drawer', Drawer);

Add component on any page with 3 required attributes: 1. direction : 'left' or 'right' depending on which side you want the drawer 2. exist : true or false depending on if you want it to exist on the page or not

<Drawer :direction="'left'" :exist="true">Menu content goes here</Drawer>

To trigger open and close events from outside use ref and trigger .open() or .close() methods. You can also use active property to check if the menu is already opened or not.

<template>
  <div class="about">
    <h1>Page heading</h1>
    <button @click="openMenu">Click</button>

    <Drawer :direction="'left'" :exist="true" ref="LeftDrawer">left</Drawer>
  </div>
</template>
<script>
	export default{
		methods:{
			openMenu(){
				if(this.$refs.LeftDrawer.active){
					this.$refs.LeftDrawer.close();					
				}else{
					this.$refs.LeftDrawer.open();
				}
			}
		}
	}
</script>
<style>
</style>
You can’t perform that action at this time.