Segment 分段器

介绍

用于展示多个分段选项，用户可在选项之间进行切换。

基础用法

通过 v-model 绑定选中的值，通过 options 属性配置选项数据。

<vd-segment v-model="state.value" :options="state.options" />

import { SegmentOption } from 'vital-design';

const state = reactive({
  value: '1',
  options: [
    { label: '测试1', value: '1' },
    { label: '测试2', value: '2' },
    { label: '测试3', value: '3' },
    { label: '测试4', value: '4' }
  ] as SegmentOption[],
});

按钮主题

通过 theme 属性可设置分段器按钮主题。

<vd-segment
  v-model="state.value"
  :options="state.options"
  theme="button"
/>

import { SegmentOption } from 'vital-design';

const state = reactive({
  value: '1',
  options: [
    { label: '测试1', value: '1' },
    { label: '测试2', value: '2' },
    { label: '测试3', value: '3' },
    { label: '测试4', value: '4' }
  ] as SegmentOption[],
});

设置圆角

通过 radius 属性可设置分段器圆角大小。

<vd-segment
  v-model="state.value"
  :options="state.options"
  theme="button"
  radius="99px"
/>

import { SegmentOption } from 'vital-design';

const state = reactive({
  value: '1',
  options: [
    { label: '测试1', value: '1' },
    { label: '测试2', value: '2' },
    { label: '测试3', value: '3' },
    { label: '测试4', value: '4' }
  ] as SegmentOption[],
});

自定义主题颜色

通过 theme-color 属性可设置分段器自定义主题颜色。

<vd-segment
  v-model="state.value"
  :options="state.options"
  theme="button"
  theme-color="#ee0a24"
/>

import { SegmentOption } from 'vital-design';

const state = reactive({
  value: '1',
  options: [
    { label: '测试1', value: '1' },
    { label: '测试2', value: '2' },
    { label: '测试3', value: '3' },
    { label: '测试4', value: '4' }
  ] as SegmentOption[],
});

自定义选项图标

通过 icon 属性可设置分段器自定义选项图标。

<vd-segment
  v-model="state.value"
  :options="state.options"
  theme="button"
/>

import { SegmentOption } from 'vital-design';

const state = reactive({
  value: 1,
  options: [
    { label: '测试1', value: 1, icon: 'home-fill' },
    { label: '测试2', value: 2, icon: 'star-fill' },
    { label: '测试3', value: 3, icon: 'cart-fill' },
    { label: '测试4', value: 4, icon: 'user-fill' }
  ] as SegmentOption[],
});

API

Props

参数	说明	类型	默认值
v-model	当前值	string | number	-
options	选项数据	SegmentOption[]	-
theme	主题样式	SegmentTheme	'default'
theme-color	主题颜色	string	-
radius	圆角大小	string | number	4
update-on-view	当组件出现在视图时，是否自动触发更新事件	boolean	true

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
change	选中改变时触发	SegmentOption

Slots

名称	说明
icon	图标
label	标签
option	选项