Tuniao UI Uniapp V3TnRegionPicker-地区选择器
RegionPicker 地区选择器一般用于选择选择地区的情况。
注意
由于地区数据量较大，一般建议在H5和App中进行使用，在微信小程序中建议使用官方的地区选择器以减少包的大小。
组件位置
typescript
import TnRegionPicker from '@tuniao/tnui-vue3-uniapp/components/region-picker/src/region-picker.vue'import TnRegionPicker from '@tuniao/tnui-vue3-uniapp/components/region-picker/src/region-picker.vue'typescript
import TnRegionPicker from '@/uni_modules/tuniaoui-vue3/components/region-picker/src/region-picker.vue'import TnRegionPicker from '@/uni_modules/tuniaoui-vue3/components/region-picker/src/region-picker.vue'平台差异说明
| App(vue) | H5 | 微信小程序 | 支付宝小程序 | ... |
|---|---|---|---|---|
| √ | √ | √ | √ | 适配中 |
基础使用
- 通过
v-model:open控制地区选择器的显示与隐藏 - 通过
v-model绑定当前选择的地区，格式为[省<code | name>, 市<code | name>, 区<code | name>, 街道<code | name>]- 如果只传递省市区的信息，则默认选中对应的第一个街道信息
- 如果只传递省市的信息，则默认选中对应的第一个区信息
- 如果只传递省的信息，则默认选中对应的第一个市信息
- 可以传递对应地区的
code或者名称
vue
<script lang="ts" setup>
import { ref } from 'vue'
const openRegionPicker = ref(false)
const regionValue = ref<string[]>([])
</script>
<template>
<TnRegionPicker v-model="regionValue" v-model:open="openRegionPicker" />
</template><script lang="ts" setup>
import { ref } from 'vue'
const openRegionPicker = ref(false)
const regionValue = ref<string[]>([])
</script>
<template>
<TnRegionPicker v-model="regionValue" v-model:open="openRegionPicker" />
</template>code 默认值
vue
<script lang="ts" setup>
import { ref } from 'vue'
const openRegionPicker = ref(false)
const regionValue = ref<string[]>(['44', '4401', '440113'])
</script>
<template>
<TnRegionPicker v-model="regionValue" v-model:open="openRegionPicker" />
</template><script lang="ts" setup>
import { ref } from 'vue'
const openRegionPicker = ref(false)
const regionValue = ref<string[]>(['44', '4401', '440113'])
</script>
<template>
<TnRegionPicker v-model="regionValue" v-model:open="openRegionPicker" />
</template>地区名称默认值
vue
<script lang="ts" setup>
import { ref } from 'vue'
const openRegionPicker = ref(false)
const regionValue = ref<string[]>(['广东省', '广州市', '番禺区'])
</script>
<template>
<TnRegionPicker v-model="regionValue" v-model:open="openRegionPicker" />
</template><script lang="ts" setup>
import { ref } from 'vue'
const openRegionPicker = ref(false)
const regionValue = ref<string[]>(['广东省', '广州市', '番禺区'])
</script>
<template>
<TnRegionPicker v-model="regionValue" v-model:open="openRegionPicker" />
</template>API
Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| model-value/v-model | 地区选择器绑定的值，具体格式看上面具体说明 | String[] | - | - |
| open/v-model:open | 地区选择器显示与隐藏 | Boolean | false | true |
| show-cancel | 显示取消按钮 | Boolean | true | false |
| cancel-text | 取消按钮的文本 | String | 取 消 | - |
| cancel-color | 取消按钮的字体颜色，支持图鸟内置的颜色值、hex、rgb、rgba | String | - | - |
| show-confirm | 显示确认按钮 | Boolean | true | false |
| confirm-text | 确认按钮的文本 | String | 确 定 | - |
| confirm-color | 确认按钮的字体颜色，支持图鸟内置的颜色值、hex、rgb、rgba | String | - | - |
| mask | 显示遮罩 | Boolean | false | true |
| z-index | 地区选择器的 zIndex | Number | 20075 | - |
Event
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 所选地区发生改变 | (value: string[], item: any) => void |
| confirm | 点击确认事件 | (value: string[], item: any) => void |
| cancel | 点击取消事件 | () => void |
| close | 弹框关闭事件 | () => void |