Select
Select mode, the most traditional and classic application form
Component reference
Referencing components in your project
js
import { RegionSelects, RegionFullSelects } from 'v-region'
Examples
Close city level, only select province
template
<RegionSelects language="en" :city="false" />
Please select
Close area level
template
<RegionSelects language="en" :area="false" />
Please select
Please select
template
<RegionSelects language="en" />
Please select
Please select
Please select
Use full 4-level administrative divisions
template
<RegionFullSelects language="en" />
Please select
Please select
Please select
Please select
Response Data
v-model values
{}
change event response results
{}
Initial value binding
Specify a set of region code values so that the component displays those regions by default
vue
<template>
<RegionFullSelects language="en" v-model="region" />
</template>
<script setup lang="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'
})
</script>
Please select
Please select
Please select
Please select
Clear/Reset
Specify an object with the value of undefined
at each level to clear it
js
region.value = {
province: undefined,
city: undefined,
area: undefined,
town: undefined
}
WARNING
Passing an undefined
value or an empty object {}
does not clear
Disabled state
template
<RegionFullSelects
v-model="values"
:disabled="true"
/>
Please select
Please select
Please select
Please select