XSegmented — 分段选择器

轻量分段选择器，用于替代 el-radio-group。通过 v-model 绑定选中值，options 传入分段项（字符串或 { label, value } 对象）。

实时演示

当前选中：live

<script setup>
import { ref } from 'vue'
const seg = ref('live')
const options = [
  { label: '实时', value: 'live' },
  { label: '历史', value: 'history' },
  { label: '趋势', value: 'trend' },
]
</script>

<template>
  <XSegmented v-model="seg" :options="options" />
</template>

Props / Events

属性	类型	默认值	说明
modelValue（v-model）	string | number | boolean	''	当前选中值
options	array	—（必填）	分段项：字符串数组，或 { label, value } 对象数组

注意事项

• 不依赖任何 UI 库，纯 CSS 实现，零三方依赖。
• 选中样式使用应用级 CSS 变量 --surface-2/--border（带默认值 fallback），并在 .x-segmented__item.is-active 上高亮强调色。