# t-select

Select 选择器

t-select 组件介绍

下拉选择器，支持配置是否可清除、占位符、文本类名、图标类名、遮罩类名、绑定值、选项数据、下拉菜单类名等。

t-select 平台兼容

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

t-select 基础用法

<template>
	<t-page class="p-15 f ov">
		<t-card title="提示"
				class="mb-15"
				type="error"
				sub-title="要注意层级控制，层级写在组件内部在安卓端不生效，请注意参考官方文档正确使用（https://doc.dcloud.net.cn/uni-app-x/css/z-index.html）"></t-card>
		<t-section title="多选"
				   class="mb-15"></t-section>
		<view :class="[`trm tpm tvg mb-15`]">
			<t-text>{{val.join('-')}}</t-text>
		</view>
		<t-select :class="`z-1000 ov`"
				  v-model="val"
				  size="large"
				  @change="selectchange">
			<t-select-option v-for="(item,index) in options"
							 :key="index"
							 :label="item.label"
							 :value="item.value"></t-select-option>
		</t-select>
		<t-button type="primary"
				  class="mt-15"
				  @click="test">双向绑定测试</t-button>
		<t-section title="单选"
				   class="mb-15"></t-section>
		<view :class="[`trm tpm tvg mb-15`]">
			<t-text>{{val1}}</t-text>
		</view>
		<t-select :class="`z-3 ov`"
				  v-model="val1"
				  size="large"
				  @change="selectchange1">
			<t-select-option v-for="(item,index) in options"
							 :key="index"
							 :label="item.label"
							 :value="item.value"></t-select-option>
		</t-select>
		<t-button type="primary"
				  class="mt-15"
				  @click="test1">双向绑定测试</t-button>
		<view class="h-250"></view>
		<tui-theme-switch></tui-theme-switch>
	</t-page>
</template>
<script setup>
	const val = ref<string[]>(['选项1', '选项3'])
	const val1 = ref<string>('选项3')
	type SelectOptions = {
		value : string
		label : string
		disabled ?: boolean
	}
	const options = ref<SelectOptions[]>([])
	function test() {
		val.value = ['选项4', '选项5']
	}
	function test1() {
		val1.value = '选项4'
	}
	function selectchange1(e : any) {
		console.log(e)
	}
	function selectchange(e : any) {
		console.log(e)
	}
	onReady(() => {
		//模拟接口请求
		setTimeout(() => {
			options.value = [{
				value: '选项1',
				label: '黄金糕'
			}, {
				value: '选项2',
				label: '双皮奶',
				disabled: true
			}, {
				value: '选项3',
				label: '蚵仔煎'
			}, {
				value: '选项4',
				label: '龙须面'
			}, {
				value: '选项5',
				label: '北京烤鸭'
			}, {
				value: '选项11',
				label: '北京烤鸭1'
			}, {
				value: '选项6',
				label: 'A选项6'
			}, {
				value: '选项7',
				label: 'A选项7'
			}, {
				value: '选项8',
				label: 'A选项8'
			}, {
				value: '选项9',
				label: 'A选项9'
			}, {
				value: '选项10',
				label: 'A选项10'
			}] as SelectOptions[]
		}, 300)
	})
</script>

t-select Props

属性名	类型	默认值	说明	可选值
size	String	"medium"	组件尺寸	large, medium, small, mini
type	String	""	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain
popoverAttrs	Object	{}	下拉选择框的属性配置	-
modelValue	Any	-	双向绑定的值	-
leftIcon	String	""	左侧图标	-
leftIconClass	String	""	左侧图标样式	-
rightIcon	String	"arrow-down"	右侧图标	-
rightIconClass	String	""	右侧图标样式	-
closeable	Boolean	true	是否显示删除按钮	true, false
textClass	String	""	请选择文字的样式	-
labelBoxClass	String	""	标签盒子的样式	-
labelClass	String	""	选项文字的样式	-
closeableClass	String	""	清除按钮的样式	-

t-select Events

事件名	说明	回调参数
change	值发生变化时触发	单选时返回字符，多选时返回字符串数组
open	展开时触发	-
close	折叠时触发	-

t-select Slots

插槽名	说明
default	内容插槽，用于放置t-select-option子组件