vue-drawer-layout

前端 导航 / 分页 / 布局
一个简单的基于 Vue.js 的 DrawerLayout(类似 Android 的 DrawerLayout)布局组件

vue-drawer-layout

npm npm npm

A simple DrawerLayout component like Android has for Vue.js

中文文档

Demo

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

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 onlywidth prop to get a simple drawer.It act above the main content.

<vue-drawer-layout
      ref="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"
      :width="width"
      :enable="true"
      :animatable="true"
      :z-index="0"
      :drawable-distance="Math.floor(width/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
width width of drawer(px) Number 80% of the body width
drawable-distance farthest distance to draw(px) Number same as 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

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) 2017 Alexander Huang.

vue-drawer-layout 相关推荐
对于该库,你有要推荐的内容么?点此提交推荐
请文明评论,与人为善,比聪明更重要!
评论