Vue 3 业务组件：构建一个城市选择器

引言

在现代 Web 应用程序中，提供基于位置的服务至关重要。这需要一种简单而有效的方法来获取用户的当前位置或允许他们选择一个城市。这就是城市选择器组件的用武之地。在本文中，我们将引导您完成使用 Vue 3 从头开始构建城市选择器组件的逐步过程。

组件结构

一个城市选择器组件通常由以下部分组成：

• 输入字段： 允许用户输入城市名称或邮政编码。
• 自动完成功能： 当用户键入时提供相关城市建议。
• 城市列表： 显示与用户输入匹配的城市列表。
• 选择按钮： 允许用户选择一个城市。

功能

城市选择器组件的主要功能包括：

• 获取用户的当前位置（可选）。
• 根据用户的输入提供城市建议。
• 允许用户从建议的城市列表中选择一个城市。
• 将所选城市传递给父组件。

Vue 3 中的实现

步骤 1：创建组件文件

创建一个新的 Vue 3 组件文件，例如 CitySelector.vue。

<template>
  <div>
    <input type="text" v-model="searchQuery" placeholder="输入城市或邮政编码" />
    <ul v-if="suggestions.length">
      <li v-for="suggestion in suggestions" :key="suggestion.id" @click="selectCity(suggestion)">
        {{ suggestion.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const searchQuery = ref('');
    const suggestions = ref([]);

    const selectCity = (city) => {
      // 在这里处理城市选择逻辑
    };

    return {
      searchQuery,
      suggestions,
      selectCity,
    };
  },
};
</script>

步骤 2：获取用户位置（可选）

如果您希望组件能够获取用户当前位置，请使用 navigator.geolocation API。

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition((position) => {
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;

    // 根据经纬度获取城市信息
  });
}

步骤 3：提供城市建议

使用 API 或第三方库（例如 google-maps-api）提供与用户输入匹配的城市建议。

const getSuggestions = async (query) => {
  const response = await fetch(`https://example.com/api/cities?q=${query}`);
  const data = await response.json();

  suggestions.value = data.cities;
};

步骤 4：处理城市选择

当用户选择一个城市时，触发 selectCity 方法并传递所选城市。

const selectCity = (city) => {
  // 在这里处理城市选择逻辑
  // 例如，将所选城市传递给父组件
  this.$emit('city-selected', city);
};

结论

构建一个城市选择器组件是 Vue 3 中一个常见的任务。通过遵循本文中的步骤，您可以创建自己的组件，轻松地为您的项目添加位置选择功能。通过遵循最佳实践和提供一个直观的用户界面，您可以增强用户体验并为您的应用程序增添价值。