vue3中国大陆地区省市区(2025)联动选择器

行为

• 选择一般的三级地区，将会出现三个select标签
• 选择直辖市、省直辖县（无所属地级）、直筒子市（地级但无下辖县），将会出现两个select标签
• 港澳台地区，只会出现一个select标签
• 事件触发时返回的数组长度等于select标签的数量

引入

import ChinaAreaSelect from "@aurouscia/vue-china-area-select"

使用

<div class="my-selects">
    <ChinaAreaSelect
        :names-init="['湖北省','武汉市','江岸区']"
        :code-init="'000000'"
        @change="changeHandler"
    ></ChinaAreaSelect>
</div>

Props

• :names-init 初始化选择的省市区名称
• :code-init 初始化选择的省市区六位代码（优先级高于names-init）
• :emit-on-inited 初始化时是否emit一次？（默认为false）

Emits

• @change 选择器值改变时触发的事件
  • 返回值为当前选中的省市区名称数组names（长度可能为1、2、3）和六位代码code，以及当前状态是否正确即valid布尔值（有可选项时必须选择一个）
  • 初始化时默认不会触发，但使用expose重新初始化时若改变了当前值则会触发

Expose

• initByProps()使用组件当前的props重新初始化选择器（覆盖当前的值）
• getEmitData()获取当前数据，和@change获取的一样

自定义样式

本组件不提供任何样式，需自定义样式请在外面套上容器，并编写非scopedstyle标签，例如：

.my-selects select{
    font-size: 18px;
    height: 26px;
}
.my-selects select.cas_not_selected{
    border: 2px solid red;
}

其中cas_not_selected为未选择选项的select的类名，需重点强调，提示用户选择该项

自定义布局

本组件内是1-3个select标签，没有用容器包起来。需自定义布局请在外面套上容器，并指定容器的布局，例如：

.my-selects{
    display: flex;
    justify-content: space-between;
}

由于select标签的数量和长度不确定，建议使用flex布局，并设置flex-wrap: wrap

数据来源

@aurouscia/china-areas
该包也是我负责维护，如果行政区划有变动，请在gitee上提issue，我会及时更新

许可证

MIT