@aurouscia/vue-china-area-select/README.md

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

# vue3中国大陆地区省市区(2025)联动选择器
## 行为
- 选择一般的三级地区，将会出现三个select标签
- 选择直辖市、省直辖县（无所属地级）、直筒子市（地级但无下辖县），将会出现两个select标签
- 港澳台地区，只会出现一个select标签
- 事件触发时返回的数组长度等于select标签的数量

## 引入
```js
import ChinaAreaSelect from "@aurouscia/vue-china-area-select"
```

## 使用
```vue
<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`获取的一样

### 自定义样式
本组件不提供任何样式，需自定义样式请在外面套上容器，并编写**非scoped**`style`标签，例如：
```css
.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标签，没有用容器包起来。需自定义布局请在外面套上容器，并指定容器的布局，例如：
```css
.my-selects{
    display: flex;
    justify-content: space-between;
}
```
由于select标签的数量和长度不确定，建议使用`flex`布局，并设置`flex-wrap: wrap`

## 数据来源
[@aurouscia/china-areas](https://www.npmjs.com/package/@aurouscia/china-areas)  
该包也是我负责维护，如果行政区划有变动，请在gitee上提issue，我会及时更新

## 许可证
MIT