vue uniapp 实现点击获取坐标出现gif

页面

<!-- 背景图片-->
<view 	@click="getMouseXY($event)">

		<view class="clickGif" v-if="clickShow" :style="{left: ''+clickGifx+'px' ,top: ''+clickGify+'px' }"></view>
</view>
1
2
3
4
5

css

	.clickGif {
		background-image: url("/static/image/click.gif");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 10vw;
		height: 10vw;
		position: absolute;

		z-index: 3;
	}
1
2
3
4
5
6
7
8
9
10

初始化参数

data() {
			return {
				clickGifx: 0,
				clickGify: 0,
				clickShow: false,
				clickTime: null
			}
		},
1
2
3
4
5
6
7
8

点击事件 获取坐标 延迟消失

getMouseXY(e) {
				clearTimeout(this.clickTime)
				console.log(e.detail.x, '')
				console.log(e.detail.y, '')
				this.clickGifx = e.detail.x
				this.clickGify = e.detail.y
				this.clickShow = true
				this.clickTime = setTimeout(() => {
					this.clickShow = false
				}, 700);
			},
1
2
3
4
5
6
7
8
9
10
11