1.0.4 • Published 4 years ago
@xohu/vue-drag v1.0.4
效果演示
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>