<template>
  <view class="back" :style="{top: top + 'px'}" @click="handleBack">
    <uni-icons type="back" size="24" :color="color"></uni-icons>
  </view>
</template>

<script>
	import { ref, onMounted } from 'vue';
	export default {
		props: {
		  color: {
		    type: String,
		    default: '#333',
		  },
			back: Function,
		},
		data() {
			return {
				top: 0
			}
		},
		mounted() {
			const rect = uni.getMenuButtonBoundingClientRect();
			top.value = rect.top + (rect.height - 30) / 2;
		},
		
		methods: {
			handleBack() {
				uni.navigateBack({
				  delta: 1,
				});
			}
		},
	}
  
  
</script>

<style scoped>
  .back {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 10rpx;
    width: 60rpx;
    height: 60rpx;
    z-index: 99;
  }
</style>