131 lines
2.5 KiB
Vue
131 lines
2.5 KiB
Vue
<template>
|
||
<view class="bottom-button" :class="buttonClass" @click="handleClick">
|
||
<text class="button-text">{{ title }}</text>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'BottomButton',
|
||
props: {
|
||
// 按钮标题
|
||
title: {
|
||
type: String,
|
||
default: '确认'
|
||
},
|
||
// 按钮类型：primary(主要), secondary(次要), danger(危险)
|
||
type: {
|
||
type: String,
|
||
default: 'primary',
|
||
validator: value => ['primary', 'secondary', 'danger'].includes(value)
|
||
},
|
||
// 是否禁用
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 自定义样式类
|
||
customClass: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
computed: {
|
||
buttonClass() {
|
||
return [
|
||
'bottom-button',
|
||
`bottom-button--${this.type}`,
|
||
{
|
||
'bottom-button--disabled': this.disabled
|
||
},
|
||
this.customClass
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
handleClick() {
|
||
if (this.disabled) {
|
||
return
|
||
}
|
||
this.$emit('click')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.bottom-button {
|
||
position: fixed;
|
||
bottom: 40rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 600rpx;
|
||
height: 100rpx;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 10;
|
||
transition: all 0.3s ease;
|
||
|
||
.button-text {
|
||
color: #FFFFFF;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
|
||
// 主要按钮样式（默认）
|
||
&--primary {
|
||
background-color: #8B2E2E;
|
||
box-shadow: 0 8rpx 20rpx rgba(139, 46, 46, 0.3);
|
||
|
||
&:active {
|
||
background-color: #7A2A2A;
|
||
transform: translateX(-50%) scale(0.98);
|
||
}
|
||
}
|
||
|
||
// 次要按钮样式
|
||
&--secondary {
|
||
background-color: #F5F0E7;
|
||
border: 2rpx solid #8B2E2E;
|
||
box-shadow: 0 4rpx 12rpx rgba(139, 46, 46, 0.1);
|
||
|
||
.button-text {
|
||
color: #8B2E2E;
|
||
}
|
||
|
||
&:active {
|
||
background-color: #F0EBE0;
|
||
transform: translateX(-50%) scale(0.98);
|
||
}
|
||
}
|
||
|
||
// 危险按钮样式
|
||
&--danger {
|
||
background-color: #DC3545;
|
||
box-shadow: 0 8rpx 20rpx rgba(220, 53, 69, 0.3);
|
||
|
||
&:active {
|
||
background-color: #C82333;
|
||
transform: translateX(-50%) scale(0.98);
|
||
}
|
||
}
|
||
|
||
// 禁用状态
|
||
&--disabled {
|
||
background-color: #CCCCCC !important;
|
||
box-shadow: none !important;
|
||
cursor: not-allowed;
|
||
|
||
.button-text {
|
||
color: #999999;
|
||
}
|
||
|
||
&:active {
|
||
transform: translateX(-50%) !important;
|
||
}
|
||
}
|
||
}
|
||
</style> |