uniapp 文本框
文本框基础使用
在UniApp中，文本框通常使用<input>或<textarea>组件实现。<input>适用于单行文本输入，<textarea>适用于多行文本输入。
<input v-model="inputValue" placeholder="请输入内容" />
<textarea v-model="textareaValue" placeholder="请输入多行内容" />对应的JavaScript部分需要定义数据绑定：
data() {
return {
inputValue: '',
textareaValue: ''
}
}文本框样式定制
通过CSS可以自定义文本框的外观。UniApp支持大部分CSS属性，但需要注意跨平台兼容性。
.input-style {
border: 1px solid #e5e5e5;
border-radius: 4px;
padding: 8px 12px;
font-size: 14px;
}表单验证处理
结合v-model和计算属性或方法可以实现表单验证功能。实时验证可以在用户输入时提供反馈。
computed: {
isInputValid() {
return this.inputValue.length > 0
}
}键盘类型控制
通过设置input的type属性可以控制移动端弹出的键盘类型。常用类型包括text、number、password、email等。
<input type="number" v-model="numberValue" placeholder="请输入数字" />
<input type="password" v-model="passwordValue" placeholder="请输入密码" />多平台兼容性处理
不同平台对文本框的表现可能略有差异。可以使用条件编译处理平台特定逻辑。
<!-- #ifdef MP-WEIXIN -->
<input class="wechat-special-style" />
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<input class="app-special-style" />
<!-- #endif -->高级交互功能
实现自动聚焦、清除按钮等功能可以提升用户体验。UniApp提供了相应属性支持这些功能。
<input focus placeholder="自动获取焦点" />
<input :adjust-position="false" placeholder="键盘不顶起页面" />性能优化建议
对于包含大量文本框的页面，建议使用v-on:input替代v-model来减少频繁的数据绑定开销。
<input :value="inputValue" @input="onInputChange" />对应的处理方法：
methods: {
onInputChange(e) {
this.inputValue = e.detail.value
}
}
