13 changed files with 432 additions and 40 deletions
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.7 KiB |
@ -0,0 +1,12 @@ |
|||
## 1.0.5（2023-07-13） |
|||
优化 |
|||
## 1.0.4（2023-06-08） |
|||
增加预览二维码 |
|||
## 1.0.3（2023-05-31） |
|||
增加license |
|||
## 1.0.2（2023-04-28） |
|||
优化 |
|||
## 1.0.1（2023-04-26） |
|||
增加示例 |
|||
## 1.0.0（2023-04-26） |
|||
初始化发布 |
|||
@ -0,0 +1,143 @@ |
|||
<template> |
|||
<view> |
|||
<movable-area class="movable-area" :scale-area="false"> |
|||
<movable-view class="movable-view" :style="{width: widthPx}" :class="!isRemove?'animation-info':''" style="pointer-events: auto;" |
|||
@click="clickBtn" @touchstart="touchstart" @touchend="touchend" @change="onChange" direction="vertical" |
|||
inertia="true" :x="x" :y="y" :disabled="disabled" :out-of-bounds="true" :damping="200" :friction="100"> |
|||
<slot></slot> |
|||
</movable-view> |
|||
</movable-area> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
//是否禁用拖动 |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
//是否自动停靠 |
|||
canDocking: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
//按钮默认位置离底部距离（px） |
|||
bottomPx: { |
|||
type: Number, |
|||
default: 130 |
|||
}, |
|||
//按钮默认位置离右边距离（px） |
|||
rightPx: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
//宽度（px） |
|||
widthPx: { |
|||
type: String, |
|||
default: '70rpx' |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
left: 0, |
|||
top: 0, |
|||
isRemove: true, |
|||
windowWidth: 0, |
|||
windowHeight: 0, |
|||
btnWidth: 0, |
|||
btnHeight: 0, |
|||
x: 10000, |
|||
y: 10000, |
|||
old: { |
|||
x: 0, |
|||
y: 0 |
|||
} |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.getSysInfo() |
|||
}, |
|||
methods: { |
|||
getSysInfo() { |
|||
let sysInfo = uni.getSystemInfoSync() |
|||
this.windowWidth = sysInfo.windowWidth |
|||
this.windowHeight = sysInfo.windowHeight |
|||
let view = uni.createSelectorQuery().in(this).select(".movable-view") |
|||
view.boundingClientRect(rect => { |
|||
this.btnWidth = rect.width |
|||
this.btnHeight = rect.height |
|||
this.x = this.old.x |
|||
this.y = this.old.y |
|||
this.$nextTick(res => { |
|||
this.x = this.windowWidth - this.btnWidth - this.rightPx |
|||
this.y = this.windowHeight - this.btnHeight - this.bottomPx |
|||
}) |
|||
}).exec() |
|||
}, |
|||
//移动按钮 |
|||
onChange(e) { |
|||
this.old.x = e.detail.x |
|||
this.old.y = e.detail.y |
|||
}, |
|||
//开始移动 |
|||
touchstart(e) { |
|||
this.isRemove = true |
|||
}, |
|||
//结束移动 |
|||
touchend(e) { |
|||
if (this.canDocking && this.old.x) { |
|||
this.x = this.old.x |
|||
this.y = this.old.y |
|||
let bWidth = (this.windowWidth - this.btnWidth) / 2 |
|||
if (this.x < 0 || (this.x > 0 && this.x <= bWidth)) { |
|||
this.$nextTick(res => { |
|||
this.x = 0 |
|||
}) |
|||
} else { |
|||
this.$nextTick(res => { |
|||
this.x = this.windowWidth - this.btnWidth |
|||
}) |
|||
} |
|||
this.isRemove = false |
|||
} |
|||
}, |
|||
//点击按钮 |
|||
clickBtn() { |
|||
this.$emit('clickBtn') |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.movable-view { |
|||
/* width: 70rpx; */ |
|||
height: 100rpx; |
|||
/* background: linear-gradient(360deg, #287BF8 0%, #6EA8FF 100%); */ |
|||
/* box-shadow: 0rpx 4rpx 12rpx 0rpx #ADC3F8; */ |
|||
/* border-radius: 50rpx; */ |
|||
/* color: #FFFFFF; */ |
|||
touch-action: none; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.animation-info { |
|||
transition: left .25s ease; |
|||
} |
|||
|
|||
.movable-area { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 999999 !important; |
|||
pointer-events: none; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,6 @@ |
|||
### 1、本插件可免费下载使用； |
|||
### 2、未经许可，严禁复制本插件派生同类插件上传插件市场； |
|||
### 3、未经许可，严禁在插件市场恶意复制抄袭本插件进行违规获利; |
|||
### 4、对本软件的任何使用都必须遵守这些条款，违反这些条款的个人或组织将面临法律追究。 |
|||
|
|||
|
|||
@ -0,0 +1,85 @@ |
|||
{ |
|||
"id": "liu-drag-button", |
|||
"displayName": "可拖动悬浮按钮", |
|||
"version": "1.0.5", |
|||
"description": "可拖动的悬浮按钮，兼容小程序、H5，支持自动停靠，支持自定义样式，使用相当简单，源码简单易修改。", |
|||
"keywords": [ |
|||
"悬浮按钮", |
|||
"拖拽按钮", |
|||
"拖动", |
|||
"按钮", |
|||
"拖拽" |
|||
], |
|||
"repository": "", |
|||
"engines": { |
|||
"HBuilderX": "^3.1.0" |
|||
}, |
|||
"dcloudext": { |
|||
"type": "component-vue", |
|||
"sale": { |
|||
"regular": { |
|||
"price": "0.00" |
|||
}, |
|||
"sourcecode": { |
|||
"price": "0.00" |
|||
} |
|||
}, |
|||
"contact": { |
|||
"qq": "" |
|||
}, |
|||
"declaration": { |
|||
"ads": "无", |
|||
"data": "无", |
|||
"permissions": "无" |
|||
}, |
|||
"npmurl": "" |
|||
}, |
|||
"uni_modules": { |
|||
"dependencies": [], |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "y", |
|||
"aliyun": "y" |
|||
}, |
|||
"client": { |
|||
"Vue": { |
|||
"vue2": "y", |
|||
"vue3": "u" |
|||
}, |
|||
"App": { |
|||
"app-vue": "u", |
|||
"app-nvue": "u" |
|||
}, |
|||
"H5-mobile": { |
|||
"Safari": "y", |
|||
"Android Browser": "y", |
|||
"微信浏览器(Android)": "y", |
|||
"QQ浏览器(Android)": "y" |
|||
}, |
|||
"H5-pc": { |
|||
"Chrome": "u", |
|||
"IE": "u", |
|||
"Edge": "u", |
|||
"Firefox": "u", |
|||
"Safari": "u" |
|||
}, |
|||
"小程序": { |
|||
"微信": "y", |
|||
"阿里": "u", |
|||
"百度": "u", |
|||
"字节跳动": "u", |
|||
"QQ": "u", |
|||
"钉钉": "u", |
|||
"快手": "u", |
|||
"飞书": "u", |
|||
"京东": "u" |
|||
}, |
|||
"快应用": { |
|||
"华为": "u", |
|||
"联盟": "u" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,36 @@ |
|||
# liu-drag-button适用于uni-app项目的可拖动悬浮按钮组件 |
|||
### 本组件目前兼容微信小程序、H5 |
|||
### 本组件是可拖动的悬浮按钮，兼容小程序、H5，支持自动停靠，支持自定义样式，源码简单易修改 |
|||
# --- 扫码预览、关注我们 --- |
|||
|
|||
## 扫码关注公众号，查看更多插件信息，预览插件效果！ |
|||
|
|||
 |
|||
|
|||
### 使用方式 |
|||
``` html |
|||
<liu-drag-button @clickBtn="clickBtn">按钮</liu-drag-button> |
|||
``` |
|||
``` javascript |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
}; |
|||
}, |
|||
methods: { |
|||
//点击按钮 |
|||
clickBtn(){ |
|||
console.log('按钮被点击了') |
|||
}, |
|||
} |
|||
} |
|||
``` |
|||
|
|||
### 属性说明 |
|||
| 名称 | 类型 | 默认值 | 描述 | |
|||
| ----------------------------|--------------- | ------------------ | ---------------| |
|||
| disabled | Boolean | false | 是否禁用拖动 |
|||
| canDocking | Boolean | true | 是否自动停靠 |
|||
| bottomPx | Number | 30 | 按钮默认位置离底部距离（px） |
|||
| rightPx | Number | 0 | 按钮默认位置离右边距离（px） |
|||
Loading…
Reference in new issue