demo 原始链接:https://vux.li/demos/v2/#/component/popup-picker
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group title=\"single column\" label-width=\"5em\">\n <popup-picker :title=\"title1\" :data=\"list1\" v-model=\"value1\" @on-show=\"onShow\" @on-hide=\"onHide\" @on-change=\"onChange\" :placeholder=\"$t('please select')\"></popup-picker>\n <popup-picker :popup-title=\"$t('please select')\" :title=\"title1\" :data=\"list1\" v-model=\"value1_1\" @on-show=\"onShow\" @on-hide=\"onHide\" @on-change=\"onChange\" :placeholder=\"$t('please select')\">\n <template slot=\"title\" slot-scope=\"props\"><!-- use scope=\"props\" when vue < 2.5.0 -->\n <span :class=\"props.labelClass\" :style=\"props.labelStyle\" style=\"height:24px;\">\n <span class=\"demo-icon demo-icon-big\" style=\"font-size:20px;vertical-align:middle;\"></span>\n <span style=\"vertical-align:middle;\">手机</span>\n </span>\n </template>\n </popup-picker>\n </group>\n <br>\n <div class=\"picker-buttons\">\n <x-button type=\"primary\" @click.native=\"value1=[]\">将值置为空</x-button>\n <x-button type=\"primary\" @click.native=\"changeList10\">重新赋值列表</x-button>\n <x-button type=\"primary\" @click.native=\"changeList11\">push方式更改列表</x-button>\n </div>\n <group title=\"double columns\">\n <popup-picker :title=\"title2\" :data=\"list2\" v-model=\"value2\"></popup-picker>\n </group>\n <br>\n\n <group title=\"chained columns\">\n <popup-picker :title=\"title3\" :data=\"list3\" :columns=\"3\" v-model=\"value3\" ref=\"picker3\"></popup-picker>\n <cell title=\"获取值对应的文字\" :value=\"$refs.picker3&&$refs.picker3.getNameValues()\"></cell>\n <popup-picker :title=\"title4\" :data=\"list3\" :columns=\"3\" v-model=\"value4\" show-name></popup-picker>\n </group>\n\n <br>\n <div class=\"picker-buttons\">\n <x-button type=\"primary\" @click.native=\"changeList21\">push方式更改列表</x-button>\n </div>\n\n <br>\n <divider>Control the visibility of popup-picker</divider>\n <div style=\"margin: 0 15px;\">\n <x-button @click.native=\"showPopupPicker = true\" type=\"primary\">Show PopupPicker. value: {{value5 }}</x-button>\n </div>\n <group>\n <popup-picker :show.sync=\"showPopupPicker\" :show-cell=\"false\" title=\"TEST\" :data=\"[['1', '2', '3', '4', '5']]\" v-model=\"value5\"></popup-picker>\n </group>\n\n <br>\n <group title=\"隐藏时不影响其他popup-picker的mask\">\n <x-switch title=\"ishide popup-picker\" v-model=\"switch6\"></x-switch>\n <popup-picker v-if=\"!switch6\" title=\"显示值\" :data=\"['我不会影响遮罩层'.split('')]\" v-model=\"value6\"></popup-picker>\n </group>\n\n <br>\n <br>\n\n <group title=\"显示格式化\">\n <popup-picker title=\"时间\" :inline-desc=\"`当前值[${formatDemoValue}]`\"v-model=\"formatDemoValue\" :data=\"[['01','02','03'],['11','12','13']]\" :display-format=\"format\"></popup-picker>\n </group>\n </div>\n</template>\n\n\n\n<script>\nimport { PopupPicker, Group, Cell, Picker, XButton, Divider, XSwitch } from 'vux'\n\nexport default {\n components: {\n PopupPicker,\n Group,\n Picker,\n XButton,\n Divider,\n Cell,\n XSwitch\n },\n methods: {\n onChange (val) {\n console.log('val change', val)\n },\n changeList10 () {\n this.list1 = [['小米1', 'iPhone1', '华为1', '情怀1', '三星1', '其他1', '不告诉你1']]\n },\n changeList11 () {\n this.list1[0].push('我是push条目')\n },\n changeList20 () {\n\n },\n changeList21 () {\n this.list3.push({\n name: '美国002_007',\n value: '0007',\n parent: 'usa002'\n })\n },\n onShow () {\n console.log('on show')\n },\n onHide (type) {\n console.log('on hide', type)\n }\n },\n data () {\n return {\n title1: '手机机型',\n title2: '详细机型',\n title3: '联动显示值',\n title4: '联动显示文字',\n list1: [['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你']],\n list2: [['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你'], ['小米1', 'iPhone2', '华为3', '情怀4', '三星5', '其他6', '不告诉你7']],\n list3: [{\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: 'gx001',\n parent: 'china002'\n }, {\n name: '广西002',\n value: 'gx002',\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 value1: ['iPhone'],\n value1_1: ['iPhone'],\n value2: ['iPhone', '华为3'],\n value3: [],\n value4: [],\n showPopupPicker: false,\n value5: ['2'],\n switch6: false,\n value6: [],\n formatDemoValue: ['01', '12'],\n format: function (value, name) {\n return `${value[0]}:${value[1]}`\n }\n }\n }\n}\n</script>\n\n<style scoped>\n.picker-buttons {\n margin: 0 15px;\n}\n</style>\n\n
\n