Silver Formily Vant1.0.1

Appearance

Mobile Preview Open
Open mobile preview

PickerGroupPanel ​

PickerGroupPanel 为了统一封装风格而独立的组件，大部分情况下应该使用 PickerGroup

提示

  • PickerGroupPanel 不包含字段触发输入框和 Popup；如果需要表单字段触发区，请使用 PickerGroup。
  • 默认插槽中推荐传入 PickerPanel、DatePickerPanel、TimePickerPanel、AreaPanel 这类 Panel 组件。
  • panelProps[index] 需要通过 v-bind 绑定给每个子 panel，用于同步临时值、只读态、禁用态和通用 Picker 配置。

基础使用 ​

vue
<script setup lang="ts">
import type { PickerGroupResolvedValue } from '@silver-formily/vant'
import { PickerGroupPanel, PickerPanel } from '@silver-formily/vant'
import { ref } from 'vue'
import { appointmentOptions } from '../picker-group/shared'
import { showDemoResult } from '../shared'

const value = ref<PickerGroupResolvedValue>(['hz', 'am'])

async function handleConfirm(nextValue: PickerGroupResolvedValue) {
  await showDemoResult(nextValue)
}
</script>

<template>
  <PickerGroupPanel
    v-model="value"
    title="预约信息"
    :data-source="appointmentOptions"
    @confirm="handleConfirm"
  >
    <template #default="{ dataSource, panelProps }">
      <PickerPanel
        v-bind="panelProps[0]"
        :columns="dataSource[0].options"
      />
      <PickerPanel
        v-bind="panelProps[1]"
        :columns="dataSource[1].options"
      />
    </template>
  </PickerGroupPanel>
</template>

API ​

使用约定 ​

  • dataSource 的 title 会用于生成 tab 标题
  • dataSource[index].options 不会自动传入子 panel；使用 PickerPanel 时需要手动绑定到 columns
  • 每个子 panel 的确认事件会先写入当前步骤的临时值；最后一步确认后，PickerGroupPanel 才会触发 update:modelValue 和 confirm
  • cancel 会返回当前临时值，但不会自动写回 modelValue
  • 当前不提供外部 activeTab prop / v-model:active-tab 控制模型

Props ​

属性名类型描述默认值
modelValueArray<string | number | Array<string | number>> | null当前值-
dataSourcePickerGroupDataSource分步数据，用于提供 tab 标题和插槽消费的数据[]
tabsstring[]直接指定 tab 标题，优先级高于 dataSource-
columnsFieldNamesobject自定义选项字段名映射，用于从 dataSource 取标题官方默认值
titlestring顶部标题-
cancelButtonTextstring取消按钮文案官方默认值
confirmButtonTextstring最后一步确认按钮文案官方默认值
nextStepTextstring中间步骤确认按钮文案'下一步'
readonlyboolean只读态false
readOnlyboolean兼容只读态false
disabledboolean禁用态false
optionHeightnumber | string选项高度官方默认值
visibleOptionNumnumber | string可见选项个数官方默认值
swipeDurationnumber | string滚动惯性动画时长官方默认值
allowHtmlboolean是否渲染 HTML 文案官方默认值

Slots ​

插槽名描述插槽参数
default自定义步骤内容，推荐传入各类 *Panel 组件{ dataSource, modelValue, values, panelProps, setValue }
title自定义顶部标题-
cancel自定义取消按钮-
confirm自定义确认按钮-
toolbar自定义整个工具栏-

Events ​

事件名描述回调参数
update:modelValue最后一步确认后同步值Function
confirm最后一步点击确认触发Function
cancel点击取消按钮时触发Function

参考 ​