Field 输入框

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

Slot

Events