Country Select 国家选择
基于 虚拟化选择器 USelectV2 的国家/地区选择组件。选项数据来自 i18n-iso-countries(ISO 3166-1 alpha-2)。组件在加载选项逻辑时会 自动 registerLocale 注册包内全部语言 JSON,因此 getNames 能返回完整本地化国名;展示语言由 UConfigProvider 的 locale.name(如 zh-cn → zh)或 namesLocale 决定。绑定值为 alpha-2 大写(如 CN、US),v-model 与 change 会做统一大写规范化。默认 country-name-variant="short",界面为常用简称(如英文 China、United States);需要联合国式全称时设为 full。下拉与选中项默认不展示 alpha-2 后缀;若需附带 (MY) 等形式,请设置 show-alpha2-in-label。
单选
当前值:CN
多选
当前值:CN, US, JP
国名:简称与全称
通过 country-name-variant 配置下拉与输入框里展示 简称 还是 正式全称(默认 简称):
| 取值 | 说明 |
|---|---|
short | 默认。常用简称,对应 i18n-iso-countries 的 alias(如英文 China、United States)。 |
full | 正式全称,对应 official(如 People's Republic of China、United States of America)。 |
<!-- 默认 short,可省略 -->
<u-country-select v-model="code" />
<u-country-select v-model="code" country-name-variant="full" />国际化说明
- 占位符:默认使用全局语言包中的
uniboot.select.placeholder(与Select一致),也可通过placeholder覆盖。 - 国家/地区展示名:由
i18n-iso-countries的getNames提供,随UConfigProvider的locale.name(如zh-cn、en)自动映射到包内支持的语言码(如zh、en)。也可通过namesLocale强制指定展示用语言,而不跟随全局locale。默认使用country-name-variant="short"(库内 alias),如英文下为「China」「United States」;设为full时使用正式全称(official,如「People's Republic of China」)。 - 绑定值:始终为 ISO 3166-1 alpha-2 大写(如
DE),不因界面语言切换而改变。
国际化示例
用 UConfigProvider 切换中英文语言包后,同一 v-model(下例固定为 DE)对应的输入框与下拉文案会显示为「德国」或「Germany」等。为便于观察,示例将候选项限制为少数几个国家;语言切换按钮单独一行,下方为国家选择器。
绑定值为 ISO alpha-2:DE。切换语言后,输入框与下拉中的国名会变为对应语言(例如 DE 在中文为「德国」、英文为「Germany」),无需改 v-model。
API
属性
除下列说明外,其余常用能力(如 size、clearable、filterable、loading、collapse-tags、popper-class 等)与 Virtualized Select 虚拟化选择器 中 USelectV2 的同名属性一致,并透传给底层组件。
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 单选为 string,多选为 string[];均为 ISO 3166-1 alpha-2 | string / array | — |
| multiple | 是否多选 | boolean | false |
| include | 仅展示这些 alpha-2 码(非法项会被忽略) | array | — |
| exclude | 从全集(或 include 结果)中排除的 alpha-2 | array | — |
| namesLocale | 传给 i18n-iso-countries 的 getNames(lang);未设置时按全局 locale.name 解析 | string | — |
| country-name-variant | short 常用简称(alias);full 正式全称(official) | enum | short |
| show-alpha2-in-label | 为 true 时在标签中附带 (XX) 代码后缀,便于按代码过滤 | boolean | false |
| disabled | 是否禁用(未设置时遵循表单禁用注入) | boolean | — |
| clearable | 是否可清空 | boolean | true |
| filterable | 是否可搜索 | boolean | true |
| placeholder | 占位文本 | string | 取 uniboot.select.placeholder |
| fit-input-width | 下拉宽度是否与输入框一致 | boolean / number | false |
| height | 下拉面板高度 | number | 274 |
| item-height | 每项高度 | number | 34 |
| empty-values | 空值判定,参见 config-provider | array | — |
| value-on-clear | 清空时的返回值 | string / number / boolean / Function 等 | — |
事件
| 名称 | 说明 | 类型 |
|---|---|---|
| update:model-value | 选中值变化时触发 | Function |
| change | 值变化且已确认时触发 | 同上 |
| remove-tag | 多选移除标签时触发 | Function |
| visible-change | 下拉展开/收起 | Function |
| focus | 聚焦 | Function |
| blur | 失焦 | Function |
| clear | 点击清空时触发 | Function |
暴露
| 名称 | 说明 |
|---|---|
| selectRef | 内部 USelectV2 实例 |
| focus | 聚焦内部输入 |
| blur | 失焦内部输入 |
工具方法
| 名称 | 说明 |
|---|---|
| resolveCountryNamesLocale | 将 locale.name / 自定义语言解析为 getNames 所用语言码 |
| buildCountrySelectOptions | 根据语言与 include / exclude 生成选项列表(高级用法) |