zhibo/components/fab-buttom/fab-buttom.vue

<template>
	<movable-area class="movableArea">
		<movable-view class="movableView" inertia out-of-bounds direction="all" :x="phone_W" :y="phone_H">
			<slot name="content">
				<view class="fab">
					<!-- #ifndef MP-ALIPAY -->
					<u-button :custom-style="{width:'100rpx',height:'100rpx',borderRadius: '50%'}" hover-class="none"
						open-type="contact">
						<view class="centerV base-color">
							<u-icon name="server-man" size="40rpx"></u-icon>
						</view>
					</u-button>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<view class="centerV base-color">
						<contact-button tnt-inst-id="n14_MTBR" size="60rpx" scene="SCE01275548" />
					</view>
					<!-- #endif -->
				</view>
			</slot>
		</movable-view>
	</movable-area>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const phone_W = ref(0)
	const phone_H = ref(0)
	uni.getSystemInfo({
		success: res => {
			phone_W.value = res.windowWidth
			phone_H.value = res.windowHeight
		}
	})
</script>

<style lang="scss" scoped>
	.movableArea {
		position: fixed;
		top: 0;
		left: 0;
		width: 90%;
		height: 90%;
		pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
		z-index: 99999;
	}

	.movableView {
		pointer-events: auto; //可以点击
	}
</style>