<template>
	<view class="fixed-btn" id="fixedBtn">
		<div class="btn">
			<u-button type="primary" :shape="shape" size="large">添加</u-button>
		</div>
		<div class="btn" v-if="showCancel">
			<u-button shape="circle" size="large">取消</u-button>
		</div>
	</view>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';

const props = defineProps({
	confirmText: {
		type: String,
		default: '添加'
	},
	showCancel: {
		type: Boolean,
		default: false
	},
	shape: {
		type: String,
		default: 'squre' // squre circle
	}
});

const emits = defineEmits(['load']);

function load() {
	const query = uni.createSelectorQuery().in(this);
	query
		.selectComponent('#fixedBtn') // 若用ref，需注意：ref是字符串时，这里用#ref值；ref是变量时需其他方式
		.boundingClientRect((data) => {
			console.log('组件内元素高度：', data?.height);
		})
		.exec();
}

onMounted(() => {
	nextTick(() => {
		load();
	});
});
</script>

<style scoped lang="scss">
.fixed-btn {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	gap: 20upx;
	flex-direction: column;
	padding: 20upx 28upx calc(40upx + env(safe-area-inset-bottom) / 2) 20upx;
	background-color: #fff;
	.btn {
		flex: 1;
	}
}
</style>
