83 行
1.6 KiB
Plaintext
83 行
1.6 KiB
Plaintext
<template>
|
|
<view class="container">
|
|
<view class="input-section">
|
|
<input id="uni-input-box" class="input-box" type="text" :value="data.inputValue" placeholder="点击输入框显示键盘" :focus="data.isFocus" hold-keyboard="true" />
|
|
<button class="btn" @click="hideKeyboard">隐藏键盘</button>
|
|
</view>
|
|
<view class="info-section">
|
|
<text class="info-text">键盘高度: {{data.keyboardHeight}}px</text>
|
|
<text class="info-text">键盘状态: {{data.keyboardStatus}}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
|
|
type DataType = {
|
|
inputValue: string,
|
|
isFocus: boolean,
|
|
keyboardHeight: number,
|
|
keyboardStatus: string,
|
|
}
|
|
|
|
// 使用reactive包装数据，便于自动化测试获取
|
|
const data = reactive({
|
|
inputValue: '',
|
|
isFocus: false,
|
|
keyboardHeight: 0,
|
|
keyboardStatus: '未显示',
|
|
} as DataType)
|
|
|
|
function hideKeyboard() {
|
|
uni.hideKeyboard();
|
|
}
|
|
|
|
onLoad(() => {
|
|
// 监听键盘高度变化
|
|
uni.onKeyboardHeightChange(res => {
|
|
data.keyboardHeight = res.height;
|
|
data.keyboardStatus = res.height > 0 ? '显示中' : '已隐藏';
|
|
});
|
|
})
|
|
|
|
onUnload(() => {
|
|
// 页面卸载时移除监听
|
|
uni.offKeyboardHeightChange();
|
|
})
|
|
|
|
defineExpose({
|
|
data,
|
|
hideKeyboard
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.container {
|
|
padding: 20px;
|
|
}
|
|
.input-section {
|
|
margin-bottom: 20px;
|
|
}
|
|
.input-box {
|
|
width: 100%;
|
|
height: 40px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
padding: 0 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.btn {
|
|
background-color: #007AFF;
|
|
color: #fff;
|
|
}
|
|
.info-section {
|
|
margin-top: 20px;
|
|
}
|
|
.info-text {
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
font-size: 16px;
|
|
color: #333;
|
|
}
|
|
</style>
|