去除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--input placeholder="请输入内容" 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来设置：
- text-文本输入键盘。
- number-数字输入键盘，app-vue下可以输入浮点数，app-nvue和小程序平台下只能输入整数。
- idcard-身份证输入键盘，微信、支付宝、百度、QQ小程序。
- digit-带小数点的数字键盘，App的nvue页面、微信、支付宝、百度、头条、QQ小程序。
- password-等同于设置
password为true的效果
#可清空字符
将clearable设置为true，会在输入框后方增加一个清空按钮。
<template> <u--input placeholder="请输入内容" border="surround" clearable ></u--input> </template>
copy
#下划线
通过设置属性border为bottom即可变成一个下划线
<template> <u--input placeholder="请输入内容" border="bottom" clearable ></u--input> </template>
copy
#前后图标
- 全后置图标可自由设置样式信息。
<template> <u--input placeholder="前置图标" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" ></u--input> <u--input placeholder="后置图标" 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--text text="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> <view class="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-code ref="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>
