template

<view class="input-container" :style="{ marginBottom: `${keyboardHeight}px` }">
			<input class="input-box" :adjust-position='false' placeholder="输入您的问题..." @confirm="sendQuestion"
				:focus="focus" :hold-keyboard="true" @blur="handleBlur" type="text" v-model="userQuestion" />
			<button class="send-btn" @touchend.prevent="sendQuestion" :disabled="disabled">发送</button>
</view>

js

data(){
    
    
	return {
    
    
		focus:true,
		userQuestion:"",
		keyboardHeight:""
	}
}

methods:{
    
    
//失去焦点事件
handleBlur(){
    
    
	this.focus = false;
},
//发送消息
sendQuestion(){
    
    
	this.focus = true;
}
}

scss

.input-container {
    
    
			display: flex;
			gap: 10rpx;
			padding: 0 15rpx;
			align-items: center;
			height: 100rpx;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
			border-top: 1rpx solid #e0e0e0;

			.input-box {
    
    
				flex-grow: 1;
				height: 80rpx;
				padding-left: 20rpx;
				font-size: 28rpx;
				border: 1rpx solid #ccc;
				border-radius: 20rpx;
				background-color: #f9f9f9;
				outline: none;
				box-sizing: border-box;
				// z-index: 1;
			}

			.send-btn {
    
    
				flex-shrink: 0;
				width: 100rpx;
				height: 80rpx;
				background-color: #6785fd;
				color: #fff;
				font-size: 22rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				transition: background-color 0.3s;
				border-radius: 20rpx;
			}

			.send-btn:disabled {
    
    
				background-color: #ccc;
				cursor: not-allowed;
				box-shadow: none;
			}
		}