PickerCustom (自定义选择器容器)

城市，日期这些组件是是自带数据的选择器容器做了，PickerCustom的数据源是自定义的

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例代码

<template>
	<t-page main-class="p-30">
		<t-card main-class="mb-30" title="Picker 选择容器" sub-title="Canvas绘制更快渲染速度,自研滚动算法不会在滚动结束的时候回弹"></t-card>
		<t-card main-class="mb-30" title="提示" sub-title="embeddable控制是弹窗显示还是嵌入到页面显示"></t-card>
		<t-section title='基础使用' main-class="mb-30"></t-section>
		<t-picker-custom class="tdr mb-30" :value="pickerIds" :list="list" @change="pickerchange" :embeddable="true">
		</t-picker-custom>
		<t-section title='选中的值' main-class="mb-30"></t-section>
		<t-col main-class="tdr tdb mb-30 tdp">
			<t-text main-class="mb-30">选中的ID：{{pickerIds.join(',')}}(方便数据库存储)</t-text>
			<t-text>选中Value：{{pickerValue.join('-')}}</t-text>
		</t-col>
		<t-section title='数据关联用法见日期选择和城市选择组件' main-class="mb-30"></t-section>
		<t-col main-class="tdr tdb mb-30 tdp">
			<t-button type="p" main-class="mb-30 " path="/pagesA/form/datetime-picker/datetime-picker">日期选择组件</t-button>
			<t-button type='s' path="/pagesA/form/pca-picker/pca-picker">城市选择组件</t-button>
		</t-col>
	</t-page>
</template>
<script setup>
	const pickerIns = ref<TPickerComponentPublicInstance | null>(null)
	const direction = ref<string>('vertical')
	const list = ref<UTSJSONObject[][]>([
		[

			{ "id": "1", "title": "北京大学文学院" },
			{ "id": "2", "title": "清华大学历史学院" },
			{ "id": "3", "title": "复旦大学哲学院" },
			{ "id": "4", "title": "中国人民大学法学院" },
			{ "id": "5", "title": "上海交通大学经济学院" },
			{ "id": "6", "title": "浙江大学管理学院" },
			{ "id": "7", "title": "南京大学教育学院" },
			{ "id": "8", "title": "北京外国语大学外国语学院" },
			{ "id": "9", "title": "武汉大学数学科学学院" },
			{ "id": "10", "title": "华中科技大学物理学院" },
			{ "id": "11", "title": "西安交通大学化学学院" },
			{ "id": "12", "title": "四川大学生命科学学院" },
			{ "id": "13", "title": "电子科技大学计算机科学与技术学院" },
			{ "id": "14", "title": "北京邮电大学信息科学与技术学院" },
			{ "id": "15", "title": "南京师范大学地理科学学院" },
			{ "id": "16", "title": "同济大学环境学院" },
			{ "id": "17", "title": "北京师范大学心理学院" },
			{ "id": "18", "title": "华东师范大学体育学院" },
			{ "id": "19", "title": "中央美术学院美术学院" },
			{ "id": "20", "title": "中央音乐学院音乐学院" }

		]
	])
	const pickerIds = ref<string[]>(['3'])
	const pickerValue = ref<string[]>([])
	function pickerchange(e : UTSJSONObject) {
		pickerValue.value = e.getArray<string>('values')!
		pickerIds.value = e.getArray<string>('ids')!
	}
</script>

属性

名称	类型	默认值	说明	可选值
size	String	mini	组件尺寸	large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
type	String	""	组件类型	info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabled	Boolean	false	组件是否禁用	false, true
stop	Boolean	false	是否阻止事件冒泡（Tui统一写法处理事件冒泡）	false, true
hover	Boolean	true	是否有点击效果	false, true
path	String	""	点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。	-
mainClass	String	""	组件根节点的样式	-
nativeClass	String	""	组件根节点原生样式	-
effect	String	"normal"	组件显示主题	normal(正常), dark(深色), light(浅色), plain(镂空)
modelValue	any	``	双向绑定的值
titleClass	String	``	标题文本样式
embeddable	Boolean	false	是否嵌入页面
labelClass	String	``	标签样式
list	any	``	数据源
title	String	``	标题文本

事件

名称	返回参数	说明
change	(e:UTSJSONObject)	值化生变化时触发，一般嵌入模式的时候使用，弹窗模式时无效
cancel	-	点击取消时触发
confirm	(e:UTSJSONObject)	点确认后触发

方法

名称	参数	返回值	说明
show	-	-	打长、关闭 选择器

插槽

名称	返回值	说明
name	-