/vue-drawer-layout

A simple DrawerLayout component for Vue.js.

Primary LanguageJavaScriptMIT LicenseMIT

vue-drawer-layout

npm npm travis npm npm

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

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 backdrop[min,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 -

License

MIT License.

Copyright (c) 2018 Alexander Huang.