SelectPicker

Used for single or multiple selection from a set of options, usually combined with external cells or buttons to control popup display.

Component Types

Basic Usage

The default type is checkbox, and the value type of v-model is an array. Usually combined with v-model:visible to control popup visibility.

<wd-cell title="Select Address" :value="getDisplayValue(value)" is-link @click="show = true" />
<wd-select-picker v-model="value" v-model:visible="show" :columns="columns" @confirm="handleConfirm" />

const columns = ref([
  { value: '101', label: 'Men\'s Clothing' },
  { value: '102', label: 'Luxury' },
  { value: '103', label: 'Women\'s Clothing' }
])

const value = ref<string[]>(['101'])
const show = ref(false)

function handleConfirm({ value }: { value: string[] }) {
  console.log(value)
}

Type Switching

Set type="radio" to enable single selection mode. In this case, the value type of v-model is string, number, or boolean.

<wd-select-picker type="radio" v-model="value" v-model:visible="show" :columns="columns" />

Component States

Disabled Options

Option data supports the disabled field to disable a specific item.

<wd-select-picker v-model="value" v-model:visible="show" :columns="columns" />

const columns = ref([
  { value: '101', label: 'Men\'s Clothing', disabled: true },
  { value: '102', label: 'Luxury' },
  { value: '103', label: 'Women\'s Clothing' }
])

Loading

Set loading to display a loading state in the content area.

<wd-select-picker loading v-model="value" v-model:visible="show" :columns="columns" />

Component Styles

Setting Title

Customize the popup title through title.

<wd-select-picker v-model="value" v-model:visible="show" title="Multiple Selection" :columns="columns" />

Searchable

Set filterable to enable local search; both single and multiple selection modes are supported.

<wd-select-picker filterable v-model="value" v-model:visible="show" :columns="columns" />
<wd-select-picker filterable type="radio" v-model="singleValue" v-model:visible="show" :columns="columns" />

Special Styles

Option Change Event

When options inside the selector change, the change event is triggered.

<wd-select-picker v-model="value" v-model:visible="show" :columns="columns" @change="handleChange" />

function handleChange({ value }: { value: string[] }) {
  console.log(value)
}

Pre-confirmation Validation

Set before-confirm to perform synchronous or asynchronous validation before clicking the confirm button. Returns false or Promise<false> to prevent closing the popup.

<wd-select-picker v-model="value" v-model:visible="show" :columns="columns" :before-confirm="beforeConfirm" />

const beforeConfirm = (value: string[]) => {
  return new Promise<boolean>((resolve) => {
    if (value.length > 0) {
      resolve(false)
    } else {
      resolve(true)
    }
  })
}

Auto-complete

In radio mode, you can hide the confirm button with show-confirm="false" to automatically complete after selection.

<wd-select-picker type="radio" :show-confirm="false" v-model="value" v-model:visible="show" :columns="columns" />

Attributes

Parameter	Description	Type	Default Value
v-model	Selected item, array when checkbox, string, number, or boolean when radio	string | number | boolean | (string | number | boolean)[]	-
visible / v-model:visible	Controls popup display state	boolean	false
title	Popup title	string	'Selector'
checked-color	Radio or checkbox selected color	string	-
min	Minimum number of selections, only effective for checkbox	number	0
max	Maximum number of selections, 0 means unlimited, only effective for checkbox	number	0
select-size	Selector internal option size	string	-
loading	Whether to show loading state	boolean	false
loading-color	Loading icon color	string	'#4D80F0'
close-on-click-modal	Whether to close when clicking the mask	boolean	true
columns	Selector data, one-dimensional array	Record<string, any>[]	[]
type	Selector type, optional values are checkbox, radio	string	'checkbox'
value-key	The key for the value field in option objects	string	'value'
label-key	The key for the display text field in option objects	string	'label'
confirm-button-text	Confirm button text	string	'Confirm'
before-confirm	Pre-confirmation validation function, receives current selected value, returns boolean or Promise<boolean>	function	-
z-index	Popup z-index	number	15
safe-area-inset-bottom	Whether to adapt to bottom safe area	boolean	true
filterable	Whether to support local search	boolean	false
filter-placeholder	Search box placeholder	string	'Search'
scroll-into-view v0.1.34	Whether to scroll to selected item when reopened	boolean	true
custom-content-class	Custom popup content area class name	string	''
show-confirm v1.2.8	Whether to show confirm button, only effective in radio mode	boolean	true
root-portal v1.11.0	Whether to detach from page structure, used to solve fixed positioning issues	boolean	false
custom-class	Root node custom class name	string	''
custom-style	Root node custom style	string	''

Option Data Structure

Parameter	Description	Type	Default Value
value	Option value	string | number | boolean	-
label	Option text	string	-
disabled	Whether to disable this option	boolean	false

Events

Event Name	Description	Parameters
change	Triggered when options inside the selector change	{ value }
cancel	Triggered when clicking close button or mask to close	-
confirm	Triggered when clicking confirm	{ value, selectedItems }
open	Triggered when popup opens	-
close v1.2.29	Triggered when popup closes	-

Methods

Method Name	Description	Type
open	Open popup	() => void
close	Close popup	() => void

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-select-picker-bg	$filled-oppo	选择器背景色
--wot-select-picker-loading-opacity	$opacity-disabled	loading 状态下透明度
--wot-select-picker-loading-icon-size	$n-48	loading 图标尺寸
--wot-select-picker-wrapper-padding-horizontal	$padding-main	内容区水平内边距
--wot-select-picker-wrapper-max-height	$n-375	内容区最大高度
--wot-select-picker-text-active-color	$primary-6	选中态文字颜色
--wot-select-picker-footer-padding	$padding-tight $padding-loose	底部内边距
--wot-select-picker-footer-border-color	$border-light	确认区域上边框颜色

Source Code

Documentation

• Component