<template>
	<view>
		<movable-area class="movable-area">
			<movable-view class="movable-view" :x="x" :y="y" direction="all" @click="Click"><image src="../../static/use/icon/add.png"></image></movable-view>
		</movable-area>
	</view>
</template>

<script>
export default {
	name: 'XuanFu',
	data() {
		return {
			x: 290, //x坐标
			y: 320 //y坐标
		};
	},
	methods: {
		Click() {
			//自定义事件
			this.$emit('onClickXuanFu');
		}
	}
};
</script>

<style lang="scss">
$all_width: 96rpx;
$all_height: 96rpx;

.movable-area {
	height: 100vh;
	width: 750rpx;
	top: 0;
	position: fixed;
	pointer-events: none; //此处要加，鼠标事件可以渗透
	.movable-view {
		width: $all_width;
		height: $all_height;
		background-color: #e0d6d3;
		border-radius: 50%;
		pointer-events: auto; //恢复鼠标事件
		image {
			width: $all_width;
			height: $all_height;
		}
	}
}
</style>
