<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>
|