近年来，前端技术不断地更新，前端框架的出现也让我们日常开发中效率得到很大的提升。在 vue.js 的框架下，我们可以很容易地实现许多常用的功能组件，比如城市选择器。
那么，如何在 vue 中实现城市选择器呢？本篇文章将给大家分享一个简单的实现方法。
一、数据准备
在实现城市选择器之前，我们需要准备好城市数据。由于城市数据比较多，我们需要使用一个 json 数据格式来存储。在这里，我提供了一个 json 数据文件，大家可以在网上或其他资源中寻找。
城市数据文件样例：
[ { "label": "北京市", "value": "110000", "children": [ { "label": "北京市", "value": "110100", "children": [ { "label": "东城区", "value": "110101" }, { "label": "西城区", "value": "110102" }, { "label": "崇文区", "value": "110103" }, ... ] } ] }, { "label": "上海市", "value": "310000", "children": [ { "label": "上海市", "value": "310100", "children": [ { "label": "黄浦区", "value": "310101" }, { "label": "徐汇区", "value": "310104" }, { "label": "长宁区", "value": "310105" }, ... ] } ] }, ...]
二、选择器组件实现
2.1 引入城市数据
我们需要在组件的 script 部分中引入城市数据：
<script> import citydata from './city-data.json'; export default { // 组件属性和方法 }</script>
2.2 定义选择器组件
由于城市选择器可以用于多个地方，我们可以将它定义为一个组件。在这个组件中，我们需要定义一些属性和方法。
属性：
modelvalue：当前选中的城市值；placeholder：选择器输入框中的提示语；width：选择器输入框的宽度；disabled：选择器是否禁用；readonly：选择器是否只读。方法：
handlechangecity：选中城市后的回调方法。<template> <div class="city-picker"> <input type="text" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" :style="{width: width}" v-model="selectedcity"> <!-- 其他相关 dom 结构 --> </div></template><script> import citydata from './city-data.json'; export default { props: { modelvalue: { type: string, default: '' }, placeholder: { type: string, default: '请选择城市' }, width: { type: string, default: '200px' }, disabled: { type: boolean, default: false }, readonly: { type: boolean, default: false } }, data() { return { selectedcity: this.modelvalue, // 城市数据 citydata: [] } }, methods: { handlechangecity(value) { this.selectedcity = value; // 触发父组件的 onchange 事件 this.$emit('onchange', value); } }, mounted() { this.citydata = citydata; } }</script>
2.3 渲染城市数据
在选择器中显示城市数据需要进行递归渲染。在渲染时，我们需要定义一个函数，递归遍历每一层的城市数据。由于城市数据可能有多级，我们需要使用递归的方式进行遍历。在代码实现中，我们使用了 vue 组件中定义的 template 的方式进行渲染。
<template> <div> <!-- 递归渲染省份数据 --> <template v-for="province in citydata"> <div :key="province.value" class="province"> <div @click="handleshowcity(province)">{{ province.label }}</div> <template v-if="province.children && province.children.length > 0"> <div v-show="province.showcity"> <!-- 递归渲染城市和区县数据 --> <template v-for="city in province.children"> <div :key="city.value" class="city"> <div @click="handleshowdistrict(city)">{{ city.label }}</div> <template v-if="city.children && city.children.length > 0"> <div v-show="city.showdistrict"> <div v-for="district in city.children" :key="district.value">{{ district.label }}</div> </div> </template> </div> </template> </div> </template> </div> </template> </div></template><script> import citydata from './city-data.json'; export default { props: { modelvalue: { type: string, default: '' }, placeholder: { type: string, default: '请选择城市' }, width: { type: string, default: '200px' }, disabled: { type: boolean, default: false }, readonly: { type: boolean, default: false } }, data() { return { selectedcity: this.modelvalue, // 城市数据 citydata: [] } }, methods: { handleshowcity(province) { // 点击省份时，展开或关闭城市数据 province.showcity = !province.showcity; }, handleshowdistrict(city) { // 点击城市时，展开或关闭区县数据 city.showdistrict = !city.showdistrict; // 选中城市后，调用 handlechangecity 方法 this.handlechangecity(city.label); }, handlechangecity(value) { this.selectedcity = value; // 触发父组件的 onchange 事件 this.$emit('onchange', value); }, // 递归遍历城市数据，渲染出每一个层级的城市数据 rendercity(citydata) { citydata.foreach(city => { city.showdistrict = false; if (city.children && city.children.length > 0) { this.rendercity(city.children); city.showcity = false; } }) } }, mounted() { this.citydata = citydata; // 渲染城市数据 this.rendercity(this.citydata); } }</script>
2.4 完整选择器组件代码
最终的城市选择器组件代码如下所示：
<template> <div class="city-picker"> <input type="text" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" :style="{width: width}" v-model="selectedcity"> <!-- 城市选择器弹出框 --> <div class="city-picker-modal" v-show="showmodal"> <div class="city-picker-header"> <span>请选择城市</span> <span class="close-icon" @click="handleclosemodal">&times;</span> </div> <div class="city-picker-body"> <!-- 渲染城市选择器树形结构 --> <div class="city-picker-tree"> <div class="top-tab"> <div :class="{ active: (activetab === 'province') }" @click="handletoggletab('province')" >省份</div> <div :class="{ active: (activetab === 'city') }" @click="handletoggletab('city')" >城市</div> <div :class="{ active: (activetab === 'district') }" @click="handletoggletab('district')" >区县</div> </div> <div class="tab-content"> <template v-if="activetab === 'province'"> <!-- 渲染省份数据 --> <template v-for="province in citydata"> <div :key="province.value" class="province"> <div @click="handleshowcity(province)">{{ province.label }}</div> <template v-if="province.children && province.children.length > 0"> <div v-show="province.showcity"> <!-- 渲染城市数据 --> <template v-for="city in province.children"> <div :key="city.value" class="city"> <div @click="handleshowdistrict(city)">{{ city.label }}</div> <template v-if="city.children && city.children.length > 0"> <div v-show="city.showdistrict"> <!-- 渲染区县数据 --> <div v-for="district in city.children" :key="district.value">{{ district.label }}</div> </div> </template> </div> </template> </div> </template> </div> </template> </template> <template v-else-if="activetab === 'city'"> <!-- 渲染城市数据 --> <template v-for="province in citydata"> <template v-if="province.children && province.children.length > 0"> <template v-for="city in province.children"> <div :key="city.value" class="city">{{ city.label }}</div> </template> </template> </template> </template> <template v-else-if="activetab === 'district'"> <!-- 渲染区县数据 --> <template v-for="province in citydata"> <template v-if="province.children && province.children.length > 0"> <template v-for="city in province.children"> <template v-if="city.children && city.children.length > 0"> <template v-for="district in city.children"> <div :key="district.value">{{ district.label }}</div> </template> </template> </template> </template> </template> </template> </div> </div> </div> </div> </div></template><script> import citydata from './city-data.json'; export default { props: { modelvalue: { type: string, default: '' }, placeholder: { type: string, default: '请选择城市' }, width: { type: string, default: '200px' }, disabled: { type: boolean, default: false }, readonly: { type: boolean, default: false } }, data() { return { // 当前选中的城市 selectedcity: this.modelvalue, // 城市数据 citydata: [], // 显示弹出框标志位 showmodal: false, // 当前显示的 tab 标签页 activetab: 'province' } }, methods: { // 选中省份时，展开或关闭城市数据 handleshowcity(province) { province.showcity = !province.showcity; this.activetab = (province.showcity ? 'city' : 'province'); }, // 选中城市时，展开或关闭区县数据，并选中城市 handleshowdistrict(city) { city.showdistrict = !city.showdistrict; this.activetab = (city.showdistrict ? 'district' : 'city'); this.selectedcity = city.label; // 触发父组件 onchange 事件 this.$emit('onchange', city.label); // 关闭弹出层 this.showmodal = false; }, // 切换 tab 标签页 handletoggletab(tab) { this.activetab = tab; }, // 关闭城市选择器弹窗 handleclosemodal() { this.showmodal = false; } }, mounted() { this.citydata = citydata; // 递归渲染城市数据，设置状态 this.citydata.foreach((province) => { province.showcity = false; if (province.children && province.children.length > 0) { province.children.foreach((city) => { city.showdistrict = false; }) } }) } }</script>
三、使用城市选择器
在 vue 项目中的使用城市选择器组件很简单，只需要在需要使用的页面中引入城市选择器组件，然后在使用时传入相应的参数即可。下面是使用代码示例：
<template> <div> <citypicker v-model="city" :width="200" ></citypicker> </div></template><script> import citypicker from './components/citypicker'; export default { components: { citypicker }, data() { return { city: '' } }, methods: { handlechangecity(value) { console.log('选中的城市为：', value); } } }</script>
至此，我们已经可以在 vue 应用中使用城市选择器组件了。这个城市选择器组件代码非常简单，但是实现了基本的城市选择功能，可以依照自己的需求进行扩展和优化。
以上就是如何使用 vue 实现城市选择器？的详细内容。