159 lines
3.6 KiB
Vue
159 lines
3.6 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 悬浮按钮 -->
|
||
<movable-area class="movableArea">
|
||
<movable-view class="movableView" :position="position" :x="x" :y="y"
|
||
:direction="direction" @click="show = true"
|
||
:damping="damping" @change="onChange" @touchend="onTouchend">
|
||
<u-icon name="question" size="40" :color="textColor"></u-icon>
|
||
</movable-view>
|
||
</movable-area>
|
||
<u-modal v-model="show" :mask-close-able="true" confirm-text="明白了" :confirm-color="textColor">
|
||
<view class="modal-content">
|
||
<view class="content-item" v-for="(item,index) in tipText" :key="index">
|
||
{{ item }}
|
||
</view>
|
||
</view>
|
||
</u-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
x: 0,
|
||
y: 0,
|
||
x1: 0,
|
||
x2: 0,
|
||
y1: 0,
|
||
y2: 0,
|
||
move: {
|
||
x: 0,
|
||
y: 0
|
||
},
|
||
show: false,
|
||
};
|
||
},
|
||
props: {
|
||
damping: {
|
||
type: Number,
|
||
default: 10
|
||
},
|
||
direction: {
|
||
type: String,
|
||
default: "all"
|
||
},
|
||
position: {
|
||
type: Number,
|
||
default: 4
|
||
},
|
||
tipText: {
|
||
type: Array,
|
||
default: ''
|
||
},
|
||
textColor: {
|
||
type: String,
|
||
default: '#333'
|
||
}
|
||
},
|
||
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.8);
|
||
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)
|
||
},
|
||
}
|
||
}
|
||
</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: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 78rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
// filter: opacity(0.9);
|
||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);
|
||
// background: linear-gradient(354deg,#9BE15D 0%,#FFFFFF 0%,#FFFFFF 0%,#FFFFFF 0%,#A9FFD0 100%);
|
||
background: rgba(255,255,255,0.99);
|
||
.iconImage {
|
||
width: 80rpx;
|
||
height: 70rpx;
|
||
display: block;
|
||
// animation: iconImage 5s linear infinite;
|
||
}
|
||
// @keyframes iconImage{
|
||
// 0%{-webkit-transform:rotate(0deg);}
|
||
// 25%{-webkit-transform:rotate(90deg);}
|
||
// 50%{-webkit-transform:rotate(180deg);}
|
||
// 75%{-webkit-transform:rotate(270deg);}
|
||
// 100%{-webkit-transform:rotate(360deg);}
|
||
// }
|
||
|
||
// .contact {
|
||
// width: 124rpx;
|
||
// height: 46rpx;
|
||
// background: #50B674;
|
||
// box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(80,182,116,0.3);
|
||
// border-radius: 36rpx;
|
||
// font-weight: 500;
|
||
// font-size: 24rpx;
|
||
// color: #FFFFFF;
|
||
// line-height: 24rpx;
|
||
// display: flex;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
// margin-bottom: -25rpx;
|
||
// }
|
||
|
||
}
|
||
}
|
||
.modal-content{
|
||
padding: 40rpx 60rpx;
|
||
.content-item{
|
||
margin: 10rpx 0;
|
||
}
|
||
}
|
||
</style> |