t-picker-city

PickerCity 城市选择器

组件介绍

t-picker-city 是自带全国城市数据的选择组件，支持省市区三级联动选择，可嵌入页面或弹窗模式使用。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

基础用法参考 demo/picker-city/picker-city.uvue，通过 v-model 绑定选中的城市。

<template>
  <t-picker-city 
    v-model="selectedCity"
    title="选择地区"
    placeholder="请选择省市区"
    @confirm="onConfirm">
  </t-picker-city>
</template>

<script setup>
const selectedCity = ref({
  ids: [],
  values: []
})

function onConfirm(result: any) {
  console.log('选中的城市：', result)
}
</script>

Props

属性名	说明	类型	默认值
modelValue	双向绑定的值	string[]	[]
list	城市数据源	UTSJSONObject[]	-
title	标题	string	'地区'
titleClass	标题样式	string	-
labelClass	副标题样式	string	-
placeholder	占位文字	string	'请选择'
embeddable	是否嵌入页面	boolean	false
border	是否显示边框	boolean	false
popupAttrs	t-popup 的属性	UTSJSONObject	-
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题	string	'normal'
size	组件尺寸	string	'mini'

Events

事件名	说明	回调参数
confirm	点击确认按钮时触发	{ ids, values }
change	值变化时触发	{ ids, values }
cancel	点击取消按钮时触发	-

Slots

插槽名	说明
button	自定义触发按钮