Question

Field 输入框 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

• 通过v-model，可以双向绑定输入框的值
• 通过label设置输入框左边的提示文字
• 通过placeholder指定个性化的提示语

<template>
	<view>
		<u-field
			v-model="mobile"
			label="手机号"
			placeholder="请填写手机号"
		>
		</u-field>
		<u-field
			v-model="code"
			label="验证码"
			placeholder="请填写验证码"
		>
		</u-field>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				code: ''
			}
		}
	}
</script>

自定义输入框类型

我们可以通过type参数来自定义输入框的类型，如果为text(默认)内部为input输入框，如果为textarea值，内部为textarea输入框，相比input输入框， 它的默认高度约为两个input的高度，且可以换行，同时组件高度也会自动增高，适用于需要多行输入的场景。

<template>
	<view class="">
		<u-field
			v-model="mobile"
			label="手机号"
			placeholder="请填写手机号"
		>
		</u-field>
		
		<u-field
			v-model="mobile"
			label="手机号"
			placeholder="请填写手机号"
			type="textarea"
		>
		</u-field>
	</view>
</template>

必填和错误提示

• 通过设置required，可以给输入框左边添加一个红色的"*"号，它只起提示作用，uView内部不会判断用户是否输入了值，您需要提交的时候，通过v-model绑定的值自行判断
• 通过设置error-message，会在输入框下方给用红色给出错误提示

<template>
	<view class="">
		<u-field
			v-model="mobile"
			label="手机号"
			required
			:error-message="errorMessage"
		>
		</u-field>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				errorMessage: '剑未配妥，出门已是江湖'
			}
		}
	}
</script>

在输入框尾部插入按钮

此为在表单填写时，可能需要用户发送验证码的场景，可以通过slot插入一个uView的button组件，通过结合uView的VerificationCode， 可以简单，迅速的将功能集成

<template>
	<view class="">
		<u-field
			v-model="code"
			label="验证码"
			placeholder="请填写验证码"
		>
			<u-button size="mini" slot="right" type="success" @click="getCode">{{codeText}}</u-button>
		</u-field>
		<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				code: '',
				codeText: ''
			}
		},
		methods: {
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 1000);
				}else {
					this.$u.toast('倒计时结束后再发送');
				}
			}
		}
	}
</script>

如何与Picker或者actionSheet等组件结合

某些场景，比如需要用用户选择性别，或者时间，地区选择等，我们可以结合uView的ActionSheet和Picker组件解决， 这种情况，一般都是要求field组件是不可输入内容的，我们需要设置disabled参数为true，既然是需要弹出选择框，field组件右边应该要有一个实心向下的 三角形图标，配置为right-icon为arrow-down-fill，同时监听click即可。这一切，uView都帮您想到，并且做好了。

<template>
	<view class="">
		<u-field @click="showAction" v-model="sex" 
		:disabled="true" label="性别" placeholder="请选择性别"
		right-icon="arrow-down-fill"
		>
		</u-field>
		<u-action-sheet @click="clickItem" :list="sexList" v-model="show"></u-action-sheet>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sex: '',
			sexList: [
				{
					text: '男',
				},
				{
					text: '女'
				},
				{
					text: '保密'
				}
			],
			show: false
		};
	},
	methods: {
		showAction() {
			this.show = true;
		},
		clickItem(index) {
			this.sex = this.sexList[index].text;
		}
	}
};
</script>

API

Props

参数	说明	类型	默认值	可选值
type	输入框的类型	String	text	textarea
icon	label左边的图标，限uView的图标名称	String	-	-
border-bottom 1.3.9	是否显示field的下边框	Boolean	true	false
border-top 1.3.9	是否显示field的上边框	Boolean	false	true
icon-style 1.3.9	icon的样式，对象形式	Object	-	-
right-icon	输入框右边的图标名称，限uView的图标名称	String	-	-
required	是否必填，左边显示红色"*"号	Boolean	false	true
label	输入框左边的文字提示	String	-	-
password	是否密码输入方式(用点替换文字)，type为text时有效	Boolean	false	true
clearable	是否显示右侧清空内容的图标控件(输入框有内容，且获得焦点时才显示)，点击可清空输入框内容	Boolean	true	false
label-width	label的宽度，单位rpx	Number | String	130	-
label-align	label的文字对齐方式	String	left	center / right
input-align	输入框内容对齐方式	String	left	center / right
icon-color	左边通过icon配置的图标的颜色	String	#606266	-
clear-size	清除图标的大小，单位rpx	Number | String	30	-
field-style	输入框的样式，对象形式	Object	-	-
auto-height	是否自动增高输入区域，type为textarea时有效	Boolean	true	false
error-message	显示的错误提示内容，如果为空字符串或者false，则不显示错误信息	String \ Boolean	-	-
placeholder	输入框的提示文字	String	-	-
placeholder-style	placeholder的样式(内联样式，字符串)，如"color: #ddd"	String	-	-
focus	是否自动获得焦点	Boolean	false	true
fixed	如果type为textarea，且在一个"position:fixed"的区域，需要指明为true	Boolean	false	true
disabled	是否不可输入	Boolean	false	true
maxlength	最大输入长度，设置为 -1 的时候不限制最大长度	Number | String	140	-
confirm-type	设置键盘右下角按钮的文字，仅在type="text"时生效	String	done	-
trim 1.5.8	是否自动去除两端的空格	Boolean	true	false

Slot

名称	说明
icon	自定义左侧的图标
right	自定义右侧内容

Events

事件名	说明	回调参数
input	输入框内容发生变化时触发	value：输入框的内容，建议通过v-model双向绑定输入值，而不是监听此事件的形式
focus	输入框获得焦点时触发	-
blur	输入框失去焦点时触发	-
confirm	点击完成按钮时触发	value：输入框的内容，建议通过v-model双向绑定输入值，而不是监听此事件的形式
right-icon-click	通过right-icon生成的图标被点击时触发
click	输入框被点击或者通过right-icon生成的图标被点击时触发，这样设计是考虑到传递右边的图标，一般都为需要弹出"picker"等操作时的场景，点击倒三角图标，理应发出此事件，见上方说明	-