175 lines
4.2 KiB
Vue
175 lines
4.2 KiB
Vue
<template>
|
||
<demo-section>
|
||
<demo-block :title="$t('basicUsage')">
|
||
<van-picker :columns="$t('column1')" @change="onChange1" />
|
||
</demo-block>
|
||
|
||
<demo-block :title="$t('defaultIndex')">
|
||
<van-picker
|
||
:columns="$t('column1')"
|
||
:default-index="2"
|
||
@change="onChange1"
|
||
/>
|
||
</demo-block>
|
||
|
||
<demo-block :title="$t('showToolbar')">
|
||
<van-picker
|
||
show-toolbar
|
||
:title="$t('title')"
|
||
:columns="$t('column1')"
|
||
@cancel="onCancel"
|
||
@confirm="onConfirm"
|
||
/>
|
||
</demo-block>
|
||
|
||
<demo-block :title="$t('cascade')">
|
||
<van-picker
|
||
show-toolbar
|
||
:title="$t('title')"
|
||
:columns="$t('cascadeColumns')"
|
||
@cancel="onCancel"
|
||
@confirm="onConfirm"
|
||
/>
|
||
</demo-block>
|
||
|
||
<demo-block :title="$t('disableOption')">
|
||
<van-picker :columns="$t('column2')" />
|
||
</demo-block>
|
||
|
||
<demo-block :title="$t('title4')">
|
||
<van-picker :columns="columns" @change="onChange2" />
|
||
</demo-block>
|
||
|
||
<demo-block :title="$t('loadingStatus')">
|
||
<van-picker loading :columns="columns" />
|
||
</demo-block>
|
||
|
||
<demo-block :title="$t('withPopup')">
|
||
<van-field
|
||
readonly
|
||
clickable
|
||
:label="$t('city')"
|
||
:value="fieldValue"
|
||
:placeholder="$t('chooseCity')"
|
||
@click="onClickField"
|
||
/>
|
||
<van-popup v-model="showPicker" position="bottom">
|
||
<van-picker
|
||
show-toolbar
|
||
:columns="$t('column1')"
|
||
@cancel="onCancel2"
|
||
@confirm="onConfirm2"
|
||
/>
|
||
</van-popup>
|
||
</demo-block>
|
||
</demo-section>
|
||
</template>
|
||
|
||
<script>
|
||
import { cascadeColumns } from './data';
|
||
|
||
export default {
|
||
i18n: {
|
||
'zh-CN': {
|
||
city: '城市',
|
||
title4: '多列联动',
|
||
cascade: '级联选择',
|
||
withPopup: '搭配弹出层使用',
|
||
chooseCity: '选择城市',
|
||
showToolbar: '展示顶部栏',
|
||
defaultIndex: '默认选中项',
|
||
disableOption: '禁用选项',
|
||
cascadeColumns: cascadeColumns['zh-CN'],
|
||
column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||
column2: [
|
||
{ text: '杭州', disabled: true },
|
||
{ text: '宁波' },
|
||
{ text: '温州' },
|
||
],
|
||
column3: {
|
||
浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||
福建: ['福州', '厦门', '莆田', '三明', '泉州'],
|
||
},
|
||
toastContent: (value, index) => `当前值：${value}, 当前索引：${index}`,
|
||
},
|
||
'en-US': {
|
||
city: 'City',
|
||
title4: 'Multi Columns',
|
||
cascade: 'Cascade',
|
||
withPopup: 'With Popup',
|
||
chooseCity: 'Choose City',
|
||
showToolbar: 'Show Toolbar',
|
||
defaultIndex: 'Default Index',
|
||
disableOption: 'Disable Option',
|
||
cascadeColumns: cascadeColumns['en-US'],
|
||
column1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||
column2: [
|
||
{ text: 'Delaware', disabled: true },
|
||
{ text: 'Florida' },
|
||
{ text: 'Georqia' },
|
||
],
|
||
column3: {
|
||
Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||
Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'],
|
||
},
|
||
toastContent: (value, index) => `Value: ${value}, Index：${index}`,
|
||
},
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
showPicker: false,
|
||
fieldValue: '',
|
||
};
|
||
},
|
||
|
||
computed: {
|
||
columns() {
|
||
const column = this.$t('column3');
|
||
return [
|
||
{
|
||
values: Object.keys(column),
|
||
className: 'column1',
|
||
},
|
||
{
|
||
values: column[Object.keys(column)[0]],
|
||
className: 'column2',
|
||
defaultIndex: 2,
|
||
},
|
||
];
|
||
},
|
||
},
|
||
|
||
methods: {
|
||
onChange1(picker, value, index) {
|
||
this.$toast(this.$t('toastContent', value, index));
|
||
},
|
||
|
||
onChange2(picker, values) {
|
||
picker.setColumnValues(1, this.$t('column3')[values[0]]);
|
||
},
|
||
|
||
onConfirm(value, index) {
|
||
this.$toast(this.$t('toastContent', value, index));
|
||
},
|
||
|
||
onCancel() {
|
||
this.$toast(this.$t('cancel'));
|
||
},
|
||
|
||
onClickField() {
|
||
this.showPicker = true;
|
||
},
|
||
|
||
onConfirm2(value) {
|
||
this.showPicker = false;
|
||
this.fieldValue = value;
|
||
},
|
||
|
||
onCancel2() {
|
||
this.showPicker = false;
|
||
},
|
||
},
|
||
};
|
||
</script>
|