去除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>

copy

#输入框的类型

综述：输入框的类型可通过配置type来设置：

1. text-文本输入键盘。
2. number-数字输入键盘，app-vue下可以输入浮点数，app-nvue和小程序平台下只能输入整数。
3. idcard-身份证输入键盘，微信、支付宝、百度、QQ小程序。
4. digit-带小数点的数字键盘，App的nvue页面、微信、支付宝、百度、头条、QQ小程序。
5. password-等同于设置password为true的效果

#可清空字符

将clearable设置为true，会在输入框后方增加一个清空按钮。

<template><u--inputplaceholder="请输入内容"border="surround"clearable></u--input>
</template>

copy

#下划线

通过设置属性border为bottom即可变成一个下划线

<template><u--inputplaceholder="请输入内容"border="bottom"clearable></u--input>
</template>

copy

#前后图标

• 全后置图标可自由设置样式信息。

<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>

copy

#前后插槽

通过设置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>