t-keyboard-input

KeyboardInput 键盘输入框组件 — 带工具栏和扩展面板的输入组件，适用于评论框、聊天输入等场景。

组件介绍

t-keyboard-input 是一个带底部工具栏和扩展面板的输入组件。支持图片选择、表情选择、@提及和发送按钮，面板随键盘弹出。常用于评论发布、聊天消息输入等场景，同时支持 @ 人物选择。

基础用法

<template>
  <t-keyboard-input
    v-model="inputValue"
    :image-list="imageList"
    placeholder="说点什么..."
    @send="handleSend"
    @at="handleAtUser"
  />
</template>

<script setup>
import { ref } from 'vue'

const inputValue = ref('')
const imageList = ref([])

const handleSend = (e) => {
  console.log('发送:', e.value, e.images)
  inputValue.value = ''
  imageList.value = []
}

const handleAtUser = (e) => {
  console.log('@用户:', e.user)
}
</script>

API

Props

属性名	说明	类型	默认值
modelValue	输入框双向绑定的文本值	String	''
imageList	已选图片路径列表	String[]	[]
placeholder	输入框占位提示文案	String	'请输入内容'
sendText	发送按钮文本标签	String	'发送'
showSend	是否显示发送按钮	Boolean	true
showToolbar	是否显示底部工具栏	Boolean	true
showImage	是否显示图片选择入口	Boolean	true
showAt	是否显示 @ 提及入口	Boolean	true
showEmoji	是否显示表情选择入口	Boolean	true
atUsers	@ 面板中可选的用户列表	String[]	['张三', '李四', '王小美', '产品同学', '前端小赵', '设计师Ada']
disabled	是否禁用输入	Boolean	false
maxlength	输入最大字符数	Number	500
confirmType	键盘确认按钮类型	String	'send'
holdKeyboard	点击发送后保持键盘打开	Boolean	true
confirmHold	点击确认后保持键盘打开	Boolean	true
bottomOffset	组件底部偏移量，用于避开安全区域	Number	0
zIndex	组件 z-index 层级	Number	999
autoFocus	是否自动聚焦输入框	Boolean	false
maxImages	最多可选图片数量	Number	9
emojiList	表情面板中可选 emoji 列表	String[]	['👏', '😄', '😆', '🥹', '😭', '👍', '😁', '🤣']

Events

事件名	说明	回调参数
update:modelValue	输入框内容变化	string
update:imageList	图片列表变化	string[]
send	点击发送或键盘确认	{ value: string, images: string[] }
focus	输入框聚焦	FocusEvent
blur	输入框失焦	BlurEvent
keyboardheightchange	键盘高度变化	KeyboardHeightChangeEvent
confirm	键盘确认按钮点击	ConfirmEvent
at	选择 @ 用户	{ user: string }
emoji	选择 emoji	{ emoji: string }
imagechange	图片列表变化	{ images: string[] }

Slots

无内置插槽。

注意事项

• 输入框默认 confirm-type="send"，键盘回车键显示为发送
• 图片选择面板、表情面板、@面板为互斥显示，每次只能展开一个
• 通过 bottomOffset 适配底部安全区域，例如 iPhone 底部横条
• 发送时默认不清空键盘，如需关闭可设置 holdKeyboard="false"
• emojiList 可自定义替换