# t-picker-select

PickerSelect 下拉选择器

t-picker-select 组件介绍

t-picker-select 是选择列表组件，适用于移动端，支持单选和多选，支持搜索过滤功能。

t-picker-select 平台兼容

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

t-picker-select 基础用法

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

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card title="PickerSelect 选择列表"
				class="mb-15"
				sub-title="t-select的另一个版本，适用于移动端，t-select适用于PC端"></t-card>
		<t-section title="弹窗-远程搜索示例"
				   class="mb-15"></t-section>
		<t-picker-select v-model="val5"
						 valueKey="value"
						 labelKey="label"
						 :remote-method="search"
						 title="请选择菜单"
						 :remote="true"
						 class="r-10 mb-15">
		</t-picker-select>
		<t-text class="r-10 p-10 mb-15">值：{{val5}}</t-text>
		<t-button type="primary"
				  @click="test5">双向绑定测试</t-button>
		<t-picker-select v-model="val4"
						 valueKey="value"
						 labelKey="label"
						 :remote-method="search"
						 title="请选择菜单"
						 :remote="true"
						 class="r-10 mtb-15">
		</t-picker-select>
		<t-text class="r-10 p-10 mb-15">值：{{val4.join('-')}}</t-text>
		<t-button type="primary"
				  @click="test3">双向绑定测试</t-button>
		<t-col class="r-10 p-10 mb-15">
			<t-text class="slh-35">values:{{pickerSelectChange.getArray('values')?.join(',')}}</t-text>
			<t-text class="slh-35">labels:{{pickerSelectChange.getArray('labels')?.join(',')}}</t-text>
		</t-col>

		<t-section class="mb-15"
				   title="嵌入式-多选（v-model为数组则为多选）"></t-section>
		<t-picker-select v-model="val3"
						 :list="list"
						 :embeddable="true"
						 valueKey="value"
						 labelKey="label"
						 @change="checkChange"
						 class="r-10 mb-15">
		</t-picker-select>

		<t-text class="r-10 p-10 mb-15">值：{{val3.join('-')}}</t-text>
		<t-button type="primary"
				  @click="test">双向绑定测试</t-button>
		<t-section class="mb-15"
				   title="嵌入式-单选（v-model为字符串则为单选）"></t-section>
		<t-picker-select v-model="val2"
						 :list="list"
						 :embeddable="true"
						 valueKey="value"
						 labelKey="label"
						 @change="radioChange"
						 class="r-10 mb-15">
		</t-picker-select>
		<t-text class="r-10 p-10 mb-15">值：{{val2}}</t-text>
		<t-button type="primary"
				  @click="test2">双向绑定测试</t-button>
	</view>
</template>
<script setup>
	const val1 = ref<string>('food3');
	const val2 = ref<string>('food4');
	const val5 = ref<string>('food3');
	const val3 = ref<string[]>(['food4', 'food5', 'food6']);
	const val4 = ref<string[]>(['food4', 'food5']);
	const pickerSelectChange = ref<UTSJSONObject>({});

	const list = ref<UTSJSONObject[]>([
		{ value: 'food1', label: '披萨' },
		{ value: 'food2', label: '禁用', disabled: true },
		{ value: 'food3', label: '汉堡' },
		{ value: 'food4', label: '拉面' },
		{ value: 'food5', label: '饺子' },
		{ value: 'food11', label: '馄饨' },
		{ value: 'food6', label: '蛋糕' },
		{ value: 'food7', label: '冰淇淋' },
		{ value: 'food8', label: '巧克力' },
		{ value: 'food9', label: '薯条' },
		{ value: 'food10', label: '蛋挞' }
	]);

	const search = (e : string) : Promise<UTSJSONObject[]> => {
		return new Promise((
			resolve : (res : UTSJSONObject[]) => void
		) => {
			// 这里模拟uni.showLoading
			console.log('搜索中');
			setTimeout(() => {
				if (e == '') {
					// 这里模拟uni.hideLoading
					resolve(list.value);
				} else {
					const filteredList = list.value.filter((item : UTSJSONObject) => {
						return (item.getString('label') as string).toLocaleLowerCase().includes(e);
					});
					// 这里模拟uni.hideLoading
					resolve(filteredList);
				}
			}, 500);
		});
	};
	function test5() {
		val5.value = 'food6'
	}
	function test() {
		val3.value = ['food3', 'food4']
	}
	function test3() {
		val4.value = ['food6', 'food7']
	}
	function test2() {
		val2.value = 'food3'
	}
	const checkChange = (e : UTSJSONObject) => {
		console.log(e)
		pickerSelectChange.value = e;
	};

	const radioChange = (e : UTSJSONObject) => {
		console.log(JSON.stringify(e))
	};
</script>

t-picker-select Props

属性名	说明	类型	默认值
modelValue	双向绑定的值	string[]	[]
list	数据源	UTSJSONObject[]	[]
labelKey	显示字段名	string	-
valueKey	值字段名	string	-
singled	是否单选	boolean	true
title	标题	string	-
placeholder	占位文字	string	'请选择'
embeddable	是否嵌入页面	boolean	false
contentClass	内容区样式	string	-
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题	string	'normal'
size	组件尺寸	string	'mini'

t-picker-select Events

事件名	说明	回调参数
confirm	点击确认按钮时触发	value: string[]
change	值变化时触发	value: string[]
cancel	点击取消按钮时触发	-

t-picker-select Slots

插槽名	说明
default	默认插槽，自定义触发按钮