更新记录

2.0.0（2026-03-15） 下载此版本

新增

1. 支持返回完整城市信息（包括经纬度等自定义字段）
2. 支持多种数据格式（扁平数组、省市层级、已分组格式）

1.0.1（2023-07-27） 下载此版本

优化

1. 优化图标字体命名

1.0.0（2023-07-15） 下载此版本

初始版本 1.0.0，基于 Vue3 的城市选择弹窗组件，支持定位、字母索引、单选、多选、主题换色。

1. 支持单选
2. 支持多选
3. 支持主题换色
4. 支持字母索引
5. 支持拼音筛选
6. 支持拼音缩写筛选
7. 支持名称筛选
8. 支持 App、小程序定位到当前城市
9. 可直接使用自带城市数据或自定义业务城市数据

平台兼容性

uni-app(4.0)

da-city-selector 城市选择器

组件名：da-city-selector

一个基于 Vue3 的城市选择弹窗组件，支持 App、小程序定位、单选、多选、筛选、主题换色。

v2.0.0 重大更新：

• ✅ 组件化重构，代码更清晰易维护
• ✅ 支持返回完整城市信息（包括经纬度等自定义字段）
• ✅ 支持多种数据格式输入（省市层级、扁平数组、已分组格式）
• ✅ utils 模块化拆分，提供更好的代码组织
• ✅ 全部组件改为 script setup 模式

功能特性

1. 支持单选
2. 支持多选
3. 支持主题换色
4. 支持字母索引
5. 支持拼音筛选
6. 支持拼音缩写筛选
7. 支持名称筛选
8. 支持 App、小程序定位到当前城市
9. 新增 支持返回完整城市信息（包括经纬度等）
10. 新增 灵活的数据格式支持
11. 可直接使用自带城市数据或自定义业务城市数据

关于使用

可在右侧的使用 HBuilderX 导入插件或下载示例项目ZIP，方便快速上手。

可通过下方的示例及文档说明，进一步了解使用组件相关细节参数。

插件地址：https://ext.dcloud.net.cn/plugin?id=13596

组件示例

<template>
  <da-city-selector
    :visible="citySelectorVisible"
    theme-color="#dd524d"
    :multiple="true"
    :multiple-limit="5"
    :city-value="citySelectedValue"
    @confirm="handleConfirm"
    @close="handleClose"
  />
  <button @click="onShowCitySelector()">选择城市</button>
  <view>{{ cityNames }}</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const citySelectedValue = ref<(string | number)[]>([])
const cityItems = ref<any[]>([])
const cityNames = ref('')
const citySelectorVisible = ref(false)

function onShowCitySelector() {
  // 加载已选内容
  citySelectedValue.value = cityItems.value?.map((k) => k.id)
  citySelectorVisible.value = true
}

function handleConfirm(val: any) {
  // val 返回完整的城市信息，包括：
  // {
  //   id: '110100',
  //   name: '北京市',
  //   sname: '北京',
  //   pinyin: 'bei jing',
  //   latitude: 39.9042,  // 如果数据中有的话
  //   longitude: 116.4074, // 如果数据中有的话
  //   ... 其他自定义字段
  // }
  cityItems.value = Array.isArray(val) ? val : val ? [val] : []
  cityNames.value = cityItems.value.map((k) => k.name).join('、')
  citySelectorVisible.value = false
}

function handleClose() {
  citySelectorVisible.value = false
}
</script>

组件参数

注意： mapKey 申请地址：https://lbs.qq.com/dev/console/key/add

城市数据格式说明

组件支持三种数据格式输入，会自动识别并处理：

1. 扁平数组格式（推荐 ⭐）

最简单直接的格式，适合从后端 API 获取的数据：

const cityData = [
  {
    id: '110100',
    name: '北京市',
    pinyin: 'bei jing',
    latitude: 39.9042,    // 可选：纬度
    longitude: 116.4074,  // 可选：经度
    // ... 其他自定义字段也会被保留
  },
  {
    id: '310100',
    name: '上海市',
    pinyin: 'shang hai',
    latitude: 31.2304,
    longitude: 121.4737,
  }
]

2. 省市层级格式

传统的省市二级结构：

const cityData = [
  {
    id: '110000',
    name: '北京',
    pinyin: 'bei jing',
    ext_name: '北京市',
    children: [
      {
        id: '110100',
        name: '北京',
        pinyin: 'bei jing',
        ext_name: '北京市',
        latitude: 39.9042,
        longitude: 116.4074
      }
    ]
  }
]

3. 已分组格式

如果已经按首字母分组，也可以直接使用：

const cityData = [
  {
    first_char: 'B',
    first_char_key: 'b',
    children: [
      {
        id: '110100',
        name: '北京市',
        sname: '北京',
        pinyin: 'bei jing',
        latitude: 39.9042,
        longitude: 116.4074
      }
    ]
  }
]

说明：

• 组件会自动识别数据格式并处理
• 推荐使用扁平数组格式，最简单直观
• id 和 name 字段是必需的
• pinyin 字段用于搜索和排序，建议提供
• 所有额外字段（如经纬度）都会被保留并在 confirm 事件中返回

返回数据格式

confirm 事件返回完整的城市信息，包括所有自定义字段：

// 单选模式
{
  id: '110100',
  name: '北京市',
  sname: '北京',
  pinyin: 'bei jing',
  ext_name: '北京市',
  latitude: 39.9042,    // 如果原始数据中有
  longitude: 116.4074,  // 如果原始数据中有
  // ... 其他自定义字段
}

// 多选模式
[
  { id: '110100', name: '北京市', latitude: 39.9042, ... },
  { id: '310100', name: '上海市', latitude: 31.2304, ... }
]

组件事件

组件版本

v2.0.0

差异化

已通过测试

• H5 页面
• 微信小程序
• 支付宝、钉钉小程序
• 字节跳动、抖音、今日头条小程序
• 百度小程序
• 飞书小程序
• QQ 小程序
• 京东小程序

未测试

• 快手小程序由于非企业用户暂无演示
• 快应用、360 小程序因 Vue3 支持的原因暂无演示