80 lines
1.5 KiB
Vue
80 lines
1.5 KiB
Vue
|
<template>
|
|||
|
|
<view class="form-btn-group" :class="type === 'short' ?'flex justify-end':''">
|
|||
|
|
<button class="form-btn-group__btn" :class="btnClass" :style="[btnStyle]" @click="onConfirm">{{title}}</button>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: "index",
|
|||
|
|
props:{
|
|||
|
|
title: {
|
|||
|
|
type: String,
|
|||
|
|
default: '确定',
|
|||
|
|
},
|
|||
|
|
widthNum: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'auto',
|
|||
|
|
},
|
|||
|
|
backgroundColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#2291F8'
|
|||
|
|
},
|
|||
|
|
// btn样式，长还是短的
|
|||
|
|
type: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'long',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
btnClass() {
|
|||
|
|
return this.type === 'short' ? 'confirm-short' : 'confirm-long'
|
|||
|
|
},
|
|||
|
|
btnStyle() {
|
|||
|
|
return {
|
|||
|
|
width: this.widthNum,
|
|||
|
|
background: this.backgroundColor
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
onConfirm() {
|
|||
|
|
this.$emit('handleConfirm')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
$btn-height: calc(110rpx + var(--safe-area-inset-bottom));
|
|||
|
|
.form-btn-group {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
height: $btn-height;
|
|||
|
|
background-color: #fff;
|
|||
|
|
padding: 20rpx 30rpx;
|
|||
|
|
padding-bottom: var(--safe-area-inset-bottom);
|
|||
|
|
|
|||
|
|
&__btn {
|
|||
|
|
height: 88rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
border-radius: 43rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
|
|||
|
|
&.confirm-long {
|
|||
|
|
// background: #2291F8;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
&.confirm-short {
|
|||
|
|
border: 1px solid #CCCCCC;
|
|||
|
|
color: #333333;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|