blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

breaking change(Picker): enable show-toolbar by default

Browse Source
This commit is contained in:
chenjiahan 2020-08-21 00:17:04 +08:00
parent 832dab10cf
commit 8843b7875a
11 changed files with 23 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/markdown/migrate-from-v2.zh-CN.md
View File

@ -136,6 +136,7 @@ export default {
### Picker
- 默认开启 show-toolbar 属性
- 移除 change 事件的第一个参数（picker 实例）
- 级联选择下，confirm/change 事件返回的回调参数将包含为完整的选项对象。

1
src/area/index.js
View File

@ -299,7 +299,6 @@ export default createComponent({
v-slots={this.pickerSlots}
ref="picker"
class={bem()}
showToolbar
valueKey="name"
title={this.title}
loading={this.loading}

6
src/datetime-picker/shared.js
View File

@ -7,15 +7,11 @@ export const sharedProps = {
...pickerProps,
filter: Function,
modelValue: null,
showToolbar: {
type: Boolean,
default: true,
},
columnsOrder: Array,
formatter: {
type: Function,
default: (type, value) => value,
},
columnsOrder: Array,
};
export const TimePickerMixin = {

1
src/form/README.md
View File

@ -284,7 +284,6 @@ export default {
/>
<van-popup v-model="showPicker" position="bottom">
<van-picker
show-toolbar
:columns="columns"
@confirm="onConfirm"
@cancel="showPicker = false"

1
src/form/README.zh-CN.md
View File

@ -313,7 +313,6 @@ export default {
/>
<van-popup v-model="showPicker" position="bottom">
<van-picker
show-toolbar
:columns="columns"
@confirm="onConfirm"
@cancel="showPicker = false"

1
src/form/demo/FieldTypePicker.vue
View File

@ -16,7 +16,6 @@
get-container="body"
>
<van-picker
show-toolbar
:columns="t('textColumns')"
@confirm="onConfirm"
@cancel="onCancel"

22
src/picker/README.md
View File

@ -20,7 +20,6 @@ app.use(Picker);
```html
<van-picker
show-toolbar
title="Title"
:columns="columns"
@confirm="onConfirm"
@ -55,13 +54,13 @@ export default {
### Default Index
```html
<van-picker show-toolbar title="Title" :columns="columns" :default-index="2" />
<van-picker title="Title" :columns="columns" :default-index="2" />
```
### Multiple Columns
```html
<van-picker show-toolbar title="Title" :columns="columns" />
<van-picker title="Title" :columns="columns" />
```
```js
@ -86,7 +85,7 @@ export default {
### Cascade
```html
<van-picker show-toolbar title="Title" :columns="columns" />
<van-picker title="Title" :columns="columns" />
```
```js
@ -129,7 +128,7 @@ export default {
### Disable option
```html
<van-picker show-toolbar :columns="columns" />
<van-picker :columns="columns" />
```
```js
@ -149,13 +148,7 @@ export default {
### Set Column Values
```html
<van-picker
ref="picker"
show-toolbar
title="Title"
:columns="columns"
@change="onChange"
/>
<van-picker ref="picker" title="Title" :columns="columns" @change="onChange" />
```
```js
@ -183,7 +176,7 @@ export default {
When Picker columns data is acquired asynchronously, use `loading` prop to show loading prompt
```html
<van-picker show-toolbar title="Title" :columns="columns" :loading="loading" />
<van-picker title="Title" :columns="columns" :loading="loading" />
```
```js
@ -217,7 +210,6 @@ export default {
<van-popup v-model="showPicker" round position="bottom">
<van-picker
title="Title"
show-toolbar
:columns="columns"
@cancel="showPicker = false"
@confirm="onConfirm"
@ -256,7 +248,7 @@ export default {
| value-key | Key of option text | _string_ | `text` |
| toolbar-position | Toolbar position, cat be set to `bottom` | _string_ | `top` |
| loading | Whether to show loading prompt | _boolean_ | `false` |
| show-toolbar | Whether to show toolbar | _boolean_ | `false` |
| show-toolbar | Whether to show toolbar | _boolean_ | `true` |
| allow-html `v2.1.8` | Whether to allow HTML in option text | _boolean_ | `true` |
| default-index | Default value index of single column picker | _number \| string_ | `0` |
| item-height `v2.8.6` | Option height, supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `44` |

18
src/picker/README.zh-CN.md
View File

@ -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` |

9
src/picker/demo/index.vue
View File

@ -2,7 +2,6 @@
<demo-section>
<demo-block card :title="t('basicUsage')">
<van-picker
show-toolbar
:title="t('title')"
:columns="t('textColumns')"
@change="onChange1"
@ -11,7 +10,6 @@
<demo-block card :title="t('defaultIndex')">
<van-picker
show-toolbar
:title="t('title')"
:columns="t('textColumns')"
:default-index="2"
@ -21,7 +19,6 @@
<demo-block card :title="t('multipleColumns')">
<van-picker
show-toolbar
:title="t('title')"
:columns="t('dateColumns')"
@cancel="onCancel"
@ -31,7 +28,6 @@
<demo-block card v-if="!isWeapp" :title="t('cascade')">
<van-picker
show-toolbar
:title="t('title')"
:columns="t('cascadeColumns')"
/>
@ -39,7 +35,6 @@
<demo-block card :title="t('disableOption')">
<van-picker
show-toolbar
:title="t('title')"
:columns="t('disabledColumns')"
/>
@ -48,7 +43,6 @@
<demo-block card :title="t('setColumnValues')">
<van-picker
ref="picker"
show-toolbar
:title="t('title')"
:columns="columns"
@change="onChange2"
@ -56,7 +50,7 @@
</demo-block>
<demo-block card :title="t('loadingStatus')">
<van-picker loading show-toolbar :title="t('title')" :columns="columns" />
<van-picker loading :title="t('title')" :columns="columns" />
</demo-block>
<demo-block card v-if="!isWeapp" :title="t('withPopup')">
@ -70,7 +64,6 @@
/>
<van-popup v-model:show="showPicker" round position="bottom">
<van-picker
show-toolbar
:title="t('title')"
:columns="t('textColumns')"
@cancel="onCancel2"

5
src/picker/shared.ts
View File

@ -14,9 +14,12 @@ export const pickerProps = {
title: String,
loading: Boolean,
itemHeight: [Number, String],
showToolbar: Boolean,
cancelButtonText: String,
confirmButtonText: String,
showToolbar: {
type: Boolean,
default: true,
},
allowHtml: {
type: Boolean,
default: true,

2
src/picker/test/index.spec.js
View File

@ -138,7 +138,7 @@ test('column watch default index', async () => {
test('render title slot', () => {
const wrapper = mount({
template: `
<picker show-toolbar>
<picker>
<template v-slot:title>Custom title</template>
</picker>
`,