Input 输入框

type : 'input'

用户可以在文本框内输入或编辑文字。

代码演示

基础用法

<template>
    <x-form ref="formRef" :model="formValue" :items="formOptions">
        <template #input3.button>
            <van-button type="primary" size="small">发送验证码</van-button>
        </template>
        <template #input5.label>
            <font color="red">自定义label</font>
        </template>
    </x-form>
    <div style="margin:10px">
        <van-button block type="primary" @click="onSubmit">提交</van-button>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const formRef = ref();
const formValue = ref({
    input: '',
});
const formOptions = ref([
    {
        type: 'input',
        label: '账号',
        name: 'input1',
        placeholder: '请输入内容',
    },
    {
        type: 'input',
        label: '密码',
        name: 'input2',
        placeholder: '请输入内容',
        attrs: {
            type: 'password'
        }
    },
    {
        label: '手机号',
        type: 'input',
        name: 'tel',
        rules: [
            { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: ['onChange', 'onBlur'] },
        ],
        required: true,
    },
    {
        type: 'input',
        label: '验证码',
        name: 'input3',
        placeholder: '请输入内容',
    },
]);

const onSubmit = () => {
    formRef.value?.validate().then(() => {
        console.log('submit values =', formValue.value);
    }).catch((error: any) => {
        console.log('error', error);
    })
}
</script>
<style lang="scss" scoped></style>

基础用法

更多用法

<template>
    <x-form ref="formRef"  :model="formValue" :items="formOptions">
        <template #input5.label>
            <font color="red">自定义label</font>
        </template>
    </x-form>
    <div style="margin:10px">
        <van-button block type="primary" @click="onSubmit">提交</van-button>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const formRef = ref();
const formValue = ref({
    input4: '',
});
const formOptions = ref([
    {
        type: 'input',
        label: '必填',
        name: 'input4',
        placeholder: '请输入内容',
        required: true,
    },
    {
        type: 'input',
        label: '自定义label',
        name: 'input5',
        placeholder: '请输入内容',
    },
    {
        type: 'input',
        label: '文本域',
        name: 'input6',
        attr: {
            type: "textarea",
            maxlength: 10,
            rows: 3,
            showWrodLimit: true,
        },
    },
]);

const onSubmit = () => {
    formRef.value?.validate().then(() => {
        console.log('submit values =', formValue.value);
    }).catch((error: any) => {
        console.log('error', error);
    })
}
</script>
<style lang="scss" scoped></style>

更多用法

API

Props

与官方组件 Field 输入框 参数保持一致，这里以展示新增属性配置为主，具体配置参见官方文档。

Events