uniapp 文本框
uniapp 文本框基础用法
在uniapp中，文本框通常使用<input>或<textarea>组件实现。<input>适用于单行文本输入，<textarea>适用于多行文本输入。
<!-- 单行文本框 -->
<input type="text" v-model="inputValue" placeholder="请输入内容"/>
<!-- 多行文本框 -->
<textarea v-model="textareaValue" placeholder="请输入多行内容"/>对应的JavaScript部分：
export default {
data() {
return {
inputValue: '',
textareaValue: ''
}
}
}文本框常用属性
<input>组件支持以下常用属性：
type: 指定输入类型(text, number, password等)v-model: 双向数据绑定placeholder: 提示文本disabled: 禁用状态maxlength: 最大输入长度confirm-type: 键盘右下角按钮类型(如send, search等)
<textarea>特有属性：
auto-height: 是否自动增高fixed: 是否固定位置cursor-spacing: 指定光标与键盘间距
样式自定义
通过CSS可以自定义文本框样式：
/* 全局样式 */
input, textarea {
border: 1px solid #eee;
border-radius: 4px;
padding: 8px 12px;
width: 100%;
box-sizing: border-box;
}
/* 聚焦状态 */
input:focus, textarea:focus {
border-color: #007AFF;
outline: none;
}表单验证
结合uniapp的表单验证机制：
<input
v-model="username"
placeholder="请输入用户名"
@blur="validateUsername"
/>
<span v-if="error" class="error-text">{{error}}</span>export default {
data() {
return {
username: '',
error: ''
}
},
methods: {
validateUsername() {
if(this.username.length < 3) {
this.error = '用户名至少3个字符'
} else {
this.error = ''
}
}
}
}平台差异处理
不同平台可能有表现差异，可通过条件编译处理：
<!-- #ifdef MP-WEIXIN -->
<input type="text" confirm-type="search"/>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<input type="text" return-key-type="search"/>
<!-- #endif -->高级功能实现
实现带清除按钮的文本框：
<input
v-model="searchText"
placeholder="搜索"
@input="onSearchInput"
/>
<text
v-if="searchText"
@click="clearSearch"
class="clear-btn"
>×</text>export default {
methods: {
clearSearch() {
this.searchText = ''
},
onSearchInput() {
// 实时搜索逻辑
}
}
}
