mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Picker): add multiple columns demo
This commit is contained in:
陈嘉涵
parent
c04697cc42
commit
3e5d8230e2
@ -80,6 +80,31 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Multiple Columns
|
||||
|
||||
```html
|
||||
<van-picker show-toolbar title="Title" :columns="columns" />
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
values: ['Monday', 'Tuesday', 'Wednesday', 'Thusday', 'Friday'],
|
||||
defaultIndex: 2
|
||||
},
|
||||
{
|
||||
values: ['Morging', 'Afternoon', 'Evening'],
|
||||
defaultIndex: 1
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Cascade
|
||||
|
||||
```html
|
||||
@ -261,6 +286,7 @@ Picker events will pass different parameters according to the columns are single
|
||||
| values | Value of column | *string[]* |
|
||||
| defaultIndex | Default value index | *number* |
|
||||
| className | ClassName for this column | *any* |
|
||||
| children | Cascade children | *Column* |
|
||||
|
||||
### Methods
|
||||
|
||||
|
||||
@ -82,6 +82,35 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 多列选择
|
||||
|
||||
通过`columns`属性可以配置多列选择
|
||||
|
||||
```html
|
||||
<van-picker show-toolbar title="标题" :columns="columns" />
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
// 第一列
|
||||
{
|
||||
values: ['周一', '周二', '周三', '周四', '周五'],
|
||||
defaultIndex: 2
|
||||
},
|
||||
// 第二列
|
||||
{
|
||||
values: ['上午', '下午', '晚上'],
|
||||
defaultIndex: 1
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 级联选择
|
||||
|
||||
使用`columns`的`children`字段可以实现选项级联的效果（从 2.4.5 版本开始支持）
|
||||
@ -155,17 +184,14 @@ const citys = {
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
values: Object.keys(citys),
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: citys['浙江'],
|
||||
className: 'column2',
|
||||
defaultIndex: 2
|
||||
}
|
||||
]
|
||||
columns: [{
|
||||
values: Object.keys(citys),
|
||||
className: 'column1'
|
||||
}, {
|
||||
values: citys['浙江'],
|
||||
className: 'column2',
|
||||
defaultIndex: 2
|
||||
}]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -273,6 +299,7 @@ Picker 组件的事件会根据 columns 是单列或多列返回不同的参数
|
||||
| values | 列中对应的备选值 | *string[]*
|
||||
| defaultIndex | 初始选中项的索引，默认为 0 | *number* |
|
||||
| className | 为对应列添加额外的类名 | *any* |
|
||||
| children | 级联选项 | *Column* |
|
||||
|
||||
### 方法
|
||||
|
||||
|
||||
@ -1,3 +1,26 @@
|
||||
export const dateColumns = {
|
||||
'zh-CN': [
|
||||
{
|
||||
values: ['周一', '周二', '周三', '周四', '周五'],
|
||||
defaultIndex: 2,
|
||||
},
|
||||
{
|
||||
values: ['上午', '下午', '晚上'],
|
||||
defaultIndex: 1,
|
||||
},
|
||||
],
|
||||
'en-US': [
|
||||
{
|
||||
values: ['Monday', 'Tuesday', 'Wednesday', 'Thusday', 'Friday'],
|
||||
defaultIndex: 2,
|
||||
},
|
||||
{
|
||||
values: ['Morging', 'Afternoon', 'Evening'],
|
||||
defaultIndex: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const cascadeColumns = {
|
||||
'zh-CN': [
|
||||
{
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-picker :columns="$t('column1')" @change="onChange1" />
|
||||
<van-picker :columns="$t('textColumns')" @change="onChange1" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('defaultIndex')">
|
||||
<van-picker
|
||||
:columns="$t('column1')"
|
||||
:columns="$t('textColumns')"
|
||||
:default-index="2"
|
||||
@change="onChange1"
|
||||
/>
|
||||
@ -16,7 +16,17 @@
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:title="$t('title')"
|
||||
:columns="$t('column1')"
|
||||
:columns="$t('textColumns')"
|
||||
@cancel="onCancel"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('multipleColumns')">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:title="$t('title')"
|
||||
:columns="$t('dateColumns')"
|
||||
@cancel="onCancel"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
@ -33,7 +43,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disableOption')">
|
||||
<van-picker :columns="$t('column2')" />
|
||||
<van-picker :columns="$t('disabledColumns')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
@ -56,7 +66,7 @@
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="$t('column1')"
|
||||
:columns="$t('textColumns')"
|
||||
@cancel="onCancel2"
|
||||
@confirm="onConfirm2"
|
||||
/>
|
||||
@ -66,7 +76,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { cascadeColumns } from './data';
|
||||
import { dateColumns, cascadeColumns } from './data';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
@ -77,11 +87,13 @@ export default {
|
||||
withPopup: '搭配弹出层使用',
|
||||
chooseCity: '选择城市',
|
||||
showToolbar: '展示顶部栏',
|
||||
dateColumns: dateColumns['zh-CN'],
|
||||
defaultIndex: '默认选中项',
|
||||
disableOption: '禁用选项',
|
||||
cascadeColumns: cascadeColumns['zh-CN'],
|
||||
column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
column2: [
|
||||
multipleColumns: '多列选择',
|
||||
textColumns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
disabledColumns: [
|
||||
{ text: '杭州', disabled: true },
|
||||
{ text: '宁波' },
|
||||
{ text: '温州' },
|
||||
@ -99,11 +111,13 @@ export default {
|
||||
withPopup: 'With Popup',
|
||||
chooseCity: 'Choose City',
|
||||
showToolbar: 'Show Toolbar',
|
||||
dateColumns: dateColumns['en-US'],
|
||||
defaultIndex: 'Default Index',
|
||||
disableOption: 'Disable Option',
|
||||
cascadeColumns: cascadeColumns['en-US'],
|
||||
column1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
column2: [
|
||||
multipleColumns: 'Multiple Columns',
|
||||
textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
disabledColumns: [
|
||||
{ text: 'Delaware', disabled: true },
|
||||
{ text: 'Florida' },
|
||||
{ text: 'Georqia' },
|
||||
|
||||
@ -62,6 +62,35 @@ exports[`renders demo correctly 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">周一</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">周二</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">周三</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">周四</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">周五</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">上午</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">下午</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">晚上</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user