<input
	class="TUI-message-input-area"
	:adjust-position="false"  // 修改為 false，使鍵盤彈起頁面不上移
	cursor-spacing="20"
	v-model="inputText"
	@input="onInputValueChange"
	maxlength="140"
	type="text"
	placeholder-class="input-placeholder"
	placeholder="說點什么呢~"
	@focus="inputBindFocus" // 添加獲取焦點鍵盤彈起事件
	@blur="inputBindBlur" // 添加失去焦點鍵盤隱藏事件
/>

methods: {
	inputBindFocus(e) {
		// 獲取手機鍵盤的高度，賦值給input 所在盒子的 bottom 值
		// 注意!!! 這里的 px 至關重要!!! 我搜到的很多解決方案都沒有說這里要添加 px
		this.$emit('changeBottomVal',  e.detail.height + 'px')
	},
   
	inputBindBlur() {
		// input 失去焦點，鍵盤隱藏，設置 input 所在盒子的 bottom 值為0
		this.$emit('changeBottomVal', 0)
	}
}

<view v-if="showChat" class="message-input" :style="{ bottom: bottomVal }">
	<TUI-message-input id="message-input" ref="messageInput" :conversation="conversation" @sendMessage="sendMessage" @changeBottomVal="changeBottomVal"/>
</view>

data() {
	return {
		bottomVal: ''
	}
}
methods: {
	changeBottomVal(val) {
		this.bottomVal = val
	}
}

.message-input {
	flex-shrink: 0;
	width: 100%;
	position: absolute; // input 所在盒子設置絕對定位
	left: 0;
	bottom: 0; // 默認 0
	z-index: 199;
}