demo 原始链接:https://vux.li/demos/v2/#/component/selector
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n\n <group :title=\"'no placeholder, the current value is : ' + defaultValue\">\n <selector ref=\"defaultValueRef\" title=\"省份\" :options=\"list\" v-model=\"defaultValue\"></selector>\n </group>\n\n <div style=\"padding:15px;\">\n <x-button type=\"primary\" @click.native=\"getValue('defaultValueRef')\">get full value</x-button>\n </div>\n\n <group title=\"with placeholder\">\n <selector placeholder=\"请选择省份\" v-model=\"demo01\" title=\"省份\" name=\"district\" :options=\"list\" @on-change=\"onChange\"></selector>\n </group>\n\n <group title=\"without title\">\n <selector placeholder=\"请选择省份\" v-model=\"demo02\" :options=\"list\"></selector>\n </group>\n\n <group title=\"set value=广西\">\n <selector v-model=\"value1\" title=\"省份\" :options=\"plainList\" @on-change=\"onChange\"></selector>\n </group>\n\n <group title=\"readonly, displays just like a cell\">\n <selector value=\"gd\" readonly title=\"省份\" :options=\"list\"></selector>\n </group>\n\n <group title=\"use plain options\">\n <selector ref=\"plainValueRef\" value=\"C\" title=\"Selector\" :options=\"list1\" @on-change=\"onChange\"></selector>\n </group>\n\n <div style=\"padding:15px;\">\n <x-button type=\"primary\" @click.native=\"getValue('plainValueRef')\">get full value</x-button>\n </div>\n\n <group :title=\"'boolean selector: ' + value3\">\n <selector v-model=\"value3\" title=\"Vux Is Cool\" :options=\"list2\"></selector>\n </group>\n\n <group :title=\"$t('set valueMap for directly using API data')\" label-width=\"5em\">\n <selector ref=\"valueMapRef\" v-model=\"valueMapValue\" :value-map=\"['idValue', 'idLabel']\" title=\"Selector\" :options=\"valueMapList\" @on-change=\"onChange\"></selector>\n <cell-box align-items=\"flex-start\"><pre>{{ valueMapList }}</pre></cell-box>\n <cell title=\"value\" :value=\"valueMapValue\"></cell>\n </group>\n \n <div style=\"padding:15px;\">\n <x-button type=\"primary\" @click.native=\"getValue('valueMapRef')\">get full value</x-button>\n </div>\n\n </div>\n</template>\n\n<script>\nimport { Selector, Group, Cell, CellBox, XButton } from 'vux'\n\nexport default {\n components: {\n Group,\n Selector,\n Cell,\n CellBox,\n XButton\n },\n data () {\n return {\n demo01: null,\n demo02: '',\n defaultValue: 'gd',\n plainList: ['广东', '广西'],\n list: [{key: 'gd', value: '广东'}, {key: 'gx', value: '广西'}],\n list2: [{key: true, value: '是'}, {key: false, value: '否'}],\n value1: '广西',\n value3: true,\n list1: ['A', 'B', 'C'],\n valueMapValue: 'key01',\n valueMapList: [{\n idValue: 'key01',\n idLabel: 'value01',\n otherProp: 'prop01'\n }, {\n idValue: 'key02',\n idLabel: 'value02',\n otherProp: 'prop02'\n }]\n }\n },\n methods: {\n onChange (val) {\n console.log(val)\n },\n getValue (ref) {\n this.$vux.alert.show({\n title: 'getFullValue',\n content: this.$refs[ref].getFullValue()\n })\n }\n }\n}\n</script>\n\n
\n