更新记录

1.0.3（2025-07-01） 下载此版本

更新文档

1.0.2（2024-11-09） 下载此版本

优化

1.0.1（2024-11-06） 下载此版本

ios 优化

平台兼容性

uni-app

其他

x-fixed-keyboard 组件使用说明

组件简介

x-fixed-keyboard 是一个用于处理键盘弹出时的固定布局组件，主要用于解决移动端输入框弹出键盘时页面布局错乱的问题。该组件可以智能地跟随键盘的显示和隐藏，调整自身位置。

功能特性

• 🎯 自动跟随键盘显示/隐藏
• 📱 支持多输入框场景的焦点管理
• 🎨 可自定义样式和背景色
• 📏 支持自定义内边距和底部偏移
• 🔧 灵活的层级控制
• 📡 键盘高度变化事件监听

属性配置

Props

Events

使用场景

1. 基础使用

<x-fixed-keyboard>
  <view class="chat-input">
    <input v-model="message" placeholder="输入消息..." />
    <button @click="sendMessage">发送</button>
  </view>
</x-fixed-keyboard>

2. 跟随键盘显示

<x-fixed-keyboard :follow-keyboard-show="true">
  <view class="toolbar">
    <button>表情</button>
    <button>图片</button>
    <button>语音</button>
  </view>
</x-fixed-keyboard>

3. 多输入框焦点管理

<template>
  <view>
    <input @focus="currentFocus = 'input1'" />
    <input @focus="currentFocus = 'input2'" />

    <x-fixed-keyboard :focus="currentFocus === 'input1'">
      <view>输入框1的工具栏</view>
    </x-fixed-keyboard>

    <x-fixed-keyboard :focus="currentFocus === 'input2'">
      <view>输入框2的工具栏</view>
    </x-fixed-keyboard>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentFocus: null
    }
  }
}
</script>

4. 自定义样式

<x-fixed-keyboard 
  :z-index="999"
  padding="20rpx"
  base-bottom="100rpx"
  bg-color="rgba(0, 0, 0, 0.1)"
  :custom-style="{ borderTop: '1px solid #eee' }"
  @keyboardHeight="onKeyboardChange"
>
  <view class="custom-content">
    自定义内容
  </view>
</x-fixed-keyboard>

5. 监听键盘高度变化

<template>
  <x-fixed-keyboard @keyboardHeight="handleKeyboardHeight">
    <view>底部内容</view>
  </x-fixed-keyboard>
</template>

<script>
export default {
  methods: {
    handleKeyboardHeight(height) {
      console.log('键盘高度:', height)
      // 可以根据键盘高度做其他处理
      if (height > 0) {
        console.log('键盘已弹出')
      } else {
        console.log('键盘已收起')
      }
    }
  }
}
</script>

样式定制

组件提供了多种样式定制方式：

<x-fixed-keyboard 
  padding="20rpx 30rpx"
  bg-color="#f5f5f5"
  :custom-style="{
    borderTop: '2rpx solid #ddd',
    boxShadow: '0 -2rpx 10rpx rgba(0,0,0,0.1)'
  }"
>
  <!-- 内容 -->
</x-fixed-keyboard>

插件如果对你有帮助给个好评吧~