Segmented 分段控制器

用于展示多个选项并允许用户选择其中单个选项。

import { createApp } from 'vue'
import { ElSegmented } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElSegmented)

基础用法

设置 v-model 为选项值。

方向用法

设置 direction="vertical" 来改变方向。

禁用状态

设置 disabled 属性来禁用一些选项。

自定义选项别名

当您的 options 格式不同于默认格式时，可通过 props 属性自定义 options。

Block 分段选择器

设置 block 为 true 以适应父元素的宽度。

自定义内容

通过默认插槽自定义每个选项的展示内容。

自定义样式

可以通过 CSS 变量调整选中项背景色、文本色与圆角等样式。

尺寸（DHdesign 扩展示例）

Segmented 同样支持 size 属性。该示例为 DHdesign 补充展示，方便在业务中直接查看三种尺寸效果。

API

Segmented Attributes

属性	说明	类型	默认值
model-value / v-model	绑定值	string / number / boolean	—
options	选项数据	Array	[]
props	字段映射	object	—
size	组件大小	large | default | small	''
block	撑满父元素	boolean	false
disabled	是否禁用	boolean	false
validate-event	是否触发表单校验	boolean	true
name	原生 name 属性	string	—
id	原生 id 属性	string	—
aria-label	原生 aria-label 属性	string	—
direction	方向	horizontal | vertical	horizontal

Props

字段	说明	类型	默认值
value	指定作为选项值的字段名	string	value
label	指定作为选项文案的字段名	string	label
disabled	指定作为禁用状态的字段名	string	disabled

Segmented Events

事件名	说明	参数
change	所选值变化时触发	(value)

Segmented Slots

插槽名	说明
default	自定义选项模板

类型声明

type Option = Record<string, any> | string | number | boolean

更多信息见 Element Plus Segmented 文档。