Picker

A bottom sheet with scrollable columns: single, multi, date, and time.

Examples

CityBeijing ›

DateTap to choose ›

TimeTap to choose ›

Picker

Tap the row to open the panel

<m-picker mode="selector"
  :range='["北京","上海","广州","深圳","杭州"]'
  @change="onCityChange">
  <div>城市: {{ selectedCity }} ›</div>
</m-picker>

<m-picker mode="date" start="2020-01-01" end="2030-12-31"
  @change="onDateChange">
  <div>日期: {{ selectedDate }} ›</div>
</m-picker>

<m-picker mode="time" @change="onTimeChange">
  <div>时间: {{ selectedTime }} ›</div>
</m-picker>

API

Props

属性	说明	类型	默认值
mode	Picker type	selector | multi | date | time	selector
range	Options as a JSON string	string (json)	[]
value	Current selection	string	-
start	Start of valid range (date mode)	string	-
end	End of valid range (date mode)	string	-
disabled	Whether disabled	boolean	false

Events

属性	说明	类型	默认值
change	Fired when a value is confirmed	{ value }	-
cancel	Fired when the picker is cancelled	-	-