refactor: Numpad 组件支持 fixed prop — 弹窗内嵌 / 页面固定两种模式

This commit is contained in:
2026-06-09 09:10:36 +08:00
parent 7bf899f0b1
commit df6f1a54d6
2 changed files with 18 additions and 16 deletions

View File

@@ -1,5 +1,5 @@
<template> <template>
<view class="numpad"> <view class="numpad" :class="{ 'numpad-fixed': fixed }">
<view class="key" v-for="key in keys" :key="key" @tap="onKeyTap(key)"> <view class="key" v-for="key in keys" :key="key" @tap="onKeyTap(key)">
<text class="key-text">{{ key }}</text> <text class="key-text">{{ key }}</text>
</view> </view>
@@ -24,9 +24,12 @@ const props = withDefaults(defineProps<{
modelValue?: string modelValue?: string
/** 最大金额(元) */ /** 最大金额(元) */
max?: number max?: number
/** 是否固定在底部(弹窗中使用时设为 false */
fixed?: boolean
}>(), { }>(), {
modelValue: '', modelValue: '',
max: 9999999.99 max: 9999999.99,
fixed: true
}) })
const emit = defineEmits<{ const emit = defineEmits<{
@@ -96,9 +99,17 @@ function onConfirm() {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: $space-sm; gap: $space-sm;
padding: 0 $space-xl; padding: $space-sm $space-xl;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom); &.numpad-fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: $surface;
padding-bottom: env(safe-area-inset-bottom);
z-index: 100;
}
} }
.key { .key {

View File

@@ -135,10 +135,8 @@
</picker> </picker>
</view> </view>
<!-- 数字键盘 --> <!-- 数字键盘内嵌模式不固定在底部 -->
<view class="form-numpad-wrap"> <Numpad v-model="amountStr" :fixed="false" />
<Numpad v-model="amountStr" />
</view>
</scroll-view> </scroll-view>
<view class="modal-footer" @tap="handleSubmit"> <view class="modal-footer" @tap="handleSubmit">
<text class="submit-text">{{ editingId ? '保存修改' : '添加' }}</text> <text class="submit-text">{{ editingId ? '保存修改' : '添加' }}</text>
@@ -501,11 +499,4 @@ function goBack() { uni.navigateBack() }
&:active { opacity: 0.8; } &:active { opacity: 0.8; }
} }
/* Numpad 内嵌在表单中 */
.form-numpad-wrap {
margin-top: $space-sm;
background: $bg;
border-radius: $radius-lg;
overflow: hidden;
}
</style> </style>