效果演示

DEMO 地址（可使用 chrome 手机模式预览）

@xohu/vue-drag

vue 的 vue-drag 插件

安装

cnpm install @xohu/vue-drag -S

import VDrag from '@xohu/vue-drag'
or
import VDrag from '@xohu/vue-drag/packages/drag-list'

Vue.use(VDrag)

drag-list 插件

Attributes

参数	说明	类型	可选值	默认值
tag	标签名	string	—	div
damping	阻尼系数	string	—	0
open	打开的距离条件	number	—	10
close	关闭的距离条件	number	—	10
draw	是否拉伸右侧区域	boolean	true / false	true
drawMax	右侧拉伸最大值（默认不限制）	number	—	0
once	是否每次只展开一个	boolean	true / false	true

Events

事件名	说明	参数
start	开始执行时回调	this（组件实例）
opend	打开后回调	this（组件实例）
moved	移动中回调	this（组件实例）
closed	关闭后回调	this（组件实例）

Methods

事件名	说明	参数
opend	打开滑块	—
opendAll	打开所有滑块	—
closed	关闭滑块	—
closedAll	关闭所有滑块	—

Scoped Slot

name	说明	参数
—	主体内容	{ opend, closed, opendAll, closedAll }
right	右侧滑块内容	{ opend, closed, opendAll, closedAll }

使用

<v-drag-list>
    <div>内容</div>

    <div slot="right" slot-scope="{ closed, closedAll }">
        右侧
    </div>
</v-drag-list>

演示图