Neighbour Problem Manager

    vue-drawer-layout

    1.3.0 • Public • Published

    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.

    Install

    npm i vue-drawer-layout

    DownloadsWeekly Downloads

    249

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    302 kB

    Total Files

    10

    Last publish

    Collaborators

    • hjl19911127