Segmented 分段控制器 ​

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

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

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

基础用法 ​

设置 v-model 为选项值。

<template>
  <el-segmented v-model="value" :options="options" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Segmented as ElSegmented } from '@szhn/dh-design-pc'


const value = ref('Mon')
const options = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
</script>

方向用法 (2.8.7) ​

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

<template>
  <el-segmented v-model="value" :options="options" direction="vertical" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Segmented as ElSegmented } from '@szhn/dh-design-pc'


const value = ref('苹果')
const options = ['苹果', '樱桃', '葡萄', '橙子']
</script>

禁用状态 ​

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

<template>
  <div class="disabled-demo">
    <el-segmented v-model="value" :options="options" />
    <el-segmented v-model="value" :options="options" disabled />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Segmented as ElSegmented } from '@szhn/dh-design-pc'


const value = ref('周一')
const options = [
  { label: '周一', value: '周一' },
  { label: '周二', value: '周二', disabled: true },
  { label: '周三', value: '周三' },
  { label: '周四', value: '周四', disabled: true },
  { label: '周五', value: '周五' },
]
</script>

<style scoped>
.disabled-demo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

自定义选项别名 (2.9.8) ​

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

<template>
  <el-segmented v-model="value" :options="options" :props="props" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Segmented as ElSegmented } from '@szhn/dh-design-pc'


const value = ref('mon')
const options = [
  { name: '周一', id: 'mon' },
  { name: '周二', id: 'tue' },
  { name: '周三', id: 'wed' },
]
const props = { label: 'name', value: 'id' }
</script>

Block 分段选择器 ​

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

<template>
  <el-segmented v-model="value" :options="options" block />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Segmented as ElSegmented } from '@szhn/dh-design-pc'


const value = ref('日')
const options = ['日', '周', '月', '季', '年']
</script>

自定义内容 ​

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

<template>
  <el-segmented v-model="value" :options="options">
    <template #default="{ item }">
      <div class="option-card">
        <span class="emoji">{{ item.icon }}</span>
        <span>{{ item.label }}</span>
      </div>
    </template>
  </el-segmented>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Segmented as ElSegmented } from '@szhn/dh-design-pc'


const value = ref('schedule')
const options = [
  { label: '日程', value: 'schedule', icon: '📅' },
  { label: '消息', value: 'message', icon: '💬' },
  { label: '文件', value: 'files', icon: '📁' },
  { label: '告警', value: 'warning', icon: '🔔' },
]
</script>

<style scoped>
.option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
}

.emoji {
  font-size: 20px;
}
</style>

自定义样式 ​

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

<template>
  <div class="custom-style">
    <el-segmented v-model="value" :options="options" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Segmented as ElSegmented } from '@szhn/dh-design-pc'


const value = ref('特色餐饮')
const options = ['特色餐饮', '甜品饮品', '生鲜果蔬', '商超便利']
</script>

<style scoped>
.custom-style :deep(.el-segmented) {
  --el-segmented-item-selected-color: var(--el-text-color-primary);
  --el-segmented-item-selected-bg-color: #ffd100;
  --el-border-radius-base: 16px;
}
</style>

尺寸（DHdesign 扩展示例） ​

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

<template>
  <div class="size-demo">
    <el-segmented v-model="value" :options="options" size="large" />
    <el-segmented v-model="value" :options="options" />
    <el-segmented v-model="value" :options="options" size="small" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Segmented as ElSegmented } from '@szhn/dh-design-pc'


const value = ref('日')
const options = ['日', '周', '月', '年']
</script>

<style scoped>
.size-demo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

API ​

Segmented Attributes ​

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

Props ​

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

Segmented Events ​

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

Segmented Slots ​

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

类型声明 ​

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

更多信息见 Element Plus Segmented 文档。