Segmented 分段控制器

Segmented 分段控制器

何时使用

  • 需要在少数几个选项之间切换时。
  • 选项较少且互斥时。

基础用法

选中:daily
<script setup lang="ts">
import { ref } from "vue";

const value = ref("daily");
const options = [
  { label: "日报", value: "daily" },
  { label: "周报", value: "weekly" },
  { label: "月报", value: "monthly" },
];
</script>

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

导入

import { Segmented } from "@reglow/reui";

Props

属性类型默认值说明
modelValuestring | number-选中值(v-model)
options(SegmentedOption | string | number)[][]选项列表,支持原始值或 { label, value } 对象
sizestring-尺寸
blockbooleanfalse是否撑满父容器宽度