vue横向滑动和竖向滑动

<!-- 设备详情页面 -->
<template>
	<div style="width: 100%;height: 100%;" id="huadongContent">
		<div class="numberInfo">
			<div class="flexRowCenterCenter">
				<div class="oneNumber flexColumnCenterCenter">
					<div class="numberValue">{
  {brightness}}%</div>
					<div class="numberText">亮度值</div>
				</div>
				<div style="width: 1px;height: 10px;background: white;"></div>
				<div class="oneNumber flexColumnCenterCenter">
					<div class="numberValue">{
  {colorTemperature}}K</div>
					<div class="numberText">色温值</div>
				</div>
			</div>
		</div>
		<template v-show="statusValue">
			<div class="colorTemperature flexRowStartCenter" v-show="controlbarShow">
				<img src="../assets/img/huadong/colorTemperature.png" width="10" height="22" />
				<div class="control_bar" id="controlbar">
					<div class="control_bar_cursor" id="controlbarcursor" :style="{left:(xPosition+'px')}"></div>
				</div>
			</div>
			<div class="brightness flexColumnCenterCenter" v-show="controlbar2Show">
				<div>
					<div class="control_bar2" id="controlbar2">
					</div>
					<div class="control_bar_cursor2" id="controlbarcursor2" :style="{height:(yPosition+'px')}"></div>
				</div>

				<img src="../assets/img/huadong/brightness.png" width="24" height="24" />
			</div>
			<img src="../assets/img/huadong/slider.png" v-if="silderShow" class="sliderImg" :style="{left:silderx+'px',top:slidery+'px'}"
			 width="48" height="48" />
		</template>


	</div>
</template>
<script>
	export default {
		components: {

		},
		props: ["bValue", 'ctValue', 'dimmerStatus'],
		data() {
			return {
				startx: 0,
				starty: 0,
				endx: 0,
				endy: 0,
				xPosition: -4,
				yPosition: 0,
				con