基于uniapp的可拖拽悬浮框用于每个页面添加联系客服

创建组件mz-floating-box

<template>
	<movable-area class="movable-area" :style="{width:areaWidth+'px',height:areaHeight+'px',zIndex:zindex}">
		<movable-view class="movable-view" :style="{width:dragWidth+'px',height:dragHeight+'px'}" :x="x" :y="y" direction="all">
			<image :src="kefuUrl" @click="dragClickHandle"></image>
		</movable-view>
	</movable-area>
</template>

<script>
	export default {
		name: "mz-floating-box",
		props: {
			zindex: {
				type: String,
				default: () => {
					return '6'
				}
			},
			x: {
				type: String,
				default: () => {
					return '310'
				}
			},
			y: {
				type: String,
				default: () => {
					return '310'
				}
			},
			dragWidth: {
				type: String,
				default: () => {
					return '40'
				}
			},
			dragHeight: {
				type: String,
				default: () => {
					return '40'
				}
			}
		},
		data() {
			return {
				kefuUrl: require('@/static/kefu.png'),
				areaWidth: 300,
				areaHeight: 500,
			};
		},
		mounted() {
			this.getDeviceInfo().then(response => {
				console.log("[]", response)
				this.areaWidth = response.windowWidth;
				this.areaHeight = response.windowHeight - 200;
			})
		},
		methods: {
			/**
			 * 获取当前设备的信息
			 * **/
			getDeviceInfo() {
				return new Promise((resolve, reject) => {
					uni.getSystemInfo({
						success: (sysInfo) => {
							resolve(sysInfo)
						}
					})
				})
			},
			/**
			 * 点击触发事件
			 * **/
			dragClickHandle(e) {
				e.preventDefault();
				console.log("ok")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.movable-area {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 100px;
		left: 0px;
		right: 0px;
		bottom: 100px;
		pointer-events: none; //鼠标事件可以渗透

		.movable-view {
			border-radius: 8px;
			overflow: hidden;
			width: 40px;
			height: 40px;
			pointer-events: auto; //恢复鼠标事件
			background: rgba(255, 255, 255, 0.8);
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09);
			position: relative;

			.image{
				width: 100%;
				height: 100%;
			}

		}
	}
</style>

直接使用

<mz-floating-box>,/mz-floating-box>