hotel-tablecloth-uniapp-24-08-29/components/bottom/bottomBtn.vue

<template>
	<view class="container" @click="$emit('confirm')">
		<button 
		:style="{
			     color: color,
			     backgroundColor: backgroundColor,
			     fontSize: fontSize,
			     width: width,
			     height: height,
			     borderRadius: borderRadius
			   }">
			{{ text }}
		</button>
	</view>
</template>

<script>
	export default {
		props: {
			color: {
				default: '#000000' // 设置默认颜色值
			},
			backgroundColor: {
				default: '#FFFFFF' // 设置默认背景颜色
			},
			fontSize: {
				default: '14px' // 设置默认字体大小
			},
			text: {
				default: '按钮' // 设置默认文本内容
			},
			width: {
				default: '100px' // 设置默认宽度
			},
			height: {
				default: '200rpx' // 设置默认高度
			},
			borderRadius: {
				default: '20rpx' // 设置默认高度
			},
			
		},
 
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="less">
	.container {
		position: fixed;
		bottom: 50rpx;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		width: 100%;
		/* 使容器宽度覆盖整个屏幕 */
	}

	button {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>