更新记录
1.0.2(2024-11-09)
下载此版本
优化
1.0.1(2024-11-06)
下载此版本
ios 优化
1.0.0(2024-10-30)
下载此版本
初版
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
x-fixed-keyboard
将 input, textarea 或其他内容固定在键盘上方
在使用自定义导航栏时弹出键盘会将页面上推,导致页面顶部自定义导航栏显示错误,
可以通过设置 input 或 textarea 的 adjust-position 来解决,但设置了
这个属性后,当 input 在页面的底部时键盘弹出会遮住它,使用本组件将 input
包裹即可在键盘弹出时将 input 固定在键盘的上方。
示例
<!-- 单行输入(键盘未弹出时显示在正常的文档流中) -->
<x-fixed-keyboard padding="24rpx">
<input style="width: 100%;" type="text" placeholder="请输入" :adjust-position="false" />
</x-fixed-keyboard>
<!-- 多行输入(键盘未弹出时显示在正常的文档流中) -->
<x-fixed-keyboard padding="24rpx">
<textarea style="width: 100%;" auto-height placeholder="请输入" :adjust-position="false" />
</x-fixed-keyboard>
<!-- 提示信息(键盘弹出时才显示) -->
<x-fixed-keyboard padding="24rpx" follow-keyboard-show>
<text>提示: 请输入...</text>
</x-fixed-keyboard>
<!-- 一个页面存在多个输入框时 -->
<x-fixed-keyboard :focus="iptFocus1">
<textarea v-model="form.ipt1" class="w-642 h-172 p-20 m-20-auto mb-40 radius-12" placeholder="请输入" :adjust-position="false"
@focus="iptFocus1 = true" @blur="iptFocus1 = false"></textarea>
</x-fixed-keyboard>
<x-fixed-keyboard :focus="iptFocus2">
<textarea v-model="form.ipt2" class="w-642 h-172 p-20 m-20-auto mb-40 radius-12" placeholder="请输入" :adjust-position="false"
@focus="iptFocus2 = true" @blur="iptFocus2 = false"></textarea>
</x-fixed-keyboard>
Props
属性名 |
说明 |
类型 |
默认值 |
focus |
是否聚焦到当前组件(一个页面存在多个输入框时需要传入) |
Boolean |
false |
followKeyboardShow |
只在键盘弹出时显示 |
Boolean |
false |
zIndex |
容器的层级 |
[Number, String] |
9 |
padding |
组件的内边距 |
String |
|
baseBottom |
固定键盘上方时额外的距离 |
String |
'0' |
bgColor |
容器背景色 |
String |
'#fff' |
customStyle |
容器自定义样式 |
Object |
|
Emits
事件名 |
说明 |
回调入参 |
keyboardHeight |
键盘高度变化时触发 |
1:键盘高度 |
Slots
插槽名 |
说明 |
default |
键盘弹出时需要显示在键盘上方的内容 |
插件如果对你有帮助给个好评吧~