5ibinbinvue-draggable-float
可拖动的悬浮组件
拖动效果
在线DEMO
如果看不到请点击这里
功能点
- 支持拖拽
- 滚动隐藏
- 设置初始位置
- 支持移动端
- 支持PC端
使用
npm install vue-draggable-float
参数配置
| name | type | default | desc |
|---|---|---|---|
| distanceRight | Number | 0 | 元素距右侧距离 |
| distanceBottom | Number | 100 | 元素距底部距离 |
| isScrollHidden | Boolean | false | 滚动时按钮是否隐藏 |
| isCanDraggable | Boolean | true | 是否可拖拽 |
| zIndex | Number | 50 | Fixed控制层级 |
使用
<draggable
:distanceRight='100'
:distanceBottom='100'
:isScrollHidden='false'
:isCanDraggable='true'
:zIndex="100">
<div>测试样式</div>
</draggable>
import Draggable from 'vue-draggable-float'
export default {
name: 'draggable',
components: {
Draggable
}
}