PickerCity 城市选择组件

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

html

<template>
	<t-page title="城市选择" class="p.30">
		<t-card class="mb.30" title="Picker-City 城市选择" sub-title="Canvas绘制更高性能 异步渲染不卡页面,自研滚动算法不会在滚动结束的时候回弹"></t-card>
		<t-col class="tdr-tdb-mb.30-tdp">
			<t-text class="slh.60">keys:{{keys.join('-')}}</t-text>
			<t-text class="slh.60">values:{{values.join('-')}}</t-text>
		</t-col>
		<t-section title="基础功能" class="mb.30"></t-section>
		<t-picker-city class="tdr" :value="val" :list="list" @change="change" @confirm="confirm">
			<t-button class="mr.15-w.100%">请选择您的城市</t-button>
		</t-picker-city>
	</t-page>
</template>
<script setup>
	import { TuiApi } from '@/api/uriApi.uts'
	import { TuiPickerCityChange } from '@/uni_modules/t-ui'
	const val = ref<string[]>(['130000', '130500', '130502'])
	const keys = ref<string[]>([])
	const values = ref<string[]>([])
	const list = ref<UTSJSONObject[]>([])
	function change(e : TuiPickerCityChange) {
		keys.value = e.keys
		values.value = e.values
	}
	function confirm(e : TuiPickerCityChange) {
		keys.value = e.keys
		values.value = e.values
	}
	onLoad((_) => {
		const datalist = uni.getStorageSync('citydata')
		if (`${datalist}` == '') {
			TuiApi('citydata').then(res => {
				list.value = res.getArray('data') as UTSJSONObject[]
				uni.setStorageSync('citydata', list.value)
			})
		} else {
			list.value = datalist as UTSJSONObject[]
		}
	})
</script>

Props

名称	描述	类型	默认值
mode	文本类型	String	'default'
format	文本格式化模式	String	'yyyy-mm-dd hh:MM:ss'
decimals	小数位数	Number	0
lines	显示行数	Number	-1
decimalPoint	小数点符号	String	'￥'
overflow	是否允许文本溢出	Boolean	true
patternsValue	自定义值模式数组	string[]	[]
patternsReg	自定义正则表达式模式数组	string[]	[]
patternsColor	模式匹配文本颜色	String	'red'
selectable	文本是否可选	Boolean	false
space	显示连续空格	String	'-'
decode	是否解码	Boolean	false
size	按钮尺寸	String	'medium'
type	组件场景	String	''
disabled	是否禁用	Boolean	false
stop	是否阻止事件冒泡	Boolean	false
hover	是否有鼠标悬停效果	Boolean	false
effect	按钮效果	String	''
value	绑定的值	string[]	[]
list	数据列表	UTSJSONObject[]	[]

Events

名称	描述	参数
confirm	当用户确认选择时触发	选中的城市信息
change	当城市选择发生变化时触发	选中的城市信息
cancel	当用户取消选择时触发	-
init	当组件初始化时触发	初始的城市信息

Methods

名称	描述	参数
reset	重置组件的值	value: TuiPickerCityChange
getValue	获取组件的值	-

PickerCity 城市选择组件 ​

支持平台 ​

示例 ​

Props ​

Events ​

Methods ​

PickerCity 城市选择组件

支持平台

示例

Props

Events

Methods