更新记录
1.0.0(2026-02-02)
下载此版本
- 支持省市县三级联动
- 自动加载广东省数据
- 动态显示当前选择
- 支持自定义选择级别
平台兼容性
uni-app(5.0)
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| - |
√ |
√ |
- |
√ |
- |
- |
- |
- |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
小红书小程序 |
快应用-华为 |
快应用-联盟 |
| - |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
uni-app x(5.0)
| Chrome |
Safari |
Android |
iOS |
鸿蒙 |
微信小程序 |
| - |
- |
- |
- |
- |
- |
Check-Area 地区选择器
三级地区选择器(省市县),基于 ToggleBar 和 CheckButton 组合实现。

功能特性
- 支持省市县三级联动
- 自动加载广东省数据
- 动态显示当前选择
- 支持自定义选择级别
Props
| 属性名 |
类型 |
默认值 |
说明 |
| modelValue |
String/Number |
"" |
选中的地区ID |
| mode |
Number |
3 |
选择级别:1-省、2-省市、3-省市区 |
Events
| 事件名 |
参数 |
说明 |
| update:modelValue |
- |
值变化时触发 |
| change |
Object |
地区变化时触发,返回省市区信息 |
使用示例
<template>
<Check-Area v-model="areaId" mode="3" @change="handleAreaChange" />
</template>
<script setup>
import { ref } from 'vue';
import CheckArea from '@/components/Check-Area.vue';
const areaId = ref('');
const handleAreaChange = (region) => {
console.log('选择地区:', region);
};
</script>