demo 原始链接:https://vux.li/demos/v2/#/component/x-address
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group>\n <x-address @on-hide=\"logHide\" @on-show=\"logShow\" :title=\"title\" v-model=\"value\" :list=\"addressData\" @on-shadow-change=\"onShadowChange\" placeholder=\"请选择地址\" inline-desc=\"可以设置placeholder\" :show.sync=\"showAddress\"></x-address>\n <cell title=\"上面value值\" :value=\"value\"></cell>\n </group>\n\n <div style=\"padding: 15px;\">\n <x-address style=\"display:none;\" :popup-title=\"$t('selecte address')\" :title=\"title\" v-model=\"value\" :list=\"addressData\" placeholder=\"请选择地址\" :show.sync=\"showAddress\"></x-address>\n <x-button type=\"primary\" @click.native=\"doShowAddress\">单独控制显示(2s后关闭)</x-button>\n </div>\n\n <group>\n <x-address :title=\"title\" @on-hide=\"logHide\" v-model=\"value_0_1\" :list=\"addressData\" placeholder=\"请选择地址\">\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 </x-address>\n </group>\n\n <br>\n <group label-width=\"5em\" label-align=\"left\">\n <x-address :title=\"title2\" v-model=\"value2\" raw-value :list=\"addressData\" value-text-align=\"left\"></x-address>\n </group>\n <br/>\n <div style=\"padding: 0 15px;\">\n <x-button type=\"primary\" @click.native=\"changeData\">改变数据(通过 id)</x-button>\n <x-button type=\"primary\" @click.native=\"changeDataByLabels\">改变数据(通过文字值)</x-button>\n <x-button type=\"primary\" @click.native=\"changeDataByLabels2\">改变数据(两级,通过文字值)</x-button>\n </div>\n <br/>\n\n <group>\n <x-address title=\"二级省市\" v-model=\"value3\" raw-value :list=\"addressData\"></x-address>\n </group>\n <group>\n <x-address title=\"只显示省市\" v-model=\"value4\" raw-value :list=\"addressData\" hide-district></x-address>\n <cell title=\"value值\" :value=\"value4\"></cell>\n <cell title=\"转换成文字值\" :value=\"getName(value4)\"></cell>\n </group>\n\n <br/>\n <group title=\"错误的地址将不能正确渲染到相应位置\">\n <x-address title=\"错误的值\" v-model=\"value5\" raw-value :list=\"addressData\" inline-desc=\"广东省, 深圳 市, 南山区\"></x-address>\n </group>\n </div>\n</template>\n\n\n\n<script>\nimport { Group, XAddress, ChinaAddressV4Data, XButton, Cell, Value2nameFilter as value2name } from 'vux'\n\nexport default {\n components: {\n Group,\n XAddress,\n XButton,\n Cell\n },\n data () {\n return {\n title: '默认为空',\n value_0_1: [],\n value: [],\n title2: '设置值',\n value2: ['天津市', '市辖区', '和平区'],\n value3: ['广东省', '中山市', '--'],\n addressData: ChinaAddressV4Data,\n value4: [],\n value5: ['广东省', '深圳 市', '南山区'],\n showAddress: false\n }\n },\n methods: {\n doShowAddress () {\n this.showAddress = true\n setTimeout(() => {\n this.showAddress = false\n }, 2000)\n },\n onShadowChange (ids, names) {\n console.log(ids, names)\n },\n changeData () {\n this.value2 = ['430000', '430400', '430407']\n },\n changeDataByLabels () {\n this.value2 = ['广东省', '广州市', '天河区']\n },\n changeDataByLabels2 () {\n this.value2 = ['广东省', '中山市', '--']\n },\n getName (value) {\n return value2name(value, ChinaAddressV4Data)\n },\n logHide (str) {\n console.log('on-hide', str)\n },\n logShow (str) {\n console.log('on-show')\n }\n }\n}\n</script>\n\n
\n