uniapp input事件

### UniApp 中 Input 事件的使用方法 #### 基本概念 在 UniApp 的开发中，`<input>` 组件提供了多种交互方式，其中 `@input` 是最常用的事件之一。当用户输入内容时会触发该事件，并可以通过绑定函数实时获取用户的输入值[^1]。 以下是基本用法示例： ```vue <template> <view> <input type="text" placeholder="请输入内容" @input="handleInput" /> </view> </template> <script> export default { methods: { handleInput(event) { console.log('当前输入的内容:', event.detail.value); } } }; </script> ``` 上述代码展示了如何通过 `@input` 获取用户输入的值并打印到控制台。 --- #### 实现 Select 下拉列表功能 如果需要基于 `<u-input>` 或其他自定义组件实现类似于 select 的下拉列表效果，则可以结合 Form 表单封装的方式完成数据传递和状态管理[^2]。具体做法如下： ##### 示例代码 ```vue <template> <view> <!-- 输入框 --> <u-input v-model="selectedValue" @click="toggleDropdown" readonly></u-input> <!-- 下拉菜单 --> <view class="dropdown-menu" v-if="isDropdownVisible"> <view v-for="(item, index) in options" :key="index" @click="selectItem(item)"> {{ item }} </view> </view> </view> </template> <script> export default { data() { return { selectedValue: '', // 当前选中的值 isDropdownVisible: false, // 控制下拉菜单显示/隐藏 options: ['选项一', '选项二', '选项三'] // 可选项数组 }; }, methods: { toggleDropdown() { this.isDropdownVisible = !this.isDropdownVisible; }, selectItem(item) { this.selectedValue = item; // 更新选中值 this.isDropdownVisible = false; // 隐藏下拉菜单 } } }; </script> ``` 此示例实现了点击输入框展示下拉列表的功能，并允许用户选择某一项作为最终值。 --- #### 动态设置焦点 为了使某个特定时间点让输入框获得焦点，在实际项目中可能需要用到动态控制逻辑。例如，通过维护一个 `focusArray` 来记录各个输入框的状态，并利用 Vue 的响应式特性更新 DOM 节点的行为[^3]。 ##### 示例代码 ```vue <template> <view> <input ref="input1" type="text" placeholder="第一个输入框" /> <button @click="setFocus">聚焦到第二个输入框</button> <input ref="input2" type="text" placeholder="第二个输入框" /> </view> </template> <script> export default { methods: { setFocus() { this.$refs.input2.focus(); // 手动调用 focus 方法 } } }; </script> ``` 以上代码片段演示了如何手动操作两个输入框之间的焦点切换过程。 --- ### 总结 通过对 `@input` 事件的学习以及与其他技术手段相结合（如模拟下拉框或者精确调整键盘位置），开发者能够更加灵活地满足不同场景下的需求。希望这些案例可以帮助理解 UniApp 中关于 input 的高级应用技巧！