breaking change(Picker): enable show-toolbar by default
This commit is contained in:
@@ -24,12 +24,11 @@ Picker 组件通过`columns`属性配置选项数据,`columns`是一个包含
|
||||
|
||||
#### 顶部栏
|
||||
|
||||
设置`show-toolbar`属性后会展示顶部操作栏,顶部栏包含标题、确认按钮和取消按钮,点击确认按钮触发`confirm`事件,点击取消按钮触发`cancel`事件
|
||||
顶部栏包含标题、确认按钮和取消按钮,点击确认按钮触发`confirm`事件,点击取消按钮触发`cancel`事件
|
||||
|
||||
```html
|
||||
<van-picker
|
||||
title="标题"
|
||||
show-toolbar
|
||||
:columns="columns"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
@@ -65,7 +64,7 @@ export default {
|
||||
单列选择时,可以通过`default-index`属性设置初始选中项的索引
|
||||
|
||||
```html
|
||||
<van-picker show-toolbar title="标题" :columns="columns" :default-index="2" />
|
||||
<van-picker title="标题" :columns="columns" :default-index="2" />
|
||||
```
|
||||
|
||||
### 多列选择
|
||||
@@ -73,7 +72,7 @@ export default {
|
||||
`columns`属性可以通过对象数组的形式配置多列选择,对象中可以配置选项数据、初始选中项等,详细格式见[下方表格](#/zh-CN/picker#column-shu-ju-jie-gou)。
|
||||
|
||||
```html
|
||||
<van-picker show-toolbar title="标题" :columns="columns" />
|
||||
<van-picker title="标题" :columns="columns" />
|
||||
```
|
||||
|
||||
```js
|
||||
@@ -102,7 +101,7 @@ export default {
|
||||
使用`columns`的`children`字段可以实现选项级联的效果(从 2.4.5 版本开始支持)
|
||||
|
||||
```html
|
||||
<van-picker show-toolbar title="标题" :columns="columns" />
|
||||
<van-picker title="标题" :columns="columns" />
|
||||
```
|
||||
|
||||
```js
|
||||
@@ -149,7 +148,7 @@ export default {
|
||||
选项可以为对象结构,通过设置 disabled 来禁用该选项
|
||||
|
||||
```html
|
||||
<van-picker show-toolbar :columns="columns" />
|
||||
<van-picker :columns="columns" />
|
||||
```
|
||||
|
||||
```js
|
||||
@@ -171,7 +170,7 @@ export default {
|
||||
通过 Picker 上的实例方法可以更灵活地控制选择器,比如使用`setColumnValues`方法实现多列联动
|
||||
|
||||
```html
|
||||
<van-picker ref="picker" show-toolbar :columns="columns" @change="onChange" />
|
||||
<van-picker ref="picker" :columns="columns" @change="onChange" />
|
||||
```
|
||||
|
||||
```js
|
||||
@@ -199,7 +198,7 @@ export default {
|
||||
若选择器数据是异步获取的,可以通过 `loading` 属性显示加载提示
|
||||
|
||||
```html
|
||||
<van-picker show-toolbar :columns="columns" :loading="loading" />
|
||||
<van-picker :columns="columns" :loading="loading" />
|
||||
```
|
||||
|
||||
```js
|
||||
@@ -234,7 +233,6 @@ export default {
|
||||
/>
|
||||
<van-popup v-model="showPicker" round position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="columns"
|
||||
@cancel="showPicker = false"
|
||||
@confirm="onConfirm"
|
||||
@@ -273,7 +271,7 @@ export default {
|
||||
| value-key | 选项对象中,选项文字对应的键名 | _string_ | `text` |
|
||||
| toolbar-position | 顶部栏位置,可选值为`bottom` | _string_ | `top` |
|
||||
| loading | 是否显示加载状态 | _boolean_ | `false` |
|
||||
| show-toolbar | 是否显示顶部栏 | _boolean_ | `false` |
|
||||
| show-toolbar | 是否显示顶部栏 | _boolean_ | `true` |
|
||||
| allow-html `v2.1.8` | 是否允许选项内容中渲染 HTML | _boolean_ | `true` |
|
||||
| default-index | 单列选择时,默认选中项的索引 | _number \| string_ | `0` |
|
||||
| item-height `v2.8.6` | 选项高度,支持 `px` `vw` `rem` 单位,默认 `px` | _number \| string_ | `44` |
|
||||
|
||||
Reference in New Issue
Block a user