Picker 选择器

type : 'picker'

用于选择器，支持单列、多列、级联选择。

代码演示

基础用法

<template>
    <x-form ref="formRef"   :model="formValue" :items="formOptions" />
    <div style="margin:10px">
        <van-button @click="onSubmit" block type="primary">验证</van-button>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const formRef = ref();
const formValue = ref({
    picker1: [],
});

const formOptions = ref([
    {
        type: 'picker',
        label: 'Picker',
        name: 'picker1',
        required: true,
        options: [
            { text: '选项1', value: 1 },
            { text: '选项2', value: 2 },
            { text: '选项3', value: 3 },
        ],
    },
]);

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" />
    <div style="margin:10px">
        <van-button @click="onSubmit" block type="primary">验证</van-button>
        <van-button @click="onAddOpt" block >增加选项</van-button>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const formRef = ref();
const formValue = ref({
    picker1: [4],
});
const opts = ref([
    { label: '选项1', value: 1 },
    { label: '选项2', value: 2 },
    { label: '选项3', value: 3 },
])

const formOptions = ref([
    {
        type: 'picker',
        label: 'Picker Ref',
        name: 'picker1',
        required: true,
        options: opts
    },
]);

const onAddOpt = () => {
    opts.value.push({ label: '选项' + (opts.value.length + 1), value: opts.value.length + 1 })
}
</script>
<style lang="scss" scoped></style>

响应式选项

选项支持Promise

<template>
    <x-form ref="formRef"   :model="formValue" :items="formOptions" />
    <div style="margin:10px">
        <van-button @click="onSubmit" block type="primary">验证</van-button>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const formRef = ref();
const formValue = ref({
    picker3: []
});

const formOptions = ref([
 
    {
        type: 'picker',
        label: '模拟接口',
        name: 'picker3',
        required: true,
        options: async () => {
            const res: any = await getList()
            const list = res.map((item: Indexable) => {
                return {
                    label: item.title,
                    value: item.name
                }
            })
            return list
        }
    },
    {
        type: 'picker',
        label: '模拟异步',
        name: 'picker4',
        required: true,
        options: new Promise((resolve) => {
            setTimeout(() => {
                resolve([
                    { text: 'Promise选项1', value: 1 },
                    { text: 'Promise选项2', value: 2 },
                    { text: 'Promise选项3', value: 3 },
                ])
            }, 5000)
        })
    },

]);

const getList = () => {
    return new Promise((resolve) => {
        setTimeout(() => {
            return resolve([{ title: '系统', name: 'system' },
            { title: '微信', name: 'wechat' },
            { title: 'QQ', name: 'qq' },
            { title: '支付宝', name: 'alipay' },
            { title: '百度', name: 'baidu' },
            { title: '微博', name: 'weibo' },])
        }, 2000)
    })
}


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>

选项支持Promise

API

Props

与官方组件 Picker 选择器 参数保持一致，这里以展示新增属性配置为主，具体配置参见官方文档。

Events