效果演示

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>

演示图