# t-picker-city

PickerCity 城市选择器

t-picker-city 组件介绍

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

t-picker-city 平台兼容

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

t-picker-city 基础用法

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

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15"
				title="Picker-City 城市选择"
				sub-title="Canvas绘制,解决数据多卡慢的问题"></t-card>
		<t-section title="基础功能(嵌入模式)"
				   class="mb-15"></t-section>
		<view :class="[`mb-15 r-10 p-10 fc h-50 tvg`]">
			<text :class="[`ttc-`]">{{values.join('-')}}</text>
		</view>
		<view :class="[`mb-15 r-10 p-10 fc tvg h-50`]">
			<text :class="[`ttc-`]">{{val.join('-')}}</text>
		</view>
		<t-picker-city class="mb-15"
					   @change="onchange"
					   v-model="val"
					   :list="list"
					   :embeddable="true">
		</t-picker-city>
		<t-button type="primary"
				  @click="test">双向绑定测试</t-button>
		<t-section title="基础功能(弹窗模式)"
				   type="primary"
				   class="mb-15"></t-section>
		<t-picker-city class="mb-15"
					   :list="list"
					   v-model="val2"
					   @change="change">
		</t-picker-city>
		<t-button type="primary"
				  @click="test1">双向绑定测试</t-button>
	</view>
</template>
<script setup>
	import { TuiApi } from '@/api'
	const val = ref<string[]>([])
	const val2 = ref<string[]>([])
	const values = ref<string[]>([])
	const keys = ref<string[]>([])
	function test1() {
		val2.value = ['150000', '152500', '152522']
	}
	function test() {
		val.value = ['150000', '152500', '152522']
	}
	const list = ref<UTSJSONObject[]>([])
	function change(e : UTSJSONObject) {

	}
	function confirm(e : UTSJSONObject) {
		console.log(e)
		// keys.value = e.keys
		// values.value = e.values
	}
	function onchange(e : UTSJSONObject) {
		// keys.value = e.getArray<string>('keys') ?? []
		values.value = e.getArray<string>('values') ?? []
	}
	onLoad((_) => {
		TuiApi('citydata', {}, true).then(res => {
			list.value = res.getArray('data') as UTSJSONObject[]
		})
	})
	onUnload(() => {
		list.value = []
	})
</script>

t-picker-city 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'

t-picker-city Events

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

t-picker-city Slots

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