t-select

Select 选择器

组件介绍

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

平台兼容

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

基础用法

<template>
  <view class="select-demo">
    <t-select v-model="selected" placeholder="请选择">
      <t-select-option value="1" label="选项1"></t-select-option>
      <t-select-option value="2" label="选项2"></t-select-option>
      <t-select-option value="3" label="选项3"></t-select-option>
    </t-select>
  </view>
</template>

<script setup>
const selected = ref('');
</script>

<style scoped>
.select-demo {
  padding: 40rpx;
}
</style>

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	""	清除按钮的样式	-

Events

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

Slots

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