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() {
      // 实时搜索逻辑
    }
  }
}