TnRegionPicker-地区选择器
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 |