1.0.2 • Published 4 years ago
quark-drag v1.0.2
拖拽组件，用于希望能被拖拽的某个图形或元素
何时使用
- 比如在首页上某个活动入口，想要这个入口能够被拖动时使用
使用方式
- 安装组件 npm i quark-drag
- 引入组件 import QuarkDrag from 'quark-drag';
- 在VueComponent中引入该组件
- template中调用组件
基本用法
拖拽方向同时支持x+y轴
<quark-drag direction="n"></quark-drag>拖拽是否可以自动吸边
<quark-drag :isSide="true"></quark-drag>自定义拖拽边界
<quark-drag :boundary="{top: 20, bottom: 20}"></quark-drag>绑定点击事件
<quark-drag @click.native="onClickXX"></quark-drag>自定义内部元素
<quark-drag direction="n" @click.native="onClickXX" width="1rem">
<img :src="drag-xx-img" class="drag-xx" />
</quark-drag>API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| isSide | 是否吸边 | Boolean | true | true/false |
| direction | 移动方向 | string | "h" | "h"/"v"/"n" |
| boundary | 距边界距离 | Object | 'auth' | { top: 20, left: 0 } |
| width | 宽度 | Number,String | 50 | -- |
| height | 高度 | Number,String | 50 | -- |
| opacity | 透明度 | Number,String | 1 | -- |
| unit | 距离单位 | String | "px" | "px"/"rem" |
| zIndex | 样式层级 | Number,String | 11 | -- |