Input 文本组件
TInput 是一个用于输入文本的组件，支持多种配置，包括前置图标、后置图标、清空输入、密码显示等。
支持平台
| 安卓 | ios | web | 微信小程序 | 支付宝小程序 | QQ小程序 |
|---|---|---|---|---|---|
| √ | √ | √ | x | x | x |
示例
html
<template>
<t-page title="输入框">
<t-card title="Input 输入框" class="mlrt.30"
sub-title="支持多种配置，包括前置图标、后置图标、清空输入、密码显示等功能。组件提供了丰富的属性，如绑定值、图标类名、是否显示边框等，可以根据不同需求进行定制。适用于各种表单场景，方便用户进行文本输入。"></t-card>
<introduction title="图标+主题展示" v-if="area==1">
<t-input prefixIcon="map" class="mb.30" suffixIcon="mic" v-model="inputVal9" placeholder="请输入内容"
:focus="focus"></t-input>
<t-input prefixIcon="map" class="mb.30" type="info" suffixIcon="mic" v-model="inputVal"></t-input>
<t-input prefixIcon="map" class="mb.30" type="success" suffixIcon="mic" v-model="inputVal"></t-input>
<t-input prefixIcon="map" class="mb.30" type="error" suffixIcon="mic" v-model="inputVal"></t-input>
<t-input prefixIcon="map" class="mb.30" type="primary" suffixIcon="mic" v-model="inputVal"></t-input>
<t-input prefixIcon="map" class="mb.30" type="warning" suffixIcon="mic" v-model="inputVal"></t-input>
<t-button @click="focus=!focus">设置焦点</t-button>
</introduction>
<introduction title="尺寸主题(mini)" v-if="area==2">
<t-input prefixIcon="map" size="mini" type="success" suffixIcon="mic" v-model="inputVal"></t-input>
</introduction>
<introduction title="尺寸主题(small)" v-if="area==3">
<t-input prefixIcon="map" size="small" type="error" suffixIcon="mic" v-model="inputVal"></t-input>
</introduction>
<introduction title="尺寸主题(medium)" v-if="area==4">
<t-input prefixIcon="map" size="medium" type="primary" suffixIcon="mic" v-model="inputVal"></t-input>
</introduction>
<introduction title="尺寸主题(large)" v-if="area==5">
<t-input prefixIcon="map" size="large" type="warning" suffixIcon="mic" v-model="inputVal"></t-input>
</introduction>
<introduction title="右对齐" v-if="area==6">
<t-input prefixIcon="map" size="large" class="sta.r" type="warning" suffixIcon="mic"
v-model="inputVal"></t-input>
</introduction>
<introduction title="居中" v-if="area==17">
<t-input prefixIcon="map" class="sta.c" size="large" type="warning" suffixIcon="mic"
v-model="inputVal"></t-input>
</introduction>
<introduction title="镂空" v-if="area==7">
<t-input effect="plain" prefixIcon="map" class="mb.30" suffixIcon="mic" v-model="inputVal"></t-input>
<t-input effect="plain" prefixIcon="map" class="mb.30" type="success" suffixIcon="mic"
v-model="inputVal"></t-input>
<t-input effect="plain" prefixIcon="map" class="mb.30" type="error" suffixIcon="mic"
v-model="inputVal"></t-input>
<t-input effect="plain" prefixIcon="map" class="mb.30" type="primary" suffixIcon="mic"
v-model="inputVal"></t-input>
<t-input effect="plain" prefixIcon="map" class="mb.30" type="warning" suffixIcon="mic"
v-model="inputVal"></t-input>
</introduction>
<introduction title="禁用边框" v-if="area==8">
<t-input :border="false" effect="plain" prefixIcon="map" class="mb.30" suffixIcon="mic"
v-model="inputVal"></t-input>
<t-input :border="false" effect="plain" prefixIcon="map" class="mb.30" type="success" suffixIcon="mic"
v-model="inputVal"></t-input>
<t-input :border="false" effect="plain" prefixIcon="map" class="mb.30" type="error" suffixIcon="mic"
v-model="inputVal"></t-input>
<t-input :border="false" effect="plain" prefixIcon="map" class="mb.30" type="primary" suffixIcon="mic"
v-model="inputVal"></t-input>
<t-input :border="false" effect="plain" prefixIcon="map" class="mb.30" type="warning" suffixIcon="mic"
v-model="inputVal"></t-input>
</introduction>
<introduction title="圆角" v-if="area==9">
<t-input class="mb.30-r.200" prefixIcon="map" suffixIcon="mic" v-model="inputVal"></t-input>
<t-input class="mb.30-r.200" prefixIcon="map" type="success" suffixIcon="mic" v-model="inputVal"></t-input>
<t-input r class="mb.30-r.200" prefixIcon="map" type="error" suffixIcon="mic" v-model="inputVal"></t-input>
<t-input class="mb.30-r.200" prefixIcon="map" type="primary" suffixIcon="mic" v-model="inputVal"></t-input>
<t-input class="mb.30-r.200" prefixIcon="map" type="warning" suffixIcon="mic" v-model="inputVal"></t-input>
</introduction>
<introduction title="禁用状态" v-if="area==10">
<t-input :disabled="true" class="mb.30" prefixIcon="map" suffixIcon="mic" v-model="inputVal"></t-input>
<t-input :disabled="true" class="mb.30" prefixIcon="map" type="success" suffixIcon="mic"
v-model="inputVal"></t-input>
<t-input :disabled="true" class="mb.30" prefixIcon="map" type="error" suffixIcon="mic"
v-model="inputVal"></t-input>
<t-input :disabled="true" class="mb.30" prefixIcon="map" type="primary" suffixIcon="mic"
v-model="inputVal"></t-input>
<t-input :disabled="true" class="mb.30" prefixIcon="map" type="warning" suffixIcon="mic"
v-model="inputVal"></t-input>
</introduction>
<introduction title="自定义颜色覆盖" v-if="area==11">
<t-input prefixIcon="map" suffixIcon="mic" class="bg.red-c.#fff"></t-input>
</introduction>
<introduction title="前后插槽" v-if="area==12">
<t-input prefixIcon="map" type="error" suffixIcon="mic" class="mb.30" v-model="inputVal">
<template v-slot:left>
<text style="font-size: 25rpx;color:#fff;margin-right: 10rpx;">http://</text>
</template>
</t-input>
<t-input type="primary" v-model="inputVal">
<template v-slot:right>
<t-code style="margin-left: 15rpx;" type="success"></t-code>
</template>
</t-input>
</introduction>
<introduction title="基础功能" v-if="area==13">
<t-input v-model="inputVal"></t-input>
</introduction>
<introduction title="禁用清空" v-if="area==14">
<t-input :clearabled="false" v-model="inputVal"></t-input>
</introduction>
<introduction title="数字键盘" v-if="area==15">
<t-input mode="number" v-model="inputVal1"></t-input>
</introduction>
<introduction title="密码类型" v-if="area==16">
<t-input :password="true" v-model="inputVal"></t-input>
</introduction>
<t-row class='ffww-tdb-tdr-tdp-mltr.30'>
<t-button type="p" class="mrb.30" size="small" @click="area=1">图标+主题展示</t-button>
<t-button type="e" class="mrb.30" size="small" @click="area=2">尺寸主题(mini)"</t-button>
<t-button type="s" class="mrb.30" size="small" @click="area=3">尺寸主题(small)</t-button>
<t-button type="w" class="mrb.30" size="small" @click="area=4">尺寸主题(medium)</t-button>
<t-button type="p" class="mrbs.30" size="small" @click="area=5">尺寸主题(large)</t-button>
<t-button type="p" class="mrb.30" size="small" @click="area=6">右对齐</t-button>
<t-button type="p" class="mrb.30" size="small" @click="area=17">居中</t-button>
<t-button type="e" class="mrb.30" size="small" @click="area=7">镂空</t-button>
<t-button type="s" class="mrb.30" size="small" @click="area=8">禁用边框</t-button>
<t-button type="w" class="mrb.30" size="small" @click="area=9">圆角</t-button>
<t-button type="p" class="mrbs.30" size="small" @click="area=10">禁用状态</t-button>
<t-button type="p" class="mrb.30" size="small" @click="area=11">自定义颜色覆盖</t-button>
<t-button type="e" class="mrb.30" size="small" @click="area=12">前后插槽</t-button>
<t-button type="s" class="mrb.30" size="small" @click="area=13">基础功能</t-button>
<t-button type="w" class="mrb.30" size="small" @click="area=14">禁用清空</t-button>
<t-button type="p" class="mrbs.30" size="small" @click="area=15">数字键盘</t-button>
<t-button type="p" class="mrb.30" size="small" @click="area=16">密码类型</t-button>
</t-row>
</t-page>
</template>
<script>
export default {
data() {
return {
area: 5,
inputVal: '8151',
inputVal3: '556',
inputVal1: '1',
inputVal9: '1',
focus: false
};
},
methods: {
}
}
</script>提示
支持官方Input组件所有属性事件和方法并新增以下属性和事件
Props
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| modelValue | 绑定的值，支持v-model | String | "" |
| prefixIcon | 前置图标名称 | String | "" |
| prefixClass | 前置图标额外类名 | String | "" |
| suffixIcon | 后置图标名称 | String | "" |
| suffixClass | 后置图标额外类名 | String | "" |
| clearIcon | 清空图标名称 | String | "close-circle" |
| clearClass | 清空图标额外类名 | String | "" |
| eyeIcon | 显示密码图标名称 | String | "eye" |
| eyeOffIcon | 隐藏密码图标名称 | String | "eye-off-outline" |
| eyeClass | 密码图标的类名 | String | "s.35" |
| password | 是否为密码输入框 | Boolean | false |
| eye | 密码是否可见 | Boolean | false |
| clearabled | 是否可清空输入内容 | Boolean | true |
| border | 是否显示边框 | Boolean | true |
| size | 按钮尺寸 | String | "medium" |
| type | 组件场景 | String | "" |
| disabled | 是否禁用 | Boolean | false |
| stop | 是否阻止事件冒泡 | Boolean | false |
| hover | 是否有鼠标悬停效果 | Boolean | false |
| effect | 组件效果 | String | "" |
Events
| 事件名 | 描述 | 回调参数 |
|---|---|---|
| update:modelValue | 绑定的值更新事件 | (value: string) |
| clear | 清空输入事件 | |
| click | 点击事件 | |
| input | 输入事件 | (event: UniInputEvent) |
| blur | 失去焦点事件 | (event: UniInputBlurEvent) |
| prefixClick | 前置图标点击事件 | (event: UniPointerEvent) |
| suffixClick | 后置图标点击事件 | (event: UniPointerEvent) |
Slots
| 名称 | 描述 |
|---|---|
| left | 左侧插槽 |
| right | 左侧插槽 |
Methods
| 方法名 | 描述 | 参数 |
|---|---|---|
| reset | 重置输入值 | (value: any) |
| getValue | 获取当前值 | |
| input | 输入处理方法 | (event: UniInputEvent) |
| clear | 清空输入内容 | |
| eyeClick | 切换密码显示状态 | |
| focus | 聚焦输入框 |