如何使用 Vue 实现城市选择器？

近年来，前端技术不断地更新，前端框架的出现也让我们日常开发中效率得到很大的提升。在 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 部分中引入城市数据：

  import cityData from './city-data.json';  export default {    // 组件属性和方法  }

登录后复制

2.2 定义选择器组件

由于城市选择器可以用于多个地方，我们可以将它定义为一个组件。在这个组件中，我们需要定义一些属性和方法。

属性：

modelValue：当前选中的城市值；placeholder：选择器输入框中的提示语；width：选择器输入框的宽度；disabled：选择器是否禁用；readonly：选择器是否只读。

方法：

handleChangeCity：选中城市后的回调方法。

    
  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;    }  }

登录后复制

2.3 渲染城市数据

在选择器中显示城市数据需要进行递归渲染。在渲染时，我们需要定义一个函数，递归遍历每一层的城市数据。由于城市数据可能有多级，我们需要使用递归的方式进行遍历。在代码实现中，我们使用了 Vue 组件中定义的 template 的方式进行渲染。

        
        
{{ province.label }}
        
                        
                
{{ city.label }}
                
                    
{{ district.label }}
                  
                
            
        
    
  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);    }  }

登录后复制

2.4 完整选择器组件代码

最终的城市选择器组件代码如下所示：

    
      
        请选择城市        ×      
      
                
          
            
省份
            
城市
            
区县
          
          
            
                  
{{ province.label }}
                  
                                            
                          
{{ city.label }}
                          
                                                            
{{ district.label }}
                            
                          
                      
                  
              
{{ city.label }}
                  
{{ district.label }}
                      
        
      
    
  
  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;          })        }      })    }  }

登录后复制

三、使用城市选择器

在 Vue 项目中的使用城市选择器组件很简单，只需要在需要使用的页面中引入城市选择器组件，然后在使用时传入相应的参数即可。下面是使用代码示例：

    
  import CityPicker from './components/CityPicker';  export default {    components: {      CityPicker    },    data() {      return {        city: ''      }    },    methods: {      handleChangeCity(value) {        console.log('选中的城市为：', value);      }    }  }

登录后复制

至此，我们已经可以在 Vue 应用中使用城市选择器组件了。这个城市选择器组件代码非常简单，但是实现了基本的城市选择功能，可以依照自己的需求进行扩展和优化。

以上就是如何使用 Vue 实现城市选择器？的详细内容，更多请关注【创想鸟】其它相关文章！