Skip to content
12:13

TnRegionPicker-地区选择器

RegionPicker 地区选择器一般用于选择选择地区的情况。

注意

由于地区数据量较大,一般建议在H5App中进行使用,在微信小程序中建议使用官方的地区选择器以减少包的大小。

组件位置

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地区选择器显示与隐藏Booleanfalsetrue
show-cancel显示取消按钮Booleantruefalse
cancel-text取消按钮的文本String取 消-
cancel-color取消按钮的字体颜色,支持图鸟内置的颜色值、hex、rgb、rgbaString--
show-confirm显示确认按钮Booleantruefalse
confirm-text确认按钮的文本String确 定-
confirm-color确认按钮的字体颜色,支持图鸟内置的颜色值、hex、rgb、rgbaString--
mask显示遮罩Booleanfalsetrue
z-index地区选择器的 zIndexNumber20075-

Event

事件名说明类型
change所选地区发生改变(value: string[], item: any) => void
confirm点击确认事件(value: string[], item: any) => void
cancel点击取消事件() => void
close弹框关闭事件() => void

Tuniao UI