demo 原始链接:https://vux.li/demos/v2/#/component/picker
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group-title> {{ $t('Normal usage, the first one is selected without setting default value') }} {{year1}}</group-title>\n <picker :data='years' v-model='year1' @on-change='change'></picker>\n <br>\n <group-title> {{ $t('Asynchronous loading and dynamic change of data') }} </group-title>\n <picker :data='years001' v-model='year001' @on-change='change'></picker>\n <br>\n <group>\n <cell :title=\"$t('Current value')\" :value=\"year001\"></cell>\n </group>\n <x-button type=\"primary\" @click.native=\"changeValue([['1','3','5','7','9','11'],['2','3','4','5'],['a','b','c']])\"> {{ $t('Set Data 1') }} </x-button>\n <x-button type=\"primary\" @click.native=\"changeValue([['1','3','5','7','9','11'],['2','3','4','5']])\">{{ $t('Set Data 2') }} </x-button>\n <x-button type=\"primary\" @click.native=\"changeValue([['2','4','6','8','10','11']])\">{{ $t('Set Data 3') }} </x-button>\n <br>\n <group-title> {{ $t('With default value') }} </group-title>\n <picker :data='years' v-model='year2' @on-change='change'></picker>\n <br>\n <group-title> {{ $t('Two-way data binding') }} </group-title>\n <picker :data='years' v-model='year3' @on-change='change3'></picker>\n <select v-model='year5'>\n <option v-for='one in years[0]' :value='one.value'>{{one.name}}</option>\n </select>\n <br>\n <group-title> {{ $t('Multi cols in non chained-mode') }} </group-title>\n <picker :data='years1' v-model='year4' @on-change='change'></picker>\n <br>\n <group-title> {{ $t('Five columns') }} </group-title>\n <picker :data='year6' v-model='year6Value' @on-change='change'></picker>\n <br>\n <group-title>{{ $t('Locations in chained-mode') }}: {{ $t('Current value') }} {{year7Value}} <br> {{ $t('Text corresponding to the value') }}: {{$refs.picker1&&$refs.picker1.getNameValues()}}</group-title>\n <picker :data='year7' :columns=3 v-model='year7Value' @on-change='change' ref=\"picker1\"></picker>\n <x-button @click.native=\"setData1\" type=\"primary\"> {{ $t('Set value to') }} [\"USA\", \"usa002\", \"0005\"]</x-button>\n <x-button @click.native=\"setData2\" type=\"primary\"> {{ $t('Set value to') }} [\"china\", \"china002\", \"gz\"]</x-button>\n <x-button @click.native=\"setList\" type=\"primary\">Set List</x-button>\n <br>\n <group-title> {{ $t('3 cols data but only show 2 cols') }} </group-title>\n <picker :data='year7' :fixed-columns=\"2\" :columns=3 v-model='year8Value' @on-change='change'></picker>\n </div>\n</template>\n\n\n\n<script>\nimport { Cell, Group, Picker, GroupTitle, XButton } from 'vux'\n\nlet years = []\nfor (var i = 2000; i <= 2030; i++) {\n years.push({\n name: i + '年',\n value: i + ''\n })\n}\nexport default {\n components: {\n Picker,\n GroupTitle,\n XButton,\n Cell,\n Group\n },\n methods: {\n changeValue (value) {\n this.years001 = value\n },\n change (value) {\n console.log('new Value', value)\n },\n change3 (value) {\n this.year5 = value[0]\n },\n setData1 () {\n this.year7Value = ['USA', 'usa002', '0005']\n },\n setData2 () {\n this.year7Value = ['china', 'china002', 'gz']\n },\n setList () {\n this.year7.push({\n name: '美国002_003',\n value: '0007',\n parent: 'usa002'\n })\n }\n },\n watch: {\n year5: {\n handler (val) {\n this.year3[0] = val\n // this.year3.$set(0, val)\n this.$set(this.year3, 0, val)\n },\n deep: true\n },\n change3 (value) {\n this.year5 = value[0]\n }\n },\n data () {\n return {\n years: [years],\n years001: [],\n year001: [],\n years1: [years, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]],\n year1: [''],\n year2: ['2002'],\n year3: ['2005'],\n year4: ['2002', '4'],\n year5: '2005',\n year6: [\n ['你', '我', '他'],\n ['you', 'I', 'him'],\n ['ni', 'wo', 'ta'],\n [1, 2, 3, 4, 5],\n [5, 4, 3, 2, 1]\n ],\n year6Value: ['我', 'him', 'ni', '1', '2'],\n year7: [{\n name: '中国',\n value: 'china',\n parent: 0\n }, {\n name: '美国',\n value: 'USA',\n parent: 0\n }, {\n name: '广东',\n value: 'china001',\n parent: 'china'\n }, {\n name: '广西',\n value: 'china002',\n parent: 'china'\n }, {\n name: '美国001',\n value: 'usa001',\n parent: 'USA'\n }, {\n name: '美国002',\n value: 'usa002',\n parent: 'USA'\n }, {\n name: '广州',\n value: 'gz',\n parent: 'china001'\n }, {\n name: '深圳',\n value: 'sz',\n parent: 'china001'\n }, {\n name: '广西001',\n value: 'gz',\n parent: 'china002'\n }, {\n name: '广西002',\n value: 'sz',\n parent: 'china002'\n }, {\n name: '美国001_001',\n value: '0003',\n parent: 'usa001'\n }, {\n name: '美国001_002',\n value: '0004',\n parent: 'usa001'\n }, {\n name: '美国002_001',\n value: '0005',\n parent: 'usa002'\n }, {\n name: '美国002_002',\n value: '0006',\n parent: 'usa002'\n }],\n year7Value: [],\n year8Value: []\n }\n }\n}\n</script>\n\n
\n