vue中 parallax() 图片跟随鼠标移动而移动

话不多说上代码
HTML部分

<template>
	<div id="home">
		<!-- 在父级标签中绑定时间 -->
		<div class="home" @mousemove="parallax">
			<!-- 设置图片的偏移量 (data-speed) -->
			<div class="bg-dian"></div>
			<div class="bg-red layer" data-speed="-5"></div>
			<div class="bg-blue layer" data-speed="5"></div>
			<div class="bg layer" data-speed="20"></div>
			<div class="gt"></div>
		</div>
	</div>
</template>

JS部分

export default {
		methods: {
			parallax(e) {
				document.querySelectorAll(".layer").forEach((layer) => {
					const speed = layer.getAttribute("data-speed") || 2;
					const x = (window.innerWidth - e.pageX * speed) / 100;
					const y = (window.innerHeight - e.pageY * speed) / 100;
					//设置 X轴和Y轴同时同时移动
					layer.style.transform = `translateX(${x}px)`,`translateY(${y}px)`;
					
				});
			},
		},
	}