Vue-drawer-layout NPM

vue-drawer-layout

A simple DrawerLayout component for Vue.js

中文文档

Demo

http://share.codehuang.com/vue-drawer-layout

Mobile QQ by Alexander Huang(click me or scan the qrcode)

Try it

Click the avatar at the top-left or touch(click) and drag to right(left).

Demo

If the image is not animating, maybe your browser does not supports APNG, you could turn to the GIF demo.

Dependencies

Vue.js (2.x)

Browser Support

Modern (mobile) browsers and Internet Explorer 10+(due to CSS transition support) and X5 core is supported.

Installation

npm install vue-drawer-layout --save

Usage

The following examples can also be used with CommonJS by replacing ES6-specific syntax with CommonJS equivalents.

import Vue from 'vue'
import DrawerLayout from 'vue-drawer-layout'

Vue.use(DrawerLayout)
// or
import {DrawerLayout} from 'vue-drawer-layout'
Vue.component(DrawerLayout.name, DrawerLayout)

You can easily just set nothing or only drawer-width prop to get a simple drawer.It act above the main content.

<vue-drawer-layout ref="drawer" :drawer-width="800">
  <div class="drawer-content" slot="drawer">
    <!-- drawer-content -->
  </div>
  <div slot="content">
    <!-- main-content -->
  </div>
</vue-drawer-layout>

Or you can set every prop as you want to get a fantastic drawer like mobile QQ has(It act below the main content and with distance is 1/3 of the main content drag).

<vue-drawer-layout
  ref="drawer"
  :drawer-width="800"
  :enable="true"
  :animatable="true"
  :z-index="0"
  :drawable-distance="Math.floor(800/3)"
  :content-drawable="true"
  :backdrop="true"
  :backdrop-opacity-range="[0,0.4]"
  @slide-start="handleSlideStart"
  @slide-move="handleSlideMove"
  @slide-end="handleSlideEnd"
  @mask-click="handleMaskClick">
    <div class="drawer-content" slot="drawer">
      <!-- drawer-content -->
    </div>
    <div slot="content">
      <!-- main-content -->
    </div>
</vue-drawer-layout>

API

Props

Name	Info	Type	Default
drawer-width	width of drawer(px)	`Number`	80% of the container(parentNode) width
drawable-distance	farthest distance to draw(px)	`Number`	same as `drawer-width` prop
z-index	z-index of drawer	`Number`	`818`(Don't Ask^_^)
content-drawable	whether to make content-wrapper drawable	`Boolean`	`false`
backdrop	whether to show backdrop	`Boolean`	`true`
backdrop-opacity-range	the opacity range of backdropmin,max	`Array`	`[0,0.4]`
enable	is drawer enable	`Boolean`	`true`
animatable	is drawer animate during moving	`Boolean`	`true`
reverse	is drawer slide out from right	`Boolean`	`false`

Slots

Name	Info
drawer	content in drawer-content
content	content in main-content

Methods

Name	Info	Arguments	Usage
toggle	method to show and hide drawer	`visible(Boolean)`	`toggle(true/false)` or `toggle()`to show(hide)

Events

Name	Info	Callback Arguments
slide-start	drawer start to slide (fired when touchdown)	-
slide-move	drawer sliding (fired when touchmove)	`pos(int)`
slide-end	drawer sliding (fired when touchend or transitionend)	`visible(boolean)`
mask-click	touch(click) on mask	-