Select 下拉选择

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

示例

<template>
	<t-page title="选择框" class="p.30-ov-h.100%">
		<t-card class="mb.30" title="Select 选择框"
			sub-title="下拉菜单展示并选择内容。列表选项采用Canvas绘制,类似虚拟滚动,只会渲染屏幕可见的选项,不会因为创建大量DOM影响性能"></t-card>
		<t-row class='p.30-tdr-tdb-h.100-mb.30'>
			<t-text>key:</t-text>
			<t-text>{{val.join('-')}}</t-text>
		</t-row>
		<t-section class="mb.30" title="默认-多选-不显示右侧图标"></t-section>
		<t-row>
			<t-select class="mb.30-tdr-tdb-ptb.10-ba-ff" :multiple="true" v-model="(val as string[])"
				:clearabled="false" rightIcon="">
				<t-select-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value">
				</t-select-option>
			</t-select>
		</t-row>
		<t-button @click="test">修改数据</t-button>
		<t-section class="mb.30" title="主题-单选-前置图标"></t-section>
		<t-select class="mb.30-tdr-tdb" type="s" prefix-icon="map" prefix-class="c.red-s.45" :multiple="false"
			v-model="(val1 as string[])">
			<t-select-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value"
				:disabled="item.disabled">
			</t-select-option>
		</t-select>
		<t-section class="mb.30" title="不显示图标"></t-section>
		<t-select class="mb.30-tdr-tdb" type="e" :multiple="false" :show-icon="false">
			<t-select-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value">
			</t-select-option>
		</t-select>
		<t-section class="mb.30" title="方向(top)"></t-section>
		<t-select class="mb.30-tdr-tdb" type="e" :multiple="true" placement="top">
			<t-select-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value">
			</t-select-option>
		</t-select>
		<t-section class="mb.30" title="自定义颜色覆盖主题"></t-section>
		<t-select class="mb.30-tdr-tdb" type="e" :multiple="true" activeColor="blue">
			<t-select-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value">
			</t-select-option>
		</t-select>
		<t-section class="mb.30" title="插槽"></t-section>
		<t-select class="mb.30-tdr-tdb" type="s">
			<template v-slot:menu>
				<t-button class='ff'>插槽</t-button>
			</template>
			<t-select-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value">
			</t-select-option>
		</t-select>
		<t-col class="h.3000"></t-col>
	</t-page>
</template>

<script setup>
	const val = ref<string[]>(['选项1', '选项3'])
	const val1 = ref<string[]>(['选项1', '选项3'])
	type SelectOptions = {
		value : string
		label : string
		disabled ?: boolean
	}
	const options = ref<SelectOptions[]>([])
	function test() {
		val.value = ['选项4', '选项5']
	}
	function test1() {
		console.log('测试')
	}
	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: '选项6'
			}, {
				value: '选项7',
				label: '选项7'
			}, {
				value: '选项8',
				label: '选项8'
			}, {
				value: '选项9',
				label: '选项9'
			}, {
				value: '选项10',
				label: '选项10'
			}] as SelectOptions[]
		}, 300)
	})
</script>

支持平台

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

Props

名称	描述	类型	默认值
modelValue	绑定值	String[]	[]
clearabled	是否可清除	Boolean	true
showValueBackground	是否显示值背景	Boolean	true
multiple	是否多选	Boolean	false
placeholder	占位符	String	'请选择'
placeholderClass	占位符类名	String	''
placement	弹出位置	String	'bottom' 更多
zIndex	弹出层的z-index	Number	998
activeColor	自定义颜色覆盖主题	String	''
showIcon	是否显示图标	Boolean	true
clearIconClass	清除图标类名	String	''
textClass	文本类名	String	''
iconClass	图标类名	String	''
maskClass	遮罩层类名	String	''
dropDownClass	下拉列表类名	String	''
listItemClass	列表项类名	String	''
rightIcon	右侧图标	String	'arrow-down'
rightIconClass	右侧图标类名	String	''
prefixIcon	前置图标	String	''
prefixClass	前置图标类	String	''
border	是否显示选项下边框	Boolean	true

placement 配置表

名称	描述
bottom	显示在下方中间对齐
bottom-start	显示在下方左边对齐
bottom-end	显示在下方右边对齐
right	显示在右边中间对齐
right-start	显示在右边左边对齐
right-end	显示在右边右边对齐
left	显示在左边中间对齐
left-start	显示在左边左边对齐
left-end	显示在左边右边对齐
top	显示在上方中间对齐
top-start	显示在上方左边对齐
top-end	显示在上方右边对齐

SelectOption Props

名称	描述	类型	默认值
value	选项的值	String	''
label	选项的标签	String	''
disabled	是否禁用选项	Array as PropType<any | null>	() => false

Events

名称	描述	参数
update:modelValue	当绑定值更新时触发	value:string[]
change	当选项改变时触发	value:Map<string,string>
clear	当清除选项时触发	-