分段控制器 Segmented
Arco 没有对应组件,保留 Element Plus 的实心选中块,使用主题字号与圆角。 属性用法见 Element Plus 文档。
尺寸与禁用选项
各尺寸保留实心选中块,选项对象可设置 disabled。
布局
block 撑满容器,direction="vertical" 保留 Element Plus 的纵向形态。
与 Arco 的差异
- 结构和交互保留 Element Plus,不映射为 Arco 的单选按钮组。
Arco 没有对应组件,保留 Element Plus 的实心选中块,使用主题字号与圆角。 属性用法见 Element Plus 文档。
各尺寸保留实心选中块,选项对象可设置 disabled。
<script setup lang="ts">
import { ref } from 'vue'
const value = ref('Daily')
const sizes = ['small', 'default', 'large'] as const
const options = ['Daily', 'Weekly', { label: 'Monthly', value: 'Monthly', disabled: true }]
</script>
<template>
<el-segmented v-for="size in sizes" :key="size" v-model="value" :size="size" :options="options" />
</template>block 撑满容器,direction="vertical" 保留 Element Plus 的纵向形态。
<script setup lang="ts">
import { ref } from 'vue'
const value = ref('Daily')
const options = ['Daily', 'Weekly', 'Monthly']
</script>
<template>
<el-segmented v-model="value" :options="options" block style="width: 100%" />
<el-segmented v-model="value" :options="options" direction="vertical" />
</template>