更新记录

1.0.21(2023-12-22)

兼容h5

1.0.2(2023-11-14)

优化计算,统一单位为rpx

1.0.1(2023-10-17)

抛出事件名,与文档一致

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.6.0 app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

拖拽悬浮按钮

注意:请在真机中调试

基本使用方式

<l-drag
    ref="lDrag"
    @btnClick='btnClick'
    :boundary="{top: 0,left: 0,bottom: 0,right: 0}"
    :initLocation="{left: 0, top: 0 }">
</l-drag>
<button @click='init'>初始化位置</button>
btnClick() {
    console.log('点击了');
},
// 初始化位置
init() {
    this.$refs.lDrag.initPosition()
}

l-drag Props

参数 说明 类型 默认值
btnWidth 按钮宽度,单位rpx String, Number 100
btnWidth 按钮高度,单位rpx String, Number 100
adsorb 是否开启吸附 Boolean true
boundary 自定义边界,如果某个位置不传递则默认为0,顶部默认边界为statusBarHeight,底部默认边界为windowHeight,单位rpx object {
top: 0,
left: 0,
bottom: 0,
right: 0,
}
zIndex 顶部按钮最外层的样式 String, Number 100
initLocation 默认处于的位置,传递形式为 {left:0,top:0},不传的默认为0,初始位置位于右下方,单位rpx object

l-drag Event

事件名 说明 回调参数
btnClick 按钮点击

l-drag slot

默认插槽,替换原有的样式

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问