SegmentedControl 分段选择器

分段器由至少 2 个分段控件组成，用作不同视图的显示切换。

导入

import SegmentedControl from '@/components/nav/SegmentedControl.vue';

使用方法

基础用法

<template>
  <SegmentedControl :values="[ '选项1', '选项2', '选项3' ]" v-model:selectedIndex="selectedIndex" />
</template>

<script setup>
import { ref } from 'vue';
import SegmentedControl from '@/components/nav/SegmentedControl.vue';

const selectedIndex = ref(1);
</script>

自定义颜色

通过 tintColor 属性设置不同的主题颜色。

<template>
  <div class="demo-container">
    <SegmentedControl tintColor="success" :values="[ '选项1', '选项2', '选项3' ]" v-model:selectedIndex="selectedIndex2" />
    <SegmentedControl tintColor="warning" :values="[ '选项1', '选项2', '选项3' ]" v-model:selectedIndex="selectedIndex3" />
    <SegmentedControl tintColor="danger" :values="[ '选项1', '选项2', '选项3' ]" v-model:selectedIndex="selectedIndex4" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import SegmentedControl from '@/components/nav/SegmentedControl.vue';

const selectedIndex2 = ref(1);
const selectedIndex3 = ref(1);
const selectedIndex4 = ref(1);
</script>

朴素样式

通过 plain 属性设置只有外边框的朴素样式。

<template>
  <div class="demo-container">
    <SegmentedControl plain :values="[ '选项1', '选项2', '选项3' ]" v-model:selectedIndex="selectedIndex2" />
    <SegmentedControl plain tintColor="success" :values="[ '选项1', '选项2', '选项3' ]" v-model:selectedIndex="selectedIndex2" />
    <SegmentedControl plain tintColor="warning" :values="[ '选项1', '选项2', '选项3' ]" v-model:selectedIndex="selectedIndex3" />
    <SegmentedControl plain tintColor="danger" :values="[ '选项1', '选项2', '选项3' ]" v-model:selectedIndex="selectedIndex4" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import SegmentedControl from '@/components/nav/SegmentedControl.vue';

const selectedIndex2 = ref(1);
const selectedIndex3 = ref(1);
const selectedIndex4 = ref(1);
</script>

自定义圆角

通过 radius 属性设置圆角大小。

<template>
  <SegmentedControl :values="[ '选项1', '选项2', '选项3' ]" :radius="30" v-model:selectedIndex="selectedIndex5" />
</template>

<script setup>
import { ref } from 'vue';
import SegmentedControl from '@/components/nav/SegmentedControl.vue';

const selectedIndex5 = ref(1);
</script>

禁用

通过 touchable 属性设置禁用状态，用户不能点击更改。

<template>
  <SegmentedControl :values="[ '选项1', '选项2', '选项3' ]" :touchable="false" v-model:selectedIndex="selectedIndex6" />
</template>

<script setup>
import { ref } from 'vue';
import SegmentedControl from '@/components/nav/SegmentedControl.vue';

const selectedIndex6 = ref(1);
</script>

部分条目禁用

可以通过对象形式的 values 设置单个条目禁用。

<template>
  <SegmentedControl :values="[
    { label: '选项1' },
    { label: '选项2', disabled: true },
    { label: '选项3' },
    { label: '选项4' },
  ]" v-model:selectedIndex="selectedIndex7" />
</template>

<script setup>
import { ref } from 'vue';
import SegmentedControl from '@/components/nav/SegmentedControl.vue';

const selectedIndex7 = ref(1);
</script>

不占满宽度

通过 fill 属性设置控件不占满整个宽度。

<template>
  <div style="display: flex; justify-content: center;">
    <SegmentedControl :values="[ '选项1', '选项2', '选项3' ]" :radius="30" v-model:selectedIndex="selectedIndex5" :fill="false" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import SegmentedControl from '@/components/nav/SegmentedControl.vue';

const selectedIndex5 = ref(1);
</script>

API 参考

Props

名称	说明	类型	必填	默认值
touchable	是否可点击交互	boolean	否	true
plain	是否为简单外框模式	boolean	否	false
v-model:selectedIndex	选中的条目索引	number	否	0
fill	是否让条目自动填充整个宽度	boolean	否	true
tintColor	控制器的主颜色	string	否	'primary'
activeTextColor	条目激活时的文字颜色	string	否	'white'
radius	圆角大小	number	否	10
values	控件段按钮的标签	string[] | SegmentedControlCustomItem[]	否	-

SegmentedControlCustomItem

interface SegmentedControlCustomItem {
  label: string,
  disabled?: boolean,
  [index: string]: unknown;
}

Events

名称	说明	参数
update:selectedIndex	选中项变化事件	新选中的索引值number

主题变量

变量名	默认值	说明
SegmentedControlTintColor	primary	控制器的主颜色
SegmentedControlActiveTextColor	white	条目激活时的文字颜色
SegmentedControlBorderWidth	1	边框宽度
SegmentedControlPressedColor	pressed.notice	按下时的颜色
SegmentedControlPressedOpacity	0.4	按下时的透明度
SegmentedControlPlainBackgroundColor	background.switch	朴素模式下的背景色
SegmentedControlBackgroundColor	background.switch	默认背景色
SegmentedControlIndicatorColor	button	指示器颜色
SegmentedControlIndicatorPaddingVertical	4	指示器垂直内边距
SegmentedControlIndicatorPaddingHorizontal	8	指示器水平内边距
SegmentedControlItemPaddingVertical	8	条目垂直内边距
SegmentedControlItemPaddingHorizontal	16	条目水平内边距
SegmentedControlItemFontSize	26	条目字体大小