60 lines
1.5 KiB
Vue
60 lines
1.5 KiB
Vue
<template>
|
|
<view class="footer flex px-15 py-12 text-center bg-white" :style="elderVarStyle">
|
|
<view v-if="showCancel" :style="buttonWidth" class="button-item button-outline text-primary rounded"
|
|
@click="cancel()">
|
|
{{ cancelText }}
|
|
</view>
|
|
<view v-if="showConfirm" :style="buttonWidth" class="button-item button-primary text-white bg-primary rounded"
|
|
@click="confirm()">
|
|
{{ confirmText }}
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import useElder from '@/hooks/useElder';
|
|
|
|
const emits = defineEmits(['cancel', 'confirm'])
|
|
const props = defineProps({
|
|
showCancel: { type: Boolean, default: true },
|
|
showConfirm: { type: Boolean, default: true },
|
|
cancelText: { type: String, default: '取消' },
|
|
confirmText: { type: String, default: '确定' },
|
|
})
|
|
const buttonWidth = computed(() => `width: ${100 / (props.showCancel + props.showConfirm)}%`)
|
|
|
|
function cancel() {
|
|
emits('cancel')
|
|
}
|
|
function confirm() {
|
|
emits('confirm')
|
|
}
|
|
|
|
const { elderVarStyle } = useElder();
|
|
|
|
</script>
|
|
<style scoped>
|
|
.footer {
|
|
position: relative;
|
|
box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.button-item+.button-item {
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.button-outline {
|
|
font-size: var(--text-base);
|
|
height: 44px;
|
|
line-height: 43px;
|
|
border: 1px solid;
|
|
}
|
|
|
|
.button-primary {
|
|
margin-left: 20rpx;
|
|
font-size: var(--text-base);
|
|
height: 44px;
|
|
line-height: 43px;
|
|
border: 1px solid $theme-brown-primary;
|
|
}
|
|
</style> |