uniapp鼠标点击位置绘制组件

        这几天做地图的时候碰到点小麻烦，在地图上添加好标志物后，点击标志物弹出导航选项。结果弹框位置一直偏差，特此简单测试，记录。

        测试很简单，一块区域，鼠标在区域内点击，在点击处绘制另一个区域。后来又加了个按钮用来关闭。

直接上代码：

<template>
	<view class="mos" @click="move">
		<view v-show="isShow" class="mosare" :style="mosPosition">
			<button class="bt" @click.stop="close" type="default">关闭</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				mos_x: 50,
				mos_y: 50,
				isShow: false
			}
		},
		methods: {
			move(e) {
				console.log(e); //打印 e 属性
				this.isShow = true;
				this.mos_x = e.touches[0].pageX - e.target.offsetLeft;
				this.mos_y = e.touches[0].pageY - e.target.offsetTop;
			},
			close() {
				this.isShow = false;
			}
		},
		computed: {
			mosPosition: function() {
				return "left:" + (this.mos_x) + "px;top:" + (this.mos_y) + "px";
			}

		}
	}
</script>
<style>
	.mos {
		width: 500px;
		height: 250px;
		position: absolute;
		left: 250px;
		top: 50px;
		background-color: #4CD964;

	}

	.mosare {
		width: 25px;
		height: 25px;
		background-color: #007AFF;
		position: absolute;
	}

	.bt {
		width: 70px;
		height: 40px;
	}
</style>

打印的e 属性：   e.target.offsetTop   父组件距离顶端位置 。 

                           e.touches[0].pageY   点击位置在整个页面的位置，包括已经滚动出窗口的部分。

 绘图，是在父组件中绘制的，所以具体的坐标就是 （e.touches[0].pageY- e.target.offsetTop ）

有关其他 位置的属性可以参考：

记录一下pageX，offsetX，clientX，offsetLeft，offsetWidth，pageYoffset，scrollTop,scrollY，等。原文摘自MDN文档库。保证正确。_AILIHEIHEI的博客-CSDN博客