Input Slot 输入框区域插槽

type : 'input-slot'

用于自定义输入区域内容，携带表单的label。通常用于自定义表单项组件的情况。

代码演示

基础用法

<template>
    <div class="">
        <x-form ref="formRef" label-align="top" :model="formValue" :items="formOptions">
            <template #inputSlot>
                <van-radio-group v-model="formValue.inputSlot">
                    <van-radio name="1">单选框 1</van-radio>
                    <van-radio name="2">单选框 2</van-radio>
                </van-radio-group>
            </template>
            <template #inputSlot2>
                <van-search v-model="formValue.inputSlot2" placeholder="请输入搜索关键词" />
            </template>
        </x-form>
        <div style="margin:10px">
            <van-button @click="onSubmit" block type="primary">验证</van-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const formRef = ref();
const formValue = ref({
    inputSlot: '',
    inputSlot2: '',
});
const formOptions = ref([
    {
        type: 'input-slot',
        label: 'inputSlot',
        name: 'inputSlot',
        placeholder: '请输入内容',
        required: true,
        itemProps: {
        }
    },
    {
        label: 'inputSlot2',
        type: 'input-slot',
        name: 'inputSlot2',
        itemProps: {
            required: 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

无

Events

无