键盘折叠

This commit is contained in:
weiwei committed 2025-04-14 14:32:16 +08:00
1 parent 9dde19289d
commit 0be23710ad
5 files changed
+17 -19

No files matched your search

+13 -8
View File
@@ -1,8 +1,12 @@
<template>
<view class="bg-[#f5f5f5] px-1 py-2 rounded-4 absolute bottom-0 w-full">
<view class="flex mb-2.5" v-for="(row, rowIndex) in keyboardLayout" :key="rowIndex">
<view class="bg-[#f5f5f5] px-1 py-2 rounded-4 fixed bottom-0 left-0 right-0 w-full">
<view class="flex justify-end">
<image v-show="show" class="w-[50rpx] h-[50rpx] mx-2 mb-1" src="@/static/page/折叠.svg" @click="show = !show" />
<image v-show="!show" class="w-[50rpx] h-[50rpx] mx-2 mb-1" src="@/static/page/展开.svg" @click="show = !show" />
</view>
<view v-show="show" class="flex mb-2.5" v-for="(row, rowIndex) in keyboardLayout" :key="rowIndex">
<view
class="flex-1 h-[60px] flex items-center justify-center bg-white text-2xl text-[#333] mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
class="flex-1 h-[80rpx] flex items-center justify-center bg-white text-2xl text-[#333] mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
v-for="(key, keyIndex) in row"
:key="keyIndex"
@click="handleKeyPress(key.toString())"
@@ -10,24 +14,24 @@
{{ key }}
</view>
</view>
<view class="flex mb-0">
<view v-show="show" class="flex mb-0">
<view
class="flex-1 h-[60px] flex items-center justify-center bg-white text-2xl text-[#333] mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
class="flex-1 h-[80rpx] flex items-center justify-center bg-white text-2xl text-[#333] mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
@click="handleKeyPress('.')"
>
.
</view>
<view
class="flex-auto h-[60px] flex items-center justify-center bg-white text-2xl text-[#333] mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
class="flex-auto h-[80rpx] flex items-center justify-center bg-white text-2xl text-[#333] mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
@click="handleKeyPress('0')"
>
0
</view>
<view
class="flex-1 h-[60px] flex items-center justify-center bg-white mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
class="flex-1 h-[80rpx] flex items-center justify-center bg-white mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
@click="handleDelete"
>
<image class="w-[30px] h-[30px]" src="@/static/page/keyboardDelete.svg" />
<image class="w-[30rpx] h-[30rpx]" src="@/static/page/keyboardDelete.svg" />
</view>
</view>
</view>
@@ -43,6 +47,7 @@ const keyboardLayout = ref([
["4", "5", "6"],
["7", "8", "9"],
])
const show = ref(true)
// 按下键盘
const handleKeyPress = (key) => {