分段选择 AsamSegmented

使用场景

在少量互斥选项间切换视图或设置。options 支持原始字符串/数值/布尔值以及带 label、value、disabled 的记录。

选项与方向

change 更新当前值。direction 控制水平或垂直排列，block 填满可用宽度。options 内的 disabled 仅禁用该选项；组件 disabled 禁用整组输入，保留当前选中回显。

选项与方向

vue

<template>
	<div class="example">
		<AsamSegmented
			v-model="value"
			v-bind="{ options: options, block: true }"
			@change="event = String($event)"
		/>
		<AsamSegmented v-model="value" :options="options" direction="vertical" />
		<AsamSegmented :model-value="value" :options="options" disabled aria-label="禁用分段" />
		<output>值：{{ value }}；{{ event }}</output>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamSegmentedBasicExample' });
import { ref } from 'vue';
import { AsamSegmented } from '@asam-ui/ui';
const value = ref('day');
const options = [
	{ label: '日', value: 'day' },
	{ label: '周', value: 'week' },
	{ label: '月', value: 'month', disabled: true }
];
const event = ref('尚未更改');
</script>

<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
	min-width: 0;
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-sm, 8px);
}

.density-grid {
	display: grid;
	gap: var(--asam-space-md, 16px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

section {
	display: grid;
	gap: var(--asam-space-sm, 8px);
	min-width: 0;
}

output {
	overflow-wrap: anywhere;
	color: var(--asam-color-text-secondary);
}
</style>

vue

<template>
	<div class="example">
		<AsamSegmented
			v-model="value"
			v-bind="{ options: options, block: true }"
			@change="event = String($event)"
		/>
		<AsamSegmented v-model="value" :options="options" direction="vertical" />
		<AsamSegmented :model-value="value" :options="options" disabled aria-label="禁用分段" />
		<output>值：{{ value }}；{{ event }}</output>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamSegmentedBasicExample' });
import { ref } from 'vue';
import { AsamSegmented } from '@asam-ui/ui';
const value = ref('day');
const options = [
	{ label: '日', value: 'day' },
	{ label: '周', value: 'week' },
	{ label: '月', value: 'month', disabled: true }
];
const event = ref('尚未更改');
</script>

<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
	min-width: 0;
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-sm, 8px);
}

.density-grid {
	display: grid;
	gap: var(--asam-space-md, 16px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

section {
	display: grid;
	gap: var(--asam-space-sm, 8px);
	min-width: 0;
}

output {
	overflow-wrap: anywhere;
	color: var(--asam-color-text-secondary);
}
</style>

自定义选项与字段

props 映射自定义字段；default 插槽收到 item，保留整条原始选项数据。

自定义选项与字段

vue

<template>
	<div class="example">
		<AsamSegmented
			v-model="value"
			:options="options"
			:props="{ label: 'name', value: 'id', disabled: 'locked' }"
		>
			<template #default="{ item }">
				{{ typeof item === 'object' ? item.name : item }}视图
			</template>
		</AsamSegmented>
		<output>值：{{ value }}</output>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamSegmentedSlotsExample' });
import { ref } from 'vue';
import { AsamSegmented } from '@asam-ui/ui';
const value = ref('list');
const options = [
	{ id: 'list', name: '列表', locked: false },
	{ id: 'grid', name: '网格', locked: false }
];
</script>

<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
	min-width: 0;
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-sm, 8px);
}

.density-grid {
	display: grid;
	gap: var(--asam-space-md, 16px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

section {
	display: grid;
	gap: var(--asam-space-sm, 8px);
	min-width: 0;
}

output {
	overflow-wrap: anywhere;
	color: var(--asam-color-text-secondary);
}
</style>

vue

<template>
	<div class="example">
		<AsamSegmented
			v-model="value"
			:options="options"
			:props="{ label: 'name', value: 'id', disabled: 'locked' }"
		>
			<template #default="{ item }">
				{{ typeof item === 'object' ? item.name : item }}视图
			</template>
		</AsamSegmented>
		<output>值：{{ value }}</output>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamSegmentedSlotsExample' });
import { ref } from 'vue';
import { AsamSegmented } from '@asam-ui/ui';
const value = ref('list');
const options = [
	{ id: 'list', name: '列表', locked: false },
	{ id: 'grid', name: '网格', locked: false }
];
</script>

<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
	min-width: 0;
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-sm, 8px);
}

.density-grid {
	display: grid;
	gap: var(--asam-space-md, 16px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

section {
	display: grid;
	gap: var(--asam-space-sm, 8px);
	min-width: 0;
}

output {
	overflow-wrap: anywhere;
	color: var(--asam-color-text-secondary);
}
</style>

四档尺寸与上下文继承

四个实例分别显式使用 large、big、default、small。下面省略 size 的实例随 ConfigProvider 响应切换；显式 size 覆盖祖先。面板本身没有 size 契约的入口不附加虚构尺寸属性。

四档尺寸与上下文继承

vue

<template>
	<div class="example">
		<div class="density-grid">
			<section data-density="large">
				<strong> large </strong>
				<AsamSegmented size="large" model-value="日" :options="['日', '周', '月']" />
			</section>
			<section data-density="big">
				<strong> big </strong>
				<AsamSegmented size="big" model-value="日" :options="['日', '周', '月']" />
			</section>
			<section data-density="default">
				<strong> default </strong>
				<AsamSegmented size="default" model-value="日" :options="['日', '周', '月']" />
			</section>
			<section data-density="small">
				<strong> small </strong>
				<AsamSegmented size="small" model-value="日" :options="['日', '周', '月']" />
			</section>
		</div>
		<AsamConfigProvider :size="density">
			<section data-density="inherited">
				<AsamSegmented model-value="日" :options="['日', '周', '月']" />
			</section>
		</AsamConfigProvider>
		<div class="row">
			<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
			<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
		</div>
		<output>配置提供器：{{ density }}</output>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamSegmentedSizesExample' });
import { ref } from 'vue';
import { AsamSegmented, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const density = ref<AsamControlSize>('big');
</script>

<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
	min-width: 0;
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-sm, 8px);
}

.density-grid {
	display: grid;
	gap: var(--asam-space-md, 16px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

section {
	display: grid;
	gap: var(--asam-space-sm, 8px);
	min-width: 0;
}

output {
	overflow-wrap: anywhere;
	color: var(--asam-color-text-secondary);
}
</style>

vue

<template>
	<div class="example">
		<div class="density-grid">
			<section data-density="large">
				<strong> large </strong>
				<AsamSegmented size="large" model-value="日" :options="['日', '周', '月']" />
			</section>
			<section data-density="big">
				<strong> big </strong>
				<AsamSegmented size="big" model-value="日" :options="['日', '周', '月']" />
			</section>
			<section data-density="default">
				<strong> default </strong>
				<AsamSegmented size="default" model-value="日" :options="['日', '周', '月']" />
			</section>
			<section data-density="small">
				<strong> small </strong>
				<AsamSegmented size="small" model-value="日" :options="['日', '周', '月']" />
			</section>
		</div>
		<AsamConfigProvider :size="density">
			<section data-density="inherited">
				<AsamSegmented model-value="日" :options="['日', '周', '月']" />
			</section>
		</AsamConfigProvider>
		<div class="row">
			<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
			<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
		</div>
		<output>配置提供器：{{ density }}</output>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamSegmentedSizesExample' });
import { ref } from 'vue';
import { AsamSegmented, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
const density = ref('big');
</script>

<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
	min-width: 0;
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-sm, 8px);
}

.density-grid {
	display: grid;
	gap: var(--asam-space-md, 16px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

section {
	display: grid;
	gap: var(--asam-space-sm, 8px);
	min-width: 0;
}

output {
	overflow-wrap: anywhere;
	color: var(--asam-color-text-secondary);
}
</style>

ASAM 扩展与迁移

ASAM 扩展为四档密度和祖先继承。选项 record 不需要 ASAM 数据选择器的 raw 字段；这里是分段控件自己的原始 options 契约。没有公开 expose，业务操作监听 change。

分段控件主题变量

使用 --el-segmented-item-selected-color、--el-segmented-item-selected-bg-color 与 --el-border-radius-base 配置选中颜色及圆角，设计值来自 ASAM tokens。样式改变不影响键盘、禁用和模型提交。

分段控件主题变量

vue

<template>
	<div class="example">
		<AsamSegmented v-model="value" class="segmented-theme" :options="options" />
		<output>视图：{{ value }}</output>
	</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamSegmented } from '@asam-ui/ui';
const value = ref('list');
const options = [
	{ label: '列表', value: 'list' },
	{ label: '网格', value: 'grid' },
	{ label: '停用', value: 'disabled', disabled: true }
];
defineOptions({ name: 'AsamSegmentedStyleDemo' });
</script>
<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
}

.segmented-theme {
	--el-segmented-item-selected-color: var(--asam-color-text-primary, #18212b);
	--el-segmented-item-selected-bg-color: var(--asam-color-primary-light, #cbdce7);
	--el-border-radius-base: var(--asam-radius-large, 16px);
}
</style>

vue

<template>
	<div class="example">
		<AsamSegmented v-model="value" class="segmented-theme" :options="options" />
		<output>视图：{{ value }}</output>
	</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamSegmented } from '@asam-ui/ui';
const value = ref('list');
const options = [
	{ label: '列表', value: 'list' },
	{ label: '网格', value: 'grid' },
	{ label: '停用', value: 'disabled', disabled: true }
];
defineOptions({ name: 'AsamSegmentedStyleDemo' });
</script>
<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
}

.segmented-theme {
	--el-segmented-item-selected-color: var(--asam-color-text-primary, #18212b);
	--el-segmented-item-selected-bg-color: var(--asam-color-primary-light, #cbdce7);
	--el-border-radius-base: var(--asam-radius-large, 16px);
}
</style>

API 阅读方式

下方 Props、Events、Slots、Exposes 按当前实际公开类型与运行默认值生成。组合属性按分支生效，不能任意混搭值模式。标为“未知 / 未声明”的默认值不代表 false 或空值。源码区域提供对应语言的独立 Demo.vue，可直接复制或下载；本地辅助组件、数据和素材已内联到当前文件。

API

属性 `AsamSegmentedProps`

属性名	说明	类型	默认值
`ariaLabel`	原生 aria-label属性	`string \| undefined`	—
`id`	原生输入标识。	`string \| undefined`	—
`disabled`	分段控制器是否禁用。	`boolean \| undefined`	`undefined`
`props`	配置选项，具体看下表	`(AsamSegmentedProps<T>)["props"]`	`工厂函数（每个实例创建）`
`direction`	显示方向	`enum"horizontal" \| "vertical"`完整类型：`"horizontal" \| "vertical" \| undefined`	`"horizontal"`
`name`	原生 name 属性	`string \| undefined`	—
`modelValue`	选中项绑定值	`string \| number \| boolean \| undefined`	`undefined`
`options`	分段选项。	`T[] \| undefined`	`工厂函数（每个实例创建）`
`validateEvent`	是否触发表单验证	`boolean \| undefined`	`true`
`block`	适应父内容宽度。	`boolean \| undefined`	`false`
`size`	组件大小	`enum"large" \| "big" \| "default" \| "small"`完整类型：`AsamControlSize \| undefined`	`undefined`

事件 `AsamSegmentedEmits`

属性名	说明	类型	默认值
`update:modelValue`	—	`[value: string \| number \| boolean]`	—
`change`	—	`[value: string \| number \| boolean]`	—

插槽 `AsamSegmentedSlots`

属性名	说明	类型	默认值
`default`	—	`((scope: { item: AsamSegmentedOption; }) => unknown) \| undefined`	—

实例方法与状态 `AsamSegmentedExpose`

参数与事件补充说明

参数与事件说明

`ariaLabel`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`id`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`disabled`

必填：否；声明来源：上游声明。

disabled 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

undefined（已安装运行时；已安装组件）

固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）

`props`

必填：否；声明来源：上游声明。

props 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

props.label: string | undefined — 上游声明
指定节点标签为节点对象的某个属性值
固定上游文档默认：label（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
props.value: string | undefined — 上游声明
指定选项的值为选项对象的某个属性值
固定上游文档默认：value（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
props.disabled: string | undefined — 上游声明
指定选项的禁用为选项对象的某个属性值
固定上游文档默认：disabled（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

默认值与来源

工厂函数（每个实例创建）（实例工厂；已安装组件）

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码工厂（未执行）：() => defaultProps（2.14.7；源码事实，未作为 ASAM 运行实测）

`direction`

必填：否；声明来源：上游声明。

direction 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："horizontal" / "vertical"

默认值与来源

"horizontal"（已安装运行时；已安装组件）

固定上游文档默认：horizontal（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：'horizontal'（2.14.7；源码事实，未作为 ASAM 运行实测）

`name`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`modelValue`

必填：否；声明来源：上游声明。

modelValue 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

undefined（已安装运行时；已安装组件）

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）

`options`

必填：否；声明来源：上游声明。

默认值与来源

工厂函数（每个实例创建）（实例工厂；已安装组件）

固定上游文档默认：[]（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码工厂（未执行）：() => []（2.14.7；源码事实，未作为 ASAM 运行实测）

`validateEvent`

必填：否；声明来源：上游声明。

validateEvent 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

true（已安装运行时；已安装组件）

固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）

`block`

必填：否；声明来源：上游声明。

block 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

false（隐式 Boolean 默认；已安装组件）

固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`size`

必填：否；声明来源：ASAM 声明。

size 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："large" / "big" / "default" / "small"

默认值与来源

undefined（源码表达式；ASAM 声明）

AsamSegmentedProps 公开类型视图

import type { AsamSegmentedProps, AsamSegmentedOption, AsamControlSize } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamSegmentedProps
type PublicContract<T extends AsamSegmentedOption = AsamSegmentedOption> = {
	"ariaLabel"?: string | undefined;
	"id"?: string | undefined;
	"disabled"?: boolean | undefined;
	"props"?: (AsamSegmentedProps<T>)["props"];
	"direction"?: "horizontal" | "vertical" | undefined;
	"name"?: string | undefined;
	"modelValue"?: string | number | boolean | undefined;
	"options"?: T[] | undefined;
	"validateEvent"?: boolean | undefined;
	"block"?: boolean | undefined;
	"size"?: AsamControlSize | undefined;
};

参数与事件说明

`update:modelValue`

必填：是；声明来源：ASAM 声明。

`change`

必填：是；声明来源：ASAM 声明。

AsamSegmentedEmits 公开类型视图

import type { AsamSegmentedEmits } from '@asam-ui/ui';

// AsamSegmentedEmits
type PublicContract = {
	"update:modelValue": [value: string | number | boolean];
	"change": [value: string | number | boolean];
};

参数与事件说明

`default`

必填：否；声明来源：ASAM 声明。

default 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(scope: { item: AsamSegmentedOption; }): unknown

AsamSegmentedSlots 公开类型视图

import type { AsamSegmentedSlots, AsamSegmentedOption } from '@asam-ui/ui';

// AsamSegmentedSlots
type PublicContract = {
	"default"?: ((scope: { item: AsamSegmentedOption; }) => unknown) | undefined;
};

AsamSegmentedExpose 公开类型视图

import type { AsamSegmentedExpose } from '@asam-ui/ui';

// AsamSegmentedExpose
type PublicContract = {
	[key: string]: never;
};

分段选择 AsamSegmented

使用场景 ​

选项与方向 ​

选项与方向

自定义选项与字段 ​

自定义选项与字段

四档尺寸与上下文继承 ​

四档尺寸与上下文继承

ASAM 扩展与迁移 ​

分段控件主题变量 ​

分段控件主题变量

API 阅读方式 ​

API

属性 AsamSegmentedProps

事件 AsamSegmentedEmits

插槽 AsamSegmentedSlots

实例方法与状态 AsamSegmentedExpose

关联组件

参数与事件说明

ariaLabel

默认值与来源

id

默认值与来源

disabled

默认值与来源

props

默认值与来源

direction

默认值与来源

name

默认值与来源

modelValue

默认值与来源

options

默认值与来源

validateEvent

默认值与来源

block

默认值与来源

size

默认值与来源

参数与事件说明

update:modelValue

change

参数与事件说明

default

使用场景

选项与方向

自定义选项与字段

四档尺寸与上下文继承

ASAM 扩展与迁移

分段控件主题变量

API 阅读方式

属性 `AsamSegmentedProps`

事件 `AsamSegmentedEmits`

插槽 `AsamSegmentedSlots`

实例方法与状态 `AsamSegmentedExpose`

`ariaLabel`

`id`

`disabled`

`props`

`direction`

`name`

`modelValue`

`options`

`validateEvent`

`block`

`size`

`update:modelValue`

`change`

`default`