沙盘演示系统应用的微信小程序
编辑 | blame | 历史 | 原始文档

:: BASE_DOC ::

API

Picker Props

name type default description required

style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets),used to set style on virtual component | N
auto-close | Boolean | true | - | N
cancel-btn | String / Boolean / Object | true | Typescript:boolean \| string \| ButtonProps | N
confirm-btn | String / Boolean / Object | true | Typescript:boolean \| string \| ButtonPropsButton API Documentssee more ts definition | N
footer | Slot | - | see more ts definition | N
header | Boolean / Slot | true | see more ts definition | N
keys | Object | - | Typescript:KeysTypesee more ts definition | N
popup-props | Object | {} | popup properties。Typescript:PopupPropsPopup API Documentssee more ts definition | N
title | String | '' | - | N
use-popup | Boolean | true | - | N
value | Array | - | Typescript:Array<PickerValue> type PickerValue = string \| numbersee more ts definition | N
default-value | Array | undefined | uncontrolled property。Typescript:Array<PickerValue> type PickerValue = string \| numbersee more ts definition | N
visible | Boolean | false | - | N

Picker Events

name params description

cancel | - | -
change | (value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> ) | -
close | (trigger: TriggerSource) | 1.0.1see more ts definition
type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'

confirm | (value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> ) | -
pick | (value: Array<PickerValue>, label: string, column: number, index: number) | -

PickerItem Props

name type default description required

style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets),used to set style on virtual component | N
format | Function | - | Typescript:(option: PickerItemOption) => string | N
options | Array | [] | Typescript:PickerItemOption[] interface PickerItemOption { label: string; value: string \| number }see more ts definition | N

CSS Variables

The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-picker-group-height | 400rpx | -
--td-picker-bg-color | @bg-color-container | -
--td-picker-border-radius | 24rpx | -
--td-picker-button-font-size | 32rpx | -
--td-picker-cancel-color | @font-gray-2 | -
--td-picker-confirm-color | @brand-color | -
--td-picker-indicator-bg-color | @bg-color-secondarycontainer | -
--td-picker-indicator-border-radius | 12rpx | -
--td-picker-mask-color-bottom | hsla(0, 0%, 100%, 0.4) | -
--td-picker-mask-color-top | hsla(0, 0%, 100%, 0.92) | -
--td-picker-title-color | @font-gray-1 | -
--td-picker-title-font-size | 36rpx | -
--td-picker-title-font-weight | 600 | -
--td-picker-title-line-height | 52rpx | -
--td-picker-toolbar-height | 116rpx | -
--td-picker-item-active-color | @font-gray-1 | -
--td-picker-item-color | @font-gray-2 | -
--td-picker-item-height | 80rpx | -