腾讯云智能体开发平台 Select 选择器

这篇说说腾讯云下拉选择组件,用于在预定义选项中选择值,支持自定义选项样式、图标和徽章,通过name、placeholder和options等属性实现基础用法与配置。 属性说明:必填属性包括name(表单字段名称)和options(选项列表),可选属性有placeholder、defaultValue、variant、size等。 SelectOption对象:每个选项需定义value和label,可选配icon、ba。

相关产品
腾讯云智能体开发平台 产品页,含版本规格、价格与购买入口。

一、组件功能

下拉选择组件,用于在预定义选项中选择值,支持自定义选项样式、图标和徽章。

二、基础用法

通过 name 与表单字段关联,placeholder 设置占位提示文本,options 定义下拉列表项,可为每个选项添加图标、徽章或描述信息。

Template 示例:

<Select name="city" placeholder="请选择城市" options={[ { value: "beijing", label: "北京" }, { value: "shanghai", label: "上海" }, { value: "guangzhou", label: "广州" } ]}/>

点击查看下拉选项。效果展示如下:

选择北京后,效果展示如下:

三、属性说明

属性名 类型 描述 默认值
name ★ string 表单字段名称 –
options ★ SelectOption[] 选项列表 –
onChangeAction ActionConfig 值变化时触发的动作 –
placeholder string 占位符文本 –
defaultValue string 默认选中值 –
variant "outline" | "solid" | "soft" | "ghost" 视觉样式 "outline"
size "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" 组件尺寸 "md"
pill boolean 是否为胶囊形状 false
block boolean 是否为块级元素 (100% 宽度) false
disabled boolean 是否禁用 false
clearable boolean 是否显示清空按钮 false

四、SelectOption 对象

属性名 类型 描述 默认值
value ★ string 选项值 –
label ★ string 选项显示文本 –
icon string 图标名称或 URL –
badge string 徽章文本 –
description string 描述文本 –
color string 选项颜色 –
disabled boolean 是否禁用 false
className string 自定义 CSS 类名 –

注意:★ 标记为必填属性。

赞 (0)
上一篇 4天前
下一篇 4天前