126 lines
2.5 KiB
Vue
126 lines
2.5 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<!-- 悬浮按钮 -->
|
|||
|
|
<movable-area class="movableArea">
|
|||
|
|
<movable-view class="movableView" :position="position" :x="x" :y="y"
|
|||
|
|
:direction="direction" @click="handleClickAdd"
|
|||
|
|
:damping="damping" @change="onChange" @touchend="onTouchend">
|
|||
|
|
<u-icon :name="iconName" size="32"></u-icon>
|
|||
|
|
<text>新增</text>
|
|||
|
|
</movable-view>
|
|||
|
|
</movable-area>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
x1: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y1: 0,
|
|||
|
|
y2: 0,
|
|||
|
|
move: {
|
|||
|
|
x: 0,
|
|||
|
|
y: 0
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
damping: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 10
|
|||
|
|
},
|
|||
|
|
direction: {
|
|||
|
|
type: String,
|
|||
|
|
default: "all"
|
|||
|
|
},
|
|||
|
|
position: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 4
|
|||
|
|
},
|
|||
|
|
textColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#333'
|
|||
|
|
},
|
|||
|
|
iconName: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'plus'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async mounted() {
|
|||
|
|
// 获取屏幕尺寸
|
|||
|
|
await uni.getSystemInfo({
|
|||
|
|
success: (res) => {
|
|||
|
|
this.x1 = 0;
|
|||
|
|
this.x2 = parseInt(res.windowWidth) - 50;
|
|||
|
|
this.y1 = 0;
|
|||
|
|
this.y2 = parseInt(res.windowHeight) - 20;
|
|||
|
|
if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
|
|||
|
|
if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.7);
|
|||
|
|
if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
|
|||
|
|
if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
|
|||
|
|
this.move.x = this.x;
|
|||
|
|
this.move.y = this.y;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 更改位置
|
|||
|
|
onChange(e) {
|
|||
|
|
if (e.detail.source === "touch") {
|
|||
|
|
this.move.x = e.detail.x;
|
|||
|
|
this.move.y = e.detail.y;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 拖动
|
|||
|
|
onTouchend() {
|
|||
|
|
this.x = this.move.x;
|
|||
|
|
this.y = this.move.y;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (this.move.x < this.x2 / 2) this.x = this.x1;
|
|||
|
|
else this.x = this.x2;
|
|||
|
|
}, 100)
|
|||
|
|
},
|
|||
|
|
// 点击新增
|
|||
|
|
handleClickAdd(){
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.movableArea {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
|
|||
|
|
z-index: 80;
|
|||
|
|
|
|||
|
|
.movableView {
|
|||
|
|
pointer-events: auto; //可以点击
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
border-radius: 78rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(202,202,182,0.5);
|
|||
|
|
background: #FEE547;
|
|||
|
|
text{
|
|||
|
|
margin-top: 6rpx;
|
|||
|
|
font-family: Source Han Sans SC;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
font-style: italic;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|