<template>
	<view class="relative">
		<slot v-if="$slots.default" name="default"></slot>
		<up-icon v-else name="share-square" bold :color="color" :size="size"></up-icon>
		<view class="absolute share-box">
			<button open-type="share" @click.stop="shareClick">分享</button>
		</view>
	</view>
</template>

<script setup>
	const emits = defineEmits(['shareClick'])
	const props = defineProps({
		size: {
			type: String,
			default: '36rpx'
		},
		color:{
			type: String,
			default: '#333'
		}
	})

	function shareClick() {
		emits('shareClick')
	}
</script>

<style lang="scss">
	.share-box {
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		opacity: 0;
		overflow: hidden;
	}
</style>