mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
d8b6ad7d54
* fix: Tabbar icon line-height * [new feature] progress add showPivot prop * [new feature] TabItem support vue-router * [new feature] update document header style * [Doc] add toast english ducoment * [new feature] add i18n support * feat: Extract demos from markdown * feat: Base components demos * [new feature] complete demo extract & translate * [fix] text cases * fix: add deepAssign test cases * fix: changelog detail * [new feature] AddressEdit support i18n
75 lines
1.6 KiB
Vue
75 lines
1.6 KiB
Vue
<template>
|
|
<demo-section>
|
|
<demo-block :title="$t('basicUsage')">
|
|
<van-picker :columns="columns" @change="onChange" />
|
|
</demo-block>
|
|
|
|
<demo-block :title="$t('title2')">
|
|
<van-picker
|
|
showToolbar
|
|
:title="$t('area')"
|
|
:columns="columns"
|
|
@change="onChange"
|
|
@cancel="onCancel"
|
|
@confirm="onConfirm"
|
|
/>
|
|
</demo-block>
|
|
</demo-section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
i18n: {
|
|
'zh-CN': {
|
|
area: '地区选择',
|
|
title2: '带 toolbar 的 Picker',
|
|
column: {
|
|
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州'],
|
|
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩']
|
|
}
|
|
},
|
|
'en-US': {
|
|
area: 'Title',
|
|
title2: 'Picker with toolbar',
|
|
column: {
|
|
'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
|
'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']
|
|
}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
columns() {
|
|
const column = this.$t('column');
|
|
return [
|
|
{
|
|
values: Object.keys(column),
|
|
className: 'column1'
|
|
},
|
|
{
|
|
values: column[Object.keys(column)[0]],
|
|
className: 'column2'
|
|
}
|
|
];
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
onChange(picker, values) {
|
|
picker.setColumnValues(1, this.$t('column')[values[0]]);
|
|
},
|
|
onCancel() {
|
|
Toast('picker cancel');
|
|
},
|
|
onConfirm() {
|
|
Toast('picker confirm');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
|
|
<style lang="postcss">
|
|
|
|
</style>
|