当前位置：首页 > VUE

vue实现城市列表选择

2026-02-25 07:05:49VUE

实现城市列表选择功能

在Vue中实现城市列表选择功能，通常需要结合城市数据、列表展示和用户交互。以下是具体实现方法：

数据准备

城市数据可以存储在本地或通过API获取。本地数据示例：

const cityData = [
  { id: 1, name: '北京', pinyin: 'beijing' },
  { id: 2, name: '上海', pinyin: 'shanghai' },
  // 更多城市数据...
]

组件结构

创建城市选择组件的基本结构：

vue实现城市列表选择

<template>
  <div class="city-selector">
    <input v-model="searchQuery" placeholder="搜索城市"/>
    <div class="city-list">
      <div 
        v-for="city in filteredCities" 
        :key="city.id"
        @click="selectCity(city)"
      >
        {{ city.name }}
      </div>
    </div>
  </div>
</template>

实现搜索功能

通过计算属性实现城市搜索：

computed: {
  filteredCities() {
    if (!this.searchQuery) return this.cities;
    return this.cities.filter(city => 
      city.name.includes(this.searchQuery) || 
      city.pinyin.includes(this.searchQuery.toLowerCase())
    );
  }
}

字母索引（可选）

对于大型城市列表，可以添加字母索引：

vue实现城市列表选择

<template>
  <div class="index-bar">
    <span 
      v-for="letter in indexLetters" 
      :key="letter"
      @click="scrollToLetter(letter)"
    >
      {{ letter }}
    </span>
  </div>
</template>

选择城市处理

实现城市选择逻辑：

methods: {
  selectCity(city) {
    this.$emit('city-selected', city);
    // 可以添加路由跳转或其他逻辑
  }
}

样式优化

添加基础样式提升用户体验：

.city-list {
  max-height: 400px;
  overflow-y: auto;
}
.city-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.city-item:hover {
  background-color: #f5f5f5;
}

完整组件示例

<template>
  <div class="city-selector">
    <input v-model="searchQuery" placeholder="搜索城市"/>
    <div class="index-bar">
      <span v-for="letter in indexLetters" :key="letter" @click="scrollToLetter(letter)">
        {{ letter }}
      </span>
    </div>
    <div class="city-list">
      <div 
        v-for="city in filteredCities" 
        :key="city.id"
        class="city-item"
        @click="selectCity(city)"
      >
        {{ city.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cities: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      searchQuery: '',
      indexLetters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
    }
  },
  computed: {
    filteredCities() {
      if (!this.searchQuery) return this.cities;
      const query = this.searchQuery.toLowerCase();
      return this.cities.filter(city => 
        city.name.includes(this.searchQuery) || 
        city.pinyin.includes(query)
      );
    }
  },
  methods: {
    selectCity(city) {
      this.$emit('city-selected', city);
    },
    scrollToLetter(letter) {
      // 实现滚动到对应字母的城市区域
    }
  }
}
</script>