# t-keyboard-input

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

t-keyboard-input 组件介绍

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

t-keyboard-input 基础用法

<template>
	<view class="p-15 h-100%">
		<t-card class="mb-15 r-10"
				title="t-keyboard-input 键盘输入"
				sub-title="带工具栏和扩展面板的键盘输入组件，常用于评论/聊天输入场景，支持图片选择、表情选择和 @ 提及。"></t-card>
		<t-keyboard-input v-model="inputValue"
						  v-model:imageList="imageList"
						  placeholder="说点什么..."
						  send-text="发送"
						  :show-send="true"
						  :show-toolbar="true"
						  :show-image="true"
						  :show-at="true"
						  :show-emoji="true"
						  :atUsers="[{name: '张三'}, {name: '李四'}, {name: '王小美'}, {name: '产品同学'}, {name: '前端小赵'}, {name: '设计师Ada'}]"
						  :emojiList="['👏', '😄', '😆', '🥹', '😭', '👍', '😁', '🤣']"
						  :maxImages="9"
						  :maxlength="500"
						  :bottomOffset="0"
						  :zIndex="999"
						  @send="handleSend"
						  @focus="handleFocus"
						  @blur="handleBlur"
						  @at="handleAt"
						  @emoji="handleEmoji"
						  @imagechange="handleImageChange">
		</t-keyboard-input>
	</view>
</template>

<script setup
		lang="uts">
	const inputValue = ref<string>('')
	const imageList = ref<string[]>([])

	function handleSend(payload : UTSJSONObject) {
		uni.showToast({
			title: '已发送',
			icon: 'success'
		})
	}

	function handleFocus(event : any) {
		// console.log('focus', event)
	}

	function handleBlur(event : any) {
		// console.log('blur', event)
	}

	function handleAt(event : UTSJSONObject) {
		// console.log('at', event)
	}

	function handleEmoji(event : UTSJSONObject) {
		console.log('emoji', event)
	}

	function handleImageChange(event : UTSJSONObject) {
		console.log('imagechange', event)
	}
	function hide() {
		uni.hideKeyboard()
	}
</script>

t-keyboard-input 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 可自定义替换