vue3-draggable-float
这是一个Vue3悬浮拖动组件,支持吸边
558
3
| Install | |
|---|---|
npm install vue3-draggable-float |
|
| Latest Version: | 0.2.0 |
| Vue: | 3 |
| License: | ISC |
| Last Updated: | Oct 21, 2023 |
| Links: | GitHub · npm |
Maintainer: cl1169451697
Vue3,悬浮拖动组件,支持PC端和移动端
Install & Use
pnpm i vue3-draggable-float
# or
npm install vue3-draggable-float
# or
yarn add vue3-draggable-float
使用
import { DraggableFloat } from 'vue3-draggable-float'
<DraggableFloat><DraggableFloat/>
测试使用版本
"vite": "^4.4.9",
"@vitejs/plugin-vue": "^4.3.3",
Components
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| padding | 页面安全距离 | string | 30,5,50,10 |
| bottom | 距离底部的距离 | number | 100 |
| isOverflowClient | 拖动是否可以溢出窗口 | boolean | false |
| isSticky | 吸边效果 | boolean | true |
| imgUrl | 图片地址 | string | |
| showSlot | 插槽(开启后默认图片和文字失效) | boolean | false |
| btnText | 显示的文字 | string | 返回 |
| isFn | 是否开启点击代执行的函数 | boolean | false |
| fn | 点击代执行的函数 | function |
Functions
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| handleOk | 点击触发 | function(value:{left:number:top:number}) |
| handleMove | 拖动时触发 | function(value:{left:number:top:number}) |
| handleEnd | 拖动结束触发 | function(value:{left:number:top:number}) |
Related Packages
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 0.2.0 | ^3.2.25 | ISC | |
| 0.1.9 | ^3.2.25 | ISC | |
| 0.1.8 | ^3.2.25 | ISC | |
| 0.1.7 | ^3.2.25 | ISC | |
| 0.1.6 | ^3.3.4 | ISC | |
| 0.1.5 | ^3.2.6 | ISC | |
| 0.1.4 | ^3.2.6 | ISC | |
| 0.1.3 | ^3.3.4 | ISC | |
| 0.1.2 | ^3.3.4 | ISC | |
| 0.1.1 | ^3.3.4 | ISC | |
| 0.1.0 | ^3.3.4 | ISC | |
| 0.0.9 | ^3.3.4 | ISC | |
| 0.0.8 | ^3.3.4 | ISC | |
| 0.0.7 | ^3.3.4 | ISC | |
| 0.0.6 | ^3.3.4 | ISC | |
| 0.0.5 | ^3.3.4 | ISC | |
| 0.0.4 | ^3.3.4 | ISC | |
| 0.0.3 | ^3.3.4 | ISC | |
| 0.0.2 | ^3.3.4 | ISC | |
| 0.0.1 | ^3.3.4 | ISC |