Skip to content

Latest commit

 

History

History
127 lines (100 loc) · 4.26 KB

README.zh-CN.md

File metadata and controls

127 lines (100 loc) · 4.26 KB
Raw

vue-drawer-layout

npm npm travis npm npm

一个简单的DrawerLayout（抽屉组件 / 侧滑菜单）布局组件，基于Vue.js

English Doc

示例

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

QQ APP 的抽屉效果（点我或扫下面的二维码）

试一试

点击页面中左上角的头像打开drawer或者向右向左拖拽

演示

如果图片没有动画, 说明你的浏览器不支持APNG, 点示例查看GIF的动图

依赖

浏览器兼容性

现代（移动）浏览器或IE10+（支持css transition api），X5内核也经过测试

安装

npm install vue-drawer-layout --save

使用

下面的例子也可以使用CommonJS规范引入

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)

你可以什么属性也不传，或者只设置drawer-width属性就能得到一个简单的drawer（像Android原生的drawerLayout那样drawer在上面）

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

或者你可以设置所有属性来得到一个更惊艳的drawer，想移动QQ那样（drawer从主容器下方出现，且移动的距离只有总宽度的1/3）

<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

名称 介绍 类型 默认值
drawer-width drawer的宽度(px) Number 父容器宽度的80%
drawable-distance drawer可拖拽的最大距离(px) Number 与drawer-width 属性一样
z-index drawer的z-index Number 818（不要问我为什么^_^）
content-drawable 主容器是否一起移动 Boolean false
backdrop 是否显示蒙层 Boolean true
backdrop-opacity-range 蒙层的透明度范围[min,max] Array [0,0.4]
enable 启用禁用drawer功能 Boolean true
animatable drawer移动过程是否有动画 Boolean true
reverse drawer从右侧滑出 Boolean false

Slots

名称 介绍
drawer drawer内嵌内容
content 主容器内嵌内容

Methods

名称 介绍 参数 使用方式
toggle 显示或者隐藏drawer visible(Boolean) toggle(true/false) 或者 toggle()切换显示隐藏

Events

名称 介绍 回调参数
slide-start drawer开始拖拽前（touchstart 触发） -
slide-move drawer拖拽中（touchmove 触发） pos(int)
slide-end drawer拖拽结束（touchend 有动画则是transitionend事件之后触发） visible(boolean)
mask-click 蒙层点击事件 -

许可证

MIT License.

Copyright (c) 2018 Alexander Huang.