vue-draggable-float

可拖动的悬浮组件

拖动效果

在线DEMO

如果看不到请点击这里

功能点

1. 支持拖拽
2. 滚动隐藏
3. 设置初始位置
4. 支持移动端
5. 支持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
  }
}

源码地址