寫之前要考慮：

1. 鍵盤展開后，不能超過手機邊緣
2. 在底部展開鍵盤，鍵盤應出現在展開按鈕上方；以此類推
3. 重復點擊展開按鈕，關閉鍵盤

效果：

代碼如下，有些按鍵邏輯還需要優化

<template><view class="container"><!-- 可拖動按鈕 --><viewclass="drag-btn":style="{left: btnLeft + 'px', top: btnTop + 'px'}"@touchstart="onTouchStart"@touchmove="onTouchMove"@touchend="onTouchEnd"@click="showKeyboard"><text>鍵盤</text></view><!-- 小鍵盤 --><viewv-if="isShowKeyBoard"class="keyboard":style="keyboardStyle"><view v-for="(row, rowIndex) in keyboardLayout" :key="rowIndex" class="keyboard-row"><viewv-for="(key, keyIndex) in row":key="keyIndex"class="key":class="key.className || ''"@click="onKeyPress($event,key.value)">{{ key.name }}</view></view></view></view>
</template><script>
export default {data () {return {btnLeft: 100, // 按鈕初始位置btnTop: 100,startX: 0, // 觸摸起始位置startY: 0,isDragging: false, // 是否正在拖動isShowKeyBoard: false, // 是否顯示鍵盤screenWidth: 375, // 屏幕寬度，會在onLoad中獲取實際值screenHeight: 667, // 屏幕高度keyboardWidth: 330, // 鍵盤寬度keyboardHeight: 170, // 鍵盤高度// 鍵盤布局keyboardLayout: [// 第一行[{name: 'Esc', value: 0x1},{name: '1', value: 0x2},{name: '2', value: 0x3},{name: '3', value: 0x4},{name: '4', value: 0x5},{name: '5', value: 0x6},{name: '6', value: 0x7},{name: '7', value: 0x8},{name: '8', value: 0x9},{name: '9', value: 0xa},{name: '0', value: 0xb},{name: '-', value: 0xc},{name: '=', value: 0xd},{name: '←', value: 0xe, className: 'wide-key'}],// 第二行[{name: 'Tab', value: 0xf, className: 'wide-key'},{name: 'q', value: 0x10},{name: 'w', value: 0x11},{name: 'e', value: 0x12},{name: 'r', value: 0x13},{name: 't', value: 0x14},{name: 'y', value: 0x15},{name: 'u', value: 0x16},{name: 'i', value: 0x17},{name: 'o', value: 0x18},{name: 'p', value: 0x19},{name: '[', value: 0x1a},{name: ']', value: 0x1b},{name: '\\', value: 0x2b}],// 第三行[{name: 'Caps', value: 0x3a, className: 'wide-key'},{name: 'a', value: 0x1e},{name: 's', value: 0x1f},{name: 'd', value: 0x20},{name: 'f', value: 0x21},{name: 'g', value: 0x22},{name: 'h', value: 0x23},{name: 'j', value: 0x24},{name: 'k', value: 0x25},{name: 'l', value: 0x26},{name: ';', value: 0x27},{name: '\'', value: 0x28},{name: 'Enter', value: 0x1c, className: 'wide-key'}],// 第四行[{name: 'Shift', value: 0x2a, className: 'extra-wide-key'},{name: 'z', value: 0x2c},{name: 'x', value: 0x2d},{name: 'c', value: 0x2e},{name: 'v', value: 0x2f},{name: 'b', value: 0x30},{name: 'n', value: 0x31},{name: 'm', value: 0x32},{name: ',', value: 0x33},{name: '.', value: 0x34},{name: '/', value: 0x35},{name: 'Shift', value: 0x36, className: 'extra-wide-key'}],// 第五行[{name: 'Ctrl', value: 0x1d, className: 'wide-key'},{name: 'Alt', value: 0x38, className: 'wide-key'},{name: '空格', value: 0x39, className: 'space-key'},{name: 'Alt', value: 0x138, className: 'wide-key'},{name: 'Ctrl', value: 0x11d, className: 'wide-key'}]]}},computed: {// 計算鍵盤位置樣式keyboardStyle () {let left = this.btnLeftlet top = this.btnTop + 50 // 默認在按鈕下方// 如果鍵盤會超出右邊界，則放在左側if (left + this.keyboardWidth > this.screenWidth) {left = this.btnLeft - this.keyboardWidth}// 如果鍵盤會超出下邊界，則放在上方if (top + this.keyboardHeight > this.screenHeight) {top = this.btnTop - this.keyboardHeight}// 確保不超出左邊界和上邊界left = Math.max(0, left)top = Math.max(0, top)return {left: left + 'px',top: top + 'px',width: this.keyboardWidth + 'px',height: this.keyboardHeight + 'px'}}},onLoad () {// 獲取屏幕尺寸uni.getSystemInfo({success: (res) => {this.screenWidth = res.windowWidththis.screenHeight = res.windowHeight// 初始位置設置為屏幕中間this.btnLeft = (res.windowWidth - 50) / 2this.btnTop = (res.windowHeight - 50) / 2}})},methods: {onTouchStart (e) {this.startX = e.touches[0].clientXthis.startY = e.touches[0].clientYthis.isDragging = false// 隱藏鍵盤// this.isShowKeyBoard = false},onTouchMove (e) {const moveX = e.touches[0].clientX - this.startXconst moveY = e.touches[0].clientY - this.startY// 移動距離大于5px才認為是拖動if (Math.abs(moveX) > 5 || Math.abs(moveY) > 5) {this.isDragging = true}// 計算新位置let newLeft = this.btnLeft + moveXlet newTop = this.btnTop + moveY// 限制不超出屏幕邊界newLeft = Math.max(0, Math.min(newLeft, this.screenWidth - 50))newTop = Math.max(0, Math.min(newTop, this.screenHeight - 50))// 更新位置this.btnLeft = newLeftthis.btnTop = newTop// 更新起始位置，實現連續拖動this.startX = e.touches[0].clientXthis.startY = e.touches[0].clientY// 阻止默認行為和冒泡e.preventDefault()e.stopPropagation()},onTouchEnd (e) {if (this.isDragging) {// 如果是拖動操作，阻止點擊事件e.preventDefault()e.stopPropagation()}this.isDragging = false},showKeyboard () {if (!this.isDragging) {this.isShowKeyBoard = !this.isShowKeyBoard}},onKeyPress (e, key) {this.$emit('onKeyPress', e, key)// spiceInterface.onKeyUpdate(Number(key), true)// spiceInterface.onKeyUpdate(Number(key), false)// 這里可以添加按鍵處理邏輯// 例如：uni.vibrateShort() 震動反饋}}
}
</script><style scoped>
.container {position: relative;/* width: 100%;height: 100vh; */
}.drag-btn {position: fixed;width: 45px;height: 45px;background-color: #007AFF;border-radius: 25px;display: flex;justify-content: center;align-items: center;color: white;font-size: 12px;z-index: 999;touch-action: none; /* 防止觸摸事件的默認行為 */
}.keyboard {position: fixed;background-color: #f0f0f0;border-radius: 8px;padding: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);z-index: 998;
}.keyboard-row {display: flex;justify-content: center;margin-bottom: 5px;
}.key {width: 25px;height: 30px;margin: 0 2px;background-color: white;border-radius: 4px;display: flex;justify-content: center;align-items: center;font-size: 14px;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.wide-key {width: 45px !important; /* 比普通鍵寬 */
}.extra-wide-key {width: 80px !important; /* 更寬的鍵 */
}.space-key {width: 200px !important; /* 空格鍵特別寬 */
}
</style>