Input 输入框

此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件 wu-form 而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。

应该在 wu-form 中嵌套 wu-form-item，再嵌套 wu-input去实现。

平台兼容性

App(vue)	App(nvue)	H5	小程序	VUE2	VUE3
√	√	√	√	√	√

基本使用

通过 type 设置输入框类型，默认 text
通过 placeholder 设置输入框为空时的占位符
通过 border 配置是否显示输入框的边框
绑定 @change 事件

vue

<template>
  <wu-input
    placeholder="请输入内容"
    border="surround"
    v-model="value"
    @change="change"
  ></wu-input>
</template>

<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  methods: {
    change(e) {
      console.log("change", e);
    },
  },
};
</script>

<template>
  <wu-input
    placeholder="请输入内容"
    border="surround"
    v-model="value"
    @change="change"
  ></wu-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，会在输入框后方增加一个清空按钮。

vue

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

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

下划线

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

vue

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

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

前后图标

全后置图标可自由设置样式信息。将 clearable 设置为 true，会在输入框后方增加一个清空按钮。

vue

<template>
    <wu-input
        placeholder="前置图标"
        prefixIcon="search"
        prefixIconStyle="font-size: 22px;color: #909399"
    ></wu-input>
    <wu-input
        placeholder="后置图标"
        suffixIcon="map-fill"
        suffixIconStyle="color: #909399"
    ></wu-input>
</template>

<template>
    <wu-input
        placeholder="前置图标"
        prefixIcon="search"
        prefixIconStyle="font-size: 22px;color: #909399"
    ></wu-input>
    <wu-input
        placeholder="后置图标"
        suffixIcon="map-fill"
        suffixIconStyle="color: #909399"
    ></wu-input>
</template>

前后插槽

通过设置 slot 为 prefix 或 suffix 来指定前后插槽

vue

<template>
	<view class="wu-demo-block">
		<text class="wu-demo-block__title">前后插槽</text>
		<view class="wu-demo-block__content">
			<wu-input placeholder="前置插槽">
                <template #prefix>
                    <wu-text
                        text="http://"
                        slot="prefix"
                        margin="0 3px 0 0"
                        type="tips"
				    ></wu-text>
                </template>
			</wu-input>
		</view>
		<view
			class="wu-demo-block__content"
			style="margin-top: 15px;"
		>
			<wu-input placeholder="后置插槽">
				<template #suffix>
					<wu-code
						ref="wuCode"
						@change="codeChange"
						seconds="20"
						changeText="X秒重新获取哈哈哈"
					></wu-code>
					<wu-button
						@tap="getCode"
						:text="tips"
						type="success"
						size="mini"
					></wu-button>
				</template>
			</u-input>
		</view>
	</view>
</template>

<script>
    // 这是没有使用扩展配置的引入方式 使用扩展配置后可以直接使用 uni.$w.toast 无需引入
    import { toast } from '@/uni_modules/wu-ui-tools/libs/function/index.js';
    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.wuCode.canGetCode) {
                    // 模拟向后端请求验证码
                    uni.showLoading({
                        title: '正在获取验证码'
                    })
                    setTimeout(() => {
                        uni.hideLoading();
                        // 这里此提示会被this.start()方法中的提示覆盖
                        toast('验证码已发送');
                        // 通知验证码组件内部开始倒计时
                        this.$refs.wuCode.start();
                    }, 2000);
                } else {
                    toast('倒计时结束后再发送');
                }
            },
            change(e) {
                console.log('change', e);
            }
        }
    }
</script>

<template>
	<view class="wu-demo-block">
		<text class="wu-demo-block__title">前后插槽</text>
		<view class="wu-demo-block__content">
			<wu-input placeholder="前置插槽">
                <template #prefix>
                    <wu-text
                        text="http://"
                        slot="prefix"
                        margin="0 3px 0 0"
                        type="tips"
				    ></wu-text>
                </template>
			</wu-input>
		</view>
		<view
			class="wu-demo-block__content"
			style="margin-top: 15px;"
		>
			<wu-input placeholder="后置插槽">
				<template #suffix>
					<wu-code
						ref="wuCode"
						@change="codeChange"
						seconds="20"
						changeText="X秒重新获取哈哈哈"
					></wu-code>
					<wu-button
						@tap="getCode"
						:text="tips"
						type="success"
						size="mini"
					></wu-button>
				</template>
			</u-input>
		</view>
	</view>
</template>

<script>
    // 这是没有使用扩展配置的引入方式 使用扩展配置后可以直接使用 uni.$w.toast 无需引入
    import { toast } from '@/uni_modules/wu-ui-tools/libs/function/index.js';
    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.wuCode.canGetCode) {
                    // 模拟向后端请求验证码
                    uni.showLoading({
                        title: '正在获取验证码'
                    })
                    setTimeout(() => {
                        uni.hideLoading();
                        // 这里此提示会被this.start()方法中的提示覆盖
                        toast('验证码已发送');
                        // 通知验证码组件内部开始倒计时
                        this.$refs.wuCode.start();
                    }, 2000);
                } else {
                    toast('倒计时结束后再发送');
                }
            },
            change(e) {
                console.log('change', e);
            }
        }
    }
</script>

API

Input Props

属性名	说明	类型	默认值	可选值
value / modelValue	输入的值	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	是否忽略组件内对文本合成系统事件的处理。为 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	-	-
placeholder	输入框为空时的占位符	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	-	-

Input Events

事件名	说明	回调参数
blur	输入框失去焦点时触发	value：内容值
focus	输入框聚焦时触发	-
confirm	点击完成按钮时触发	value：内容值
keyboardheightchange	键盘高度发生变化的时候触发此事件	-
input	内容发生变化触发此事件	value：内容值
change	内容发生变化触发此事件	value：内容值
clear	点击清空内容	-

Input Methods

方法名	说明
setFormatter	为兼容微信小程序而暴露的内部方法，见上方说明

Input Slots

插槽名	说明
prefix	输入框前置内容
suffix	输入框后置内容

Input 输入框 ​

平台兼容性 ​

基本使用 ​

输入框的类型 ​

可清空字符 ​

下划线 ​

前后图标 ​

前后插槽 ​

API ​

Input Props ​

Input Events ​

Input Methods ​

Input Slots ​