<template>
|
|
<view @click="$emit('confirm')" :style="{
|
|
position: 'fixed',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
width: '100vw',
|
|
bottom: bottom
|
|
}">
|
|
<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: '36rpx' // 设置默认字体大小
|
|
},
|
|
text: {
|
|
default: '按钮' // 设置默认文本内容
|
|
},
|
|
width: {
|
|
default: '150rpx' // 设置默认宽度
|
|
},
|
|
height: {
|
|
default: '60rpx' // 设置默认高度
|
|
},
|
|
borderRadius: {
|
|
default: '40rpx' // 设置默认高度
|
|
},
|
|
bottom: {
|
|
default: '40rpx' // 设置默认距离底部高度
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
// .container {
|
|
// position: fixed;
|
|
// display: flex;
|
|
// justify-content: center;
|
|
// /* 水平居中 */
|
|
// align-items: center;
|
|
// /* 垂直居中 */
|
|
// width: 100%;
|
|
// /* 使容器宽度覆盖整个屏幕 */
|
|
// }
|
|
|
|
button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style>
|