Field 输入框

借助此组件，可以实现表单的输入， 有”text”和”textarea”类型的，此外，借助uView的picker和actionSheet组件可以快速实现上拉菜单，时间，地区选择等， 为表单解决方案的利器。

平台差异说明

基本使用

• 如果是表单组(连在一起的有多个field组件)，目前必须要结合uView的u-cell-group组件使用，可以给field表单组提供上下边框
• 通过v-model，可以双向绑定输入框的值
• 通过label设置输入框左边的提示文字
• 通过placeholder指定个性化的提示语

<template>
    <view>
        <u-cell-group>
            <u-field
                v-model="mobile"
                label="手机号"
                placeholder="请填写手机号"
            >
            </u-field>
            <u-field
                v-model="code"
                label="验证码"
                placeholder="请填写验证码"
            >
            </u-field>
        </u-cell-group>
    </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-cell-group>
            <u-field
                v-model="code"
                label="验证码"
                placeholder="请填写验证码"
            >
                <u-button size="mini" slot="button" type="success" @tap="getCode">{{codeText}}</u-button>
            </u-field>
            <u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
        </u-cell-group>
    </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-cell-group>
            <u-field @click="showAction" v-model="sex" 
            :disabled="true" label="性别" placeholder="请选择性别"
            right-icon="arrow-down-fill"
            >
            </u-field>
        </u-cell-group>
        <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

CellItem Slot

CellItem Events