uniapp中使用仿微信聊天输入框

### 创建仿微信的聊天输入框组件 为了在 UniApp 中创建一个类似于微信的聊天输入框组件，需考虑几个方面来确保用户体验的一致性和功能性。此过程涉及使用 `input` 组件以及一些额外的功能定制。 #### 使用 Input 和 Textarea 组件构建基础结构 对于单行消息输入，可采用 `<input>` 标签；而对于可能需要多行输入的情况，则应选用 `<textarea>` 来提供更好的编辑体验[^3]： ```html <template> <view class="chat-input-container"> <!-- 单行输入 --> <input v-if="!isMultiline" class="single-line-input" type="text" v-model="messageText" @focus="onFocus" @blur="onBlur" placeholder="说点什么..." /> <!-- 多行输入 --> <textarea v-else class="multi-line-textarea" v-model="messageText" auto-height maxlength="-1" @focus="onFocus" @blur="onBlur" placeholder="正在编写更长的消息..."> </textarea> <!-- 发送按钮 --> <button @click="sendMessage">发送</button> </view> </template> ``` #### 添加样式调整布局 为了让输入区域看起来更加贴近原生应用的感觉，可以通过 CSS 对上述 HTML 进行美化处理: ```css .chat-input-container { display: flex; align-items: center; padding: 8px; } .single-line-input, .multi-line-textarea { width: calc(100% - 60px); /* 预留空间给右侧按钮 */ border-radius: 20px; background-color: #f7f7f7; padding-left: 15px; margin-right: 10px; } .multi-line-textarea{ min-height: 40px; max-height: 120px; overflow-y: scroll; } button { height: 40px; line-height: 40px; text-align: center; color: white; font-size: 14px; background-color: blue; border-radius: 20px; padding: 0 20px; } ``` #### 功能增强：切换至多行模式和支持表情符号选择器 当检测到用户按下了换行键或者点击了一个特定的表情图标时，可以让输入框动态地转换成支持多行文本录入的状态，并显示表情面板供用户挑选特殊字符[^1]: ```javascript export default { data() { return { messageText: '', isMultiline: false, showEmojiPicker: false } }, methods: { onFocus(event){ this.isMultiline = event.detail.value.includes('\n'); }, onBlur(){ setTimeout(() => {this.isMultiline=false}, 300); }, sendMessage(){ console.log('Message sent:', this.messageText); this.messageText=''; } } }; ``` 通过这种方式，在保持简洁的同时实现了较为丰富的交互逻辑，使得开发者能够轻松集成这一特性到自己的项目当中去。