hjl19911127 / vue-drawer-layout

A simple DrawerLayout component for Vue.js.

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.

vue-drawer-layout's Issues

有蒙层的情况下点击主视图会调用handleSlideEnd方法

点击主视图时会调用handleSlideEnd方法导致在handleSlideEnd里改变drawer显示和收起状态会出现问题

滑动问题

微信内置浏览器 content内容上下滑动在iphone上不能滑动，Android没问题，这个问题不兼容么，有没有什么好的解决方法呢？

作者您好，有个问题询问下，我点击抽屉部分任何区域就会触发handleToggleDrawer，隐藏了抽屉页面

主要是设置了抽屉页面的样式后点击任何区域都会隐藏抽屉页面。
代码是仿照的http://share.codehuang.com/vue-drawer-layout
这个里面的Methods一项，具体代码如下：
template部分代码：

<div class="drawerList" @click="handleToggleDrawer">
<a @click="handleToggleDrawer">Hide Drawer

JavaScript代码：
methods: {
handleToggleDrawer() {
this.$refs.drawerLayout.toggle();
}
}
css代码：

<style lang="stylus" scoped> .drawer .drawerList position: absolute overflow: hidden top: 0 left: 0 width: 95% height: 100% background: #ffffff .content </style>

你文档上的调用toggle方法写错了

你文档上的调用toggle方法写错了,应该是this.$refs.drawer.toggle()调用,还有复制你的代码全是中文标点,头大啊!!!
不过还是谢谢你

微信内置浏览器无法使用

在谷歌浏览器及其手机模拟模式可以使用，但是在微信浏览器中无法使用
经排查发现是无法正确识别微信浏览器
解决方案：
在 helper.js 的supportsTouchDetector函数添加是否是微信浏览器的判断

export const supportsTouchDetector = cacheFunctionWrapper(() =>('ontouchstart' in window)||(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)=="micromessenger"));

Option to swipe from bottom?

It would be great if you could to create an option to set the swipe action from the bottom to get a drawer like maps on iOS. I taked a look to the code but for me it's a little bit complicated.

拖拽抽屉过程中蒙层下面页面会滚动

content里面的list无法滑动

<vue-drawer-layout
  ref="drawer"
  :drawer-width="800">
  <div class="drawer-content" slot="drawer">
      <home-navigationbar></home-navigationbar>
  </div>
  <div slot="content">
    <router-view ></router-view>
  </div>
</vue-drawer-layout>

点击按钮触发滑动，要怎么做呢？

使用了之后，content内部的组件无法滑动

rt，刚刚接触vue，不是很清楚原理，在屏幕上滑动的时候感觉像是被事件被提前接受并隔断了

Can't get it working with nuxt

Hey

thanks for this cool plugin. Do you have a example on how to use
this with nuxt please?

Thanks in advance!

Not working on safari browser both on macbook and iphone

It happens only when you load the page for the first time.......

Slot error for vue3

Any version update for vue 3?

侧滑栏的内容会显示在主页面的底下了 bug吗？ 怎么搞？

侧滑栏的内容怎么会显示到主页面的内容低下了，

z-index prop not working

nvm

延迟问题

在ios最新版手机qq和uc上，点击handleToggleDrawer方法会有0.5-1s的延迟触发，在微信和Safari没问题，很奇怪

关于refresh

在设备切换时候，drawer 宽度不变，又或者在不同设备下去开启或者关闭drawer，drawer 保持不变 ，建议暴露一个refresh方法

左侧滑动和地图滑动冲突，在地图上无法侧滑

vue界面实现的百度地图，在改界面加入侧滑控件，滑动左侧只会滑动地图

Can't scroll elements inside the drawer

Hello all)
I'm making this project - http://i.imgur.com/4raJvIx.png
My problem is - I can't scroll me filters insight drawer... I put filters and a graph in vue-drawer-layout component! But when I open the drawer - I can't scroll my filters!
Please, help me, how can I fix it?

Open drawer like Android, on top of content

Is it possible to open drawer on top of content? Like in Android instead of sliding the content to left/right?

this.$refs.drawerLayout is undefined

我想用toggle()这个方法，但是显示未定义

Add drawer 'isOpen' class

There needs to be classes or methods after opening and closing the drawer

Default scroll not working

是否有办法不在content内部滚动。
浏览器整屏截图功能 eventListener('scroll') 都会在此滚动方式下失效

Style conflict with Bulma in Tabs

The bottom border of the first item is still visible while it is selected. It only conflicts with the first item. I was working with Buefy which is based on Bulma. So I tested with both Bulma and Buefy tab component. See the attached image.

Disable drawer open on swipe

I have a horizontal scrollable list in my content and whenever I swipe to scroll the list the drawer opens.
Is there a way for me to make drawer open only when I call its toggle method

Are we missing some css

Not sure if i am missing something. But it seems as if the content isn't scrollable. Are we missing come css for this?

support TypeScript

这个支持嵌套使用吗

不用nodejs，你这个控件怎么用?

能不能配置关闭拖拽呢

如果放在安卓原生的viewpager里，拖拽和viewpager的滑动就冲突了，能不能配置关闭拖拽呢

怎么设置变为右侧滑栏？

如题

当移动端屏幕宽度改变的时候，drawer-wrap的宽度没有随之改变

not working with NUXT

{ TypeError: Cannot read property 'middleware' of undefined
at module.exports.webpack_exports.default (.nuxt/server.js:115:0)
at process._tickCallback (internal/process/next_tick.js:68:7) statusCode: 500, name: 'TypeError' }

Doesn't work on window resize

Hi,
when you switch from portrait to landscape, you can't drag anymore.
Maybe you should add a resize event to retrigger calculations on window resize?

Thanks.

移动端，滑动与浏览器左滑退出当前地址冲突

移动端滑动会与浏览器默认事件（左滑back）冲突

如果一个页面上有多个 drawer 怎么玩？ eq. 左右各一个

如果一个页面上有多个 drawer 怎么玩？ eq. 左右各一个

该组件导致无法页面滚动？

在未使用您的框架下

<template>
  <div id="drawer">
    <navbar @childEvent="handleToggleDrawer"></navbar>
    <slot></slot>
    <toolbar></toolbar>
  </div>
</template>

该可以将长页面拉到最底层

而在使用您的框架时

<vue-drawer-layout ref="drawerLayout">
    <div class="drawer" slot="drawer">
      <navbar-list></navbar-list>
    </div>
    <div class="content" slot="content">
      <navbar @childEvent="handleToggleDrawer"></navbar>
      <slot></slot>
      <toolbar></toolbar>
    </div>
</vue-drawer-layout>

在content元素过长时候无法进行页面滚动，而我并没有办法解决这个问题

Option to enable or disable dragging

Is there any way to switch the dragging? If not, can you please give a thought about it? Cause there are situations when I don't want the drawer to be revealed by dragging other than mouse click. It would be a great help.

求分享文档中的qq那个侧滑的代码

能否将demo的代码提交到github上

http://chat.codehuang.com/message 这个例子的代码能否给出谢谢，或者再给出一个具体的使用例子

Drawer mask not visible thru scrolling

When the drawer is pulled out, the scrolling is still enabled. The mask only covers the part of the page that was visible before scrolling.

您好，请问有禁止拖拽滑动的方法吗？

目前页面只需要通过点击事件来滑出侧栏，不需要拖拽滑出，因为这样会影响用户体验

Conflict with vue awesome swiper/swiperjs

Is there anyway of adding a no swiping area?

I have an internal slideshow using vue awesome swiper/swiperjs and swiping this causes the sidebar to open (on a touch friendly device only as far as I am aware).

This has only happened since I upgraded vue awesome swiper/swiperjs but adding a no swiping class or area would fix this issue.

Vue 3?

Thanks for a perfect library! Any chance that you will upgrade it for Vue 3 maybe?