uniapp u--input 属性事件
时间: 2025-06-29 07:11:01 浏览: 15
### uniapp 中 `u--input` 组件的属性和事件
#### 属性
1. **value / v- 默认值:''
- 描述:绑定输入框的值,支持 `.sync` 和 `v-model` 双向绑定[^1]。
2. **type**
- 类型:String
- 默认值:'text'
- 描述:设置原生 input 的 type 属性,可选值有 'text', 'number', 'idcard', 'digit' 等。不同类型的输入框会触发不同的键盘布局。
3. **placeholder**
- 类型:String
- 默认值:'请输入内容'
- 描述:当输入框为空时占位符显示的文字。
4. **disabled**
- 类型:Boolean
- 默认值:false
- 描述:是否禁用输入框,若为 true,则无法编辑输入框中的内容[^3]。
5. **maxlength**
- 类型:Number
- 默认值:Infinity (无限制)
- 描述:最大字符长度,超出部分不会被录入。
6. **clearable**
- 类型:Boolean
- 默认值:true
- 描述:是否显示清除按钮,在输入框获得焦点或有内容时自动显示,点击后清空输入框并失去焦点。
7. **show-password**
- 类型:Boolean
- 默认值:false
- 描述:对于密码类型输入框而言,是否展示切换明文/密文图标,默认情况下隐藏密码,点击图标则可见。
8. **objectName**
- 类型:String
- 默认值:null
- 描述:用于指定动态加载的数据对象名,配合 `v-model="inputInfo[objectName]"` 实现特定场景下的数据绑定。
9. **custom-style**
- 类型:Object
- 默认值:{}
- 描述:自定义样式对象,允许开发者覆盖默认样式以适应个性化需求[^4]。
#### 事件
1. **input**
- 参数:(event: Event, value: string|number)
- 描述:当输入框的内容发生变化时触发,通常用来更新父级组件的状态。
2. **focus**
- 参数:(event: FocusEvent)
- 描述:当输入框获得焦点时触发,可用于执行一些初始化操作或者提示用户。
3. **blur**
- 参数:(event: BlurEvent)
- 描述:当输入框失去焦点时触发,常用于验证逻辑处理。
4. **confirm**
- 参数:(event: KeyboardEvent)
- 描述:按下回车键时触发确认事件,适用于表单提交等场景。
5. **click**
- 参数:(event: MouseEvent)
- 描述:即使输入框处于不可编辑状态(如设置了 disabled),也可以监听 click 事件来响应用户的交互行为,比如模拟获取焦点效果。
```html
<template>
<view class="example">
<!-- 动态绑定示例 -->
<u--input :model-value="inputInfo[objectName]" @update:modelValue="(val) => updateInput(val)" placeholder="请输入..." />
<!-- 普通使用示例 -->
<u--input v-model="normalText" placeholder="常规输入"/>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const objectName = "name"; // 对应到 inputInfo.name 进行动态绑定
let inputInfo = reactive({ name: '' });
function updateInput(value){
inputInfo[objectName]=value;
}
// 定义一个普通的字符串变量作为 v-model 数据源
let normalText = ref('');
</script>
```
阅读全文
相关推荐


















