<template>
	<view class="safe-bottom" :style="[style]" :class="['el-safe-inset-bottom']"></view>
</template>

<script setup>
	import { computed,watch,ref,onMounted,nextTick,getCurrentInstance } from "vue";
	import { addStyle } from "../../libs/style.js";
	import { deepMerge } from "../../libs/utils.js";
	
	const props = defineProps({
		customStyle: {
		    type: [Object,String],
		    default: {}
		}
	});
	
	const style = computed(()=>{
		const style = {};
		return deepMerge(style, addStyle(props.customStyle));
	});
	
</script>

<style lang="scss" scoped>
	.safe-bottom {
		width: 100%;
	// 	padding-bottom: 0;  
	// 	padding-bottom: constant(safe-area-inset-bottom);  
	// 	padding-bottom: env(safe-area-inset-bottom);  
	}
</style>