Browse Source
feat(keyboard): 添加数字键盘组件并优化z-index层级
feat(keyboard): 添加数字键盘组件并优化z-index层级
添加新的数字键盘组件用于商品数量输入，包含数字输入、清空、删除和确认功能 统一调整多个组件的z-index值以优化页面层级显示master
9 changed files with 450 additions and 46 deletions
-
2components/custom-tab-bar/my-tab-bar.vue
-
189components/keyboard/keyboard copy.vue
-
205components/keyboard/keyboard.vue
-
2components/navigation/navigation.vue
-
34pages/allDish/allDish.scss
-
22pages/home/home.vue
-
18pages/joinEnterprise/joinEnterprise.scss
-
18pages/recipeOrder/recipeOrder.scss
-
6pages/shoppingCart/shoppingCart.scss
@ -0,0 +1,189 @@ |
|||
<script setup> |
|||
import { defineEmits, ref } from "vue"; |
|||
|
|||
const emit = defineEmits(["confirm", "cancel"]); |
|||
|
|||
const inputValue = ref("1"); |
|||
function onTap(key) { |
|||
if (key === "confirm") { |
|||
// 处理确定按钮点击事件 |
|||
emit("confirm", Number(inputValue.value)); |
|||
} |
|||
else if (key === "cancel") { |
|||
// 处理取消按钮点击事件 |
|||
emit("cancel"); |
|||
} |
|||
else if (key === "clear") { |
|||
// 处理清空按钮点击事件 |
|||
inputValue.value = ""; |
|||
} |
|||
else if (key === "delete") { |
|||
// 处理删除按钮点击事件 |
|||
inputValue.value = inputValue.value.slice(0, -1); |
|||
} |
|||
else { |
|||
// 处理数字键点击事件 |
|||
inputValue.value += key; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<view class="keyboard"> |
|||
<view class="keyboard-body"> |
|||
<input class="select-num-top" placeholder="限0~999" disabled :value="inputValue"> |
|||
<view class="key" @tap="() => onTap('1')"> |
|||
1 |
|||
</view> |
|||
<view class="key" @tap="() => onTap('2')"> |
|||
2 |
|||
</view> |
|||
<view class="key" @tap="() => onTap('3')"> |
|||
3 |
|||
</view> |
|||
<view class="key action delete" @tap="() => onTap('delete')"> |
|||
⌫ |
|||
</view> |
|||
|
|||
<view class="key" @tap="() => onTap('4')"> |
|||
4 |
|||
</view> |
|||
<view class="key" @tap="() => onTap('5')"> |
|||
5 |
|||
</view> |
|||
<view class="key" @tap="() => onTap('6')"> |
|||
6 |
|||
</view> |
|||
<view class="key action clear" @tap="() => onTap('clear')"> |
|||
清空 |
|||
</view> |
|||
|
|||
<view class="key" @tap="() => onTap('7')"> |
|||
7 |
|||
</view> |
|||
<view class="key" @tap="() => onTap('8')"> |
|||
8 |
|||
</view> |
|||
<view class="key" @tap="() => onTap('9')"> |
|||
9 |
|||
</view> |
|||
<view class="key action confirm" @tap="() => onTap('confirm')"> |
|||
确定 |
|||
</view> |
|||
|
|||
<view class="key zero span-2" @tap="() => onTap('0')"> |
|||
0 |
|||
</view> |
|||
<view class="key cancel" @tap="() => onTap('cancel')"> |
|||
取消 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<style lang="scss" scoped> |
|||
.keyboard { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
z-index: 999999; |
|||
background: rgba(0, 0, 0, 0.2); |
|||
|
|||
} |
|||
|
|||
/* Grid 容器：3列数字 + 1列操作 */ |
|||
.keyboard-body { |
|||
box-sizing: border-box; |
|||
background: #f2f3f5; |
|||
padding: 20rpx 20rpx env(safe-area-inset-bottom) 20rpx; |
|||
left: 0; |
|||
bottom: 0; |
|||
display: grid; |
|||
position: fixed; |
|||
width: 100%; |
|||
grid-template-columns: repeat(3, 1fr) 1fr; /* 四列 */ |
|||
/* 顶部输入占一整行 + 下方4行按键 */ |
|||
grid-template-rows: 100rpx repeat(4, 84rpx); |
|||
gap: 12rpx; |
|||
} |
|||
|
|||
/* 键通用样式 */ |
|||
.key { |
|||
background-color: #fff; |
|||
border-radius: 12rpx; |
|||
// border: 1px solid #d8d8d8; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: $text-4xl; |
|||
font-weight: 430; |
|||
&:active { |
|||
background-color: #e0e2e7; |
|||
} |
|||
} |
|||
|
|||
/* 0 跨两列：第4行的第1-2列 */ |
|||
.span-2 { |
|||
grid-column: 1 / span 2; |
|||
} |
|||
|
|||
/* 取消：第4行第3列 */ |
|||
.cancel { |
|||
grid-column: 3; |
|||
grid-row: 4; |
|||
background-color: #e0e2e7; |
|||
&:active { |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
|
|||
/* 右侧操作列（第4列） */ |
|||
.action { |
|||
background-color: #e0e2e7; |
|||
&:active { |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
|
|||
/* 删除：第1行第4列 */ |
|||
.action.delete { |
|||
grid-column: 4; |
|||
grid-row: 2; |
|||
} |
|||
|
|||
/* 清空：第2行第4列 */ |
|||
.action.clear { |
|||
grid-column: 4; |
|||
grid-row: 3; |
|||
} |
|||
|
|||
/* 确定：第3行开始，跨两行占第3-4行第4列 */ |
|||
.action.confirm { |
|||
grid-column: 4; |
|||
grid-row: 4 / span 2; |
|||
} |
|||
|
|||
/* 取消：第5行第3列 */ |
|||
.cancel { |
|||
grid-column: 3; |
|||
grid-row: 5; |
|||
} |
|||
|
|||
/* 顶部输入：跨4列、位于第1行 */ |
|||
.keyboard .select-num-top { |
|||
height: 100rpx; |
|||
border: none; |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
color: #000; |
|||
padding: 0rpx 10rpx; |
|||
text-align: center; |
|||
border-radius: 12rpx; |
|||
background: #fff; |
|||
/* 关键定位 */ |
|||
grid-column: 1 / -1; |
|||
grid-row: 1; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,205 @@ |
|||
<script setup> |
|||
import { defineEmits, ref } from "vue"; |
|||
|
|||
const emit = defineEmits(["confirm", "cancel"]); |
|||
|
|||
const inputValue = ref(""); |
|||
function onTap(key) { |
|||
if (key === "confirm") { |
|||
// 处理确定按钮点击事件 |
|||
if (inputValue.value === "") { |
|||
uni.showToast({ |
|||
title: "请输入数量", |
|||
icon: "none", |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
emit("confirm", Number(inputValue.value)); |
|||
} |
|||
else if (key === "cancel") { |
|||
// 处理取消按钮点击事件 |
|||
emit("cancel"); |
|||
} |
|||
else if (key === "clear") { |
|||
// 处理清空按钮点击事件 |
|||
inputValue.value = ""; |
|||
} |
|||
else if (key === "delete") { |
|||
// 处理删除按钮点击事件 |
|||
inputValue.value = inputValue.value.slice(0, -1); |
|||
} |
|||
else { |
|||
// 处理数字键点击事件 |
|||
const nextValue = inputValue.value + key; |
|||
if (nextValue > 999) { |
|||
uni.showToast({ |
|||
title: "数量不能超过999", |
|||
icon: "none", |
|||
}); |
|||
return; |
|||
} |
|||
inputValue.value = `${Number(nextValue)}`; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<view class="keyboard"> |
|||
<view class="keyboard-body"> |
|||
<input class="select-num-top" placeholder="限0~999" disabled :value="inputValue"> |
|||
<view class="key" @tap="() => onTap('1')"> |
|||
1 |
|||
</view> |
|||
<view class="key" @tap="() => onTap('2')"> |
|||
2 |
|||
</view> |
|||
<view class="key" @tap="() => onTap('3')"> |
|||
3 |
|||
</view> |
|||
<view class="key action delete" @tap="() => onTap('delete')"> |
|||
⌫ |
|||
</view> |
|||
|
|||
<view class="key" @tap="() => onTap('4')"> |
|||
4 |
|||
</view> |
|||
<view class="key" @tap="() => onTap('5')"> |
|||
5 |
|||
</view> |
|||
<view class="key" @tap="() => onTap('6')"> |
|||
6 |
|||
</view> |
|||
<view class="key action clear" @tap="() => onTap('clear')"> |
|||
清空 |
|||
</view> |
|||
|
|||
<view class="key" @tap="() => onTap('7')"> |
|||
7 |
|||
</view> |
|||
<view class="key" @tap="() => onTap('8')"> |
|||
8 |
|||
</view> |
|||
<view class="key" @tap="() => onTap('9')"> |
|||
9 |
|||
</view> |
|||
<view class="key action confirm" @tap="() => onTap('confirm')"> |
|||
确定 |
|||
</view> |
|||
|
|||
<view class="key zero span-2" @tap="() => onTap('0')"> |
|||
0 |
|||
</view> |
|||
<view class="key cancel" @tap="() => onTap('cancel')"> |
|||
取消 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<style lang="scss" scoped> |
|||
.keyboard { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
z-index: 11; |
|||
background: rgba(0, 0, 0, 0.2); |
|||
|
|||
} |
|||
|
|||
/* Grid 容器：3列数字 + 1列操作 */ |
|||
.keyboard-body { |
|||
box-sizing: border-box; |
|||
background: #f2f3f5; |
|||
padding: 20rpx 20rpx env(safe-area-inset-bottom) 20rpx; |
|||
left: 0; |
|||
bottom: 0; |
|||
display: grid; |
|||
position: fixed; |
|||
width: 100%; |
|||
grid-template-columns: repeat(3, 1fr) 1fr; /* 四列 */ |
|||
/* 顶部输入占一整行 + 下方4行按键 */ |
|||
grid-template-rows: 100rpx repeat(4, 84rpx); |
|||
gap: 12rpx; |
|||
} |
|||
|
|||
/* 键通用样式 */ |
|||
.key { |
|||
background-color: #fff; |
|||
border-radius: 12rpx; |
|||
// border: 1px solid #d8d8d8; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: $text-4xl; |
|||
font-weight: 430; |
|||
&:active { |
|||
background-color: #e0e2e7; |
|||
} |
|||
} |
|||
|
|||
/* 0 跨两列：第4行的第1-2列 */ |
|||
.span-2 { |
|||
grid-column: 1 / span 2; |
|||
} |
|||
|
|||
/* 取消：第4行第3列 */ |
|||
.cancel { |
|||
grid-column: 3; |
|||
grid-row: 4; |
|||
background-color: #e0e2e7; |
|||
&:active { |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
|
|||
/* 右侧操作列（第4列） */ |
|||
.action { |
|||
background-color: #e0e2e7; |
|||
&:active { |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
|
|||
/* 删除：第1行第4列 */ |
|||
.action.delete { |
|||
grid-column: 4; |
|||
grid-row: 2; |
|||
} |
|||
|
|||
/* 清空：第2行第4列 */ |
|||
.action.clear { |
|||
grid-column: 4; |
|||
grid-row: 3; |
|||
} |
|||
|
|||
/* 确定：第3行开始，跨两行占第3-4行第4列 */ |
|||
.action.confirm { |
|||
grid-column: 4; |
|||
grid-row: 4 / span 2; |
|||
} |
|||
|
|||
/* 取消：第5行第3列 */ |
|||
.cancel { |
|||
grid-column: 3; |
|||
grid-row: 5; |
|||
} |
|||
|
|||
/* 顶部输入：跨4列、位于第1行 */ |
|||
.keyboard .select-num-top { |
|||
height: 100rpx; |
|||
border: none; |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
color: #000; |
|||
padding: 0rpx 10rpx; |
|||
text-align: center; |
|||
border-radius: 12rpx; |
|||
background: #fff; |
|||
/* 关键定位 */ |
|||
grid-column: 1 / -1; |
|||
grid-row: 1; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue