- 请选择
- 北京市
- 天津市
- 河北省
- 山西省
- 内蒙古自治区
- 辽宁省
- 吉林省
- 黑龙江省
- 上海市
- 江苏省
- 浙江省
- 安徽省
- 福建省
- 江西省
- 山东省
- 河南省
- 湖北省
- 湖南省
- 广东省
- 广西壮族自治区
- 海南省
- 重庆市
- 四川省
- 贵州省
- 云南省
- 西藏自治区
- 陕西省
- 甘肃省
- 青海省
- 宁夏回族自治区
- 新疆维吾尔自治区
- 香港特别行政区
- 澳门特别行政区
- 台湾省
Select
下拉列表模式,最传统,经典的应用形式
组件引用
在项目中引入组件
js
import { RegionSelects, RegionFullSelects } from 'v-region'
实例
关闭城市级别,仅选择省份
template
<RegionSelects :city="false" />
关闭区县级别
template
<RegionSelects :area="false" />
3 级行政区划
template
<RegionSelects />
使用完整的 4 级行政区划
v-model value
Change event response results
{}
template
<RegionFullSelects :auto-select-first="false" />
初始值绑定
指定一套地区编码值,使组件默认显示该地区
template
<RegionFullSelects v-model="region" />
ts
import { ref } from 'vue'
import { RegionFullSelects } from 'v-region'
import type { RegionValues } from 'v-region'
const region = ref<RegionValues>({
province: '350000',
city: '350100',
area: '350104',
town: '350104008'
})
清空/重置
指定一个各级别的值为 undefined
的对象,即可清空
js
region.value = {
province: undefined,
city: undefined,
area: undefined,
town: undefined
}
注意
传递 undefined
值或是一个空对象 {}
,无法清空
禁用状态
禁用组件,使其无法进行交互
template
<RegionFullSelects
v-model="values"
:disabled="true"
/>