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