refactor: Numpad 组件支持 fixed prop — 弹窗内嵌 / 页面固定两种模式
This commit is contained in:
@@ -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);
|
|
||||||
|
&.numpad-fixed {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: $surface;
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.key {
|
.key {
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user