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)

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

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 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.