Select 下拉选择

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

示例

vue

<template>
	<t-page title="选择框" class="p.30-ov-h.100%">
		<t-card class="mb.30" title="Select 选择框"
			sub-title="下拉菜单展示并选择内容。列表选项采用Canvas绘制,类似虚拟滚动,只会渲染屏幕可见的选项,不会因为创建大量DOM影响性能"></t-card>
		<t-section class="mb.30" title="样式"></t-section>
		<t-select class="mb.30-tdr-tdb" v-model="val" :options="options"></t-select>
		<t-section class="mb.30" title="样式"></t-section>
		<t-select class="w.200-tdr-tdb" dropDownClass="w.300" v-model="val1" :options="options"></t-select>
	</t-page>
</template>

<script setup>
	const val = ref('选项1')
	const val1 = ref('')
	const options = ref([{
		value: '选项1',
		label: '黄金糕'
	}, {
		value: '选项2',
		label: '双皮奶',
		disabled: true
	}, {
		value: '选项3',
		label: '蚵仔煎'
	}, {
		value: '选项4',
		label: '龙须面'
	}, {
		value: '选项5',
		label: '北京烤鸭'
	}])
</script>

支持平台

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

Props

名称	描述	类型	默认值
clearabled	是否可清除已选值	Boolean	true
placeholder	占位符文本	String	'请选择'
textClass	文本的类名	String	''
iconClass	图标的类名	String	''
maskClass	遮罩的类名	String	''
modelValue	绑定的值	String	''
options	选项数据	UTSJSONObject[]	[]
dropDownClass	下拉菜单的类名	String	''
type	组件类型	String	'p'

Events

名称	描述	参数
update:modelValue	当绑定值更新时触发	更新的值
change	当选项改变时触发	改变后的值
clear	当清除选项时触发	-

Select 下拉选择 ​

示例 ​

支持平台 ​

Props ​

Events ​

Select 下拉选择

示例

支持平台

Props

Events