目录
#平台差异说明
#基本使用
#输入框的类型
#可清空字符
#下划线
#前后图标
#前后插槽
API
#Props
#Events
#Methods
#Slots
去除fixed、showWordLimit、showConfirmBar、disableDefaultPadding、autosize字段
此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件u-form而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。
应该在u-form中嵌套u-form-item，再嵌套u-input去实现。
注意：
由于在nvue下，u-input名称被uni-app官方占用，在nvue页面中请使用u--input名称，在vue页面中使用u--input或者u-input均可。
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
|---|---|---|---|
| √ | √ | √ | √ |
#基本使用
- 通过
type设置输入框的类型，默认text - 通过
placeholder设置输入框为空时的占位符 - 通过
border配置是否显示输入框的边框 - 绑定
@change事件
<template><u--inputplaceholder="请输入内容"border="surround"v-model="value"@change="change"></u--input>
</template><script>export default {data() {return {value: ''}},methods: {change(e) {console.log('change', e);}}}
</script>
#输入框的类型
综述：输入框的类型可通过配置type来设置：
- text-文本输入键盘。
- number-数字输入键盘，app-vue下可以输入浮点数，app-nvue和小程序平台下只能输入整数。
- idcard-身份证输入键盘，微信、支付宝、百度、QQ小程序。
- digit-带小数点的数字键盘，App的nvue页面、微信、支付宝、百度、头条、QQ小程序。
- password-等同于设置
password为true的效果
#可清空字符
将clearable设置为true，会在输入框后方增加一个清空按钮。
<template><u--inputplaceholder="请输入内容"border="surround"clearable></u--input>
</template>
#下划线
通过设置属性border为bottom即可变成一个下划线
<template><u--inputplaceholder="请输入内容"border="bottom"clearable></u--input>
</template>
#前后图标
- 全后置图标可自由设置样式信息。
<template><u--inputplaceholder="前置图标"prefixIcon="search"prefixIconStyle="font-size: 22px;color: #909399"></u--input><u--inputplaceholder="后置图标"suffixIcon="map-fill"suffixIconStyle="color: #909399"></u--input>
</template><script>
</script>
#前后插槽
通过设置slot为prefix或suffix来指定前后插槽
<template><view class="u-demo-block"><text class="u-demo-block__title">前后插槽</text><view class="u-demo-block__content"><!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input --><!-- #ifndef APP-NVUE --><u-input placeholder="前置插槽"><!-- #endif --><!-- #ifdef APP-NVUE --><u--input placeholder="前置插槽"><!-- #endif --><u--texttext="http://"slot="prefix"margin="0 3px 0 0"type="tips"></u--text><!-- #ifndef APP-NVUE --></u-input><!-- #endif --><!-- #ifdef APP-NVUE --></u--input><!-- #endif --></view><viewclass="u-demo-block__content"style="margin-top: 15px;"><!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input --><!-- #ifndef APP-NVUE --><u-input placeholder="后置插槽"><!-- #endif --><!-- #ifdef APP-NVUE --><u--input placeholder="后置插槽"><!-- #endif --><template slot="suffix"><u-coderef="uCode"@change="codeChange"seconds="20"changeText="X秒重新获取哈哈哈"></u-code><u-button@tap="getCode":text="tips"type="success"size="mini"></u-button></template><!-- #ifndef APP-NVUE --></u-input><!-- #endif --><!-- #ifdef APP-NVUE --></u--input><!-- #endif --></view></view>
</template><script>export default {data() {return {tips: '',value: ''}},watch: {value(newValue, oldValue) {// console.log('v-model', newValue);}},methods: {codeChange(text) {this.tips = text;},getCode() {if (this.$refs.uCode.canGetCode) {// 模拟向后端请求验证码uni.showLoading({title: '正在获取验证码'})setTimeout(() => {uni.hideLoading();// 这里此提示会被this.start()方法中的提示覆盖uni.$u.toast('验证码已发送');// 通知验证码组件内部开始倒计时this.$refs.uCode.start();}, 2000);} else {uni.$u.toast('倒计时结束后再发送');}},change(e) {console.log('change', e);}}}
</script>API
#Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| value | 输入的值 | Number | String | - | - |
| type | 输入框类型，见上方说明 | String | text | number | idcard | digit | password |
| disabled | 是否禁用输入框 | Boolean | false | true |
| disabledColor | 禁用状态时的背景色 | String | #f5f7fa | - |
| clearable | 是否显示清除控件 | Boolean | false | true |
| password | 是否密码类型 | Boolean | false | true |
| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | String | Number | -1 | - |
| placeholder | 输入框为空时的占位符 | String | - | - |
| placeholderClass | 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ | String | input-placeholder | - |
| placeholderStyle | 指定placeholder的样式，字符串/对象形式，如"color: red;" | String | Object | color: #c0c4cc | - |
| showWordLimit | 是否显示输入字数统计，只在 type ="text"或type ="textarea"时有效 | Boolean | false | true |
| confirmType | 设置右下角按钮的文字，兼容性详见uni-app文档 | String | done | send | search | next | go | done |
| confirmHold | 点击键盘右下角按钮时是否保持键盘不收起，H5无效 | Boolean | false | true |
| holdKeyboard | focus时，点击页面的时候不收起键盘，微信小程序有效 | Boolean | false | true |
| focus | 自动获取焦点，在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点 | Boolean | false | true |
| autoBlur | 键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效 | Boolean | false | true |
| ignoreCompositionEvent 2.0.34 | 是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件 | Boolean | true | false |
| disableDefaultPadding | 是否去掉 iOS 下的默认内边距，仅微信小程序，且type=textarea时有效 | Boolean | false | true |
| cursor | 指定focus时光标的位置 | String | Number | -1 | - |
| cursorSpacing | 输入框聚焦时底部与键盘的距离 | String | Number | 30 | - |
| selectionStart | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 | String | Number | -1 | - |
| selectionEnd | 光标结束位置，自动聚集时有效，需与selection-start搭配使用 | String | Number | -1 | - |
| adjustPosition | 键盘弹起时，是否自动上推页面 | Boolean | true | false |
| inputAlign | 输入框内容对齐方式 | String | left | left | center | right |
| fontSize | 输入框字体的大小 | String | Number | 15px | - |
| color | 输入框字体颜色 | String | #303133 | - |
| prefixIcon | 输入框前置图标 | String | - | - |
| prefixIconStyle | 前置图标样式，对象或字符串 | String | Object | - | - |
| suffixIcon | 输入框后置图标 | String | - | - |
| suffixIconStyle | 后置图标样式，对象或字符串 | String | Object | - | - |
| border | 边框类型，surround-四周边框，bottom-底部边框，none-无边框 | String | surround | bottom | none |
| readonly | 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会 | Boolean | false | true |
| shape | 输入框形状，circle-圆形，square-方形 | String | square | circle |
| formatter | 输入过滤或格式化函数(如需兼容微信小程序，则只能通过setFormatter方法) | Function | null | - |
| customStyle | 定义需要用到的外部样式 | Object | - | - |
#Events
| 事件名 | 说明 | 回调参数 | 版本 |
|---|---|---|---|
| blur | 输入框失去焦点时触发 | value：内容值 | - |
| focus | 输入框聚焦时触发 | - | - |
| confirm | 点击完成按钮时触发 | value：内容值 | - |
| keyboardheightchange | 键盘高度发生变化的时候触发此事件 | - | 微信小程序2.7.0+、App 3.1.0+ |
| input | 内容发生变化触发此事件 | value：内容值 | - |
| change | 内容发生变化触发此事件 | value：内容值 | - |
| clear | 点击清空内容 | - | - |
#Methods
| 方法名 | 说明 |
|---|---|
| setFormatter | 为兼容微信小程序而暴露的内部方法，见上方说明 |
#Slots
| 名称 | 说明 |
|---|---|
| prefix | 输入框前置内容，nuve环境需u--input有效，非nvue环境需u-input才有效 |
| suffix | 输入框后置内容，nuve环境需u--input有效，非nvue环境需u-input才有效 |
