Segmented 分段器

分段器用于展示多个选项并允许用户选择其中单个选项。

何时使用

• 用于展示多个选项并允许用户选择其中单个选项；
• 当切换选中选项时，关联区域的内容会发生变化。

组件类型

基本用法

通过 options 设置选项列表，通过 v-model:value 绑定当前选中项。

<wd-segmented :options="list" v-model:value="current"></wd-segmented>

const list = ref<string[]>(['评论', '点赞', '贡献', '打赏'])

const current = ref('点赞')

组件状态

禁用

设置 disabled 属性禁用整个分段器。

<wd-segmented :options="list" v-model:value="current" disabled></wd-segmented>

组件变体

轮廓主题

通过 theme="outline" 切换为轮廓样式。

<wd-segmented :options="list" v-model:value="current" theme="outline"></wd-segmented>

组件样式

自定义渲染分段器标签

使用插槽 label 可以自定义渲染分段器的标签内容。

<wd-segmented :options="list" v-model:value="current" :vibrate-short="true">
  <template #label="{ option }">
    <view class="section-slot">
      <image style="border-radius: 50%; width: 32px; height: 32px" :src="option.payload.avatar" />
      <view class="name">{{ option.value }}</view>
    </view>
  </template>
</wd-segmented>

const list = ref([
  {
    value: '李雷',
    disabled: false,
    payload: {
      avatar: 'https://wot-ui.cn/assets/redpanda.jpg'
    }
  },
  {
    value: '韩梅梅',
    disabled: false,
    payload: {
      avatar: 'https://wot-ui.cn/assets/capybara.jpg'
    }
  }
])

.section {
  width: 100%;
  padding: 0 24rpx;
  box-sizing: border-box;
  &-slot {
    padding: 4px;
  }
}

特殊样式

带振动效果的分段器

设置 vibrate-short 后，切换选项时会触发短振动反馈。

<wd-segmented :options="list" v-model:value="current" :vibrate-short="true"></wd-segmented>

在弹出框中使用

微信小程序端，在弹出框中使用本组件时，需要调用 updateActiveStyle 方法更新分段器样式，参见常见问题。

<wd-button @click="handleClick">打开弹窗</wd-button>
<wd-popup v-model="showPopup" position="bottom" @after-enter="handlePopupShow" closable custom-style="height: 200px;padding: 0 24rpx;">
  <view class="title">在弹出框中使用</view>
  <wd-segmented :options="list" v-model:value="current" ref="segmentedRef"></wd-segmented>
</wd-popup>

const list = ref<string[]>(['评论', '点赞', '贡献', '打赏'])
const current = ref('点赞')

const segmentedRef = ref<SegmentedInstance>() // 获取分段器实例
const showPopup = ref(false) // 控制popup显示
/**
 * 点击按钮打开popup
 */
function handleClick() {
  showPopup.value = true
}
/**
 * popup打开后更新分段器样式
 */
function handlePopupShow() {
  segmentedRef.value?.updateActiveStyle()
}

.title {
  display: flex;
  font-size: 32rpx;
  align-items: center;
  justify-content: center;
  padding: 24rpx 0;
}

Attributes

参数	说明	类型	默认值
value / v-model:value	当前选中的值	string | number	-
disabled	是否禁用分段器	boolean	false
options	数据集合	string[] | number[] | SegmentedOption[]	[]
theme	分段器主题，可选值为 card、outline	string	'card'
vibrate-short	切换选项时是否触发短振动	boolean	false
custom-class	根节点自定义类名	string	''
custom-style	根节点自定义样式	string	''

SegmentedOption

参数	说明	类型	默认值
value	选项值	string | number	-
disabled	是否禁用该选项	boolean	false
payload	附加数据，可用于插槽渲染	any	-

Events

事件名称	说明	参数
change	选项切换时触发	SegmentedOption
click v1.2.20	选项点击时触发	SegmentedOption

Methods

方法名	说明	类型
updateActiveStyle	更新滑块偏移量，参数 animation 用于控制是否启用动画，默认开启	(animation?: boolean) => void

Slots

name	说明	参数
label	选项标签内容	{ option: SegmentedOption }

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-segmented-bg	$filled-content	组件背景色
--wot-segmented-border-width	$stroke-main	组件边框宽度
--wot-segmented-padding	$padding-super-tight	组件内边距
--wot-segmented-radius	$radius-main	组件圆角
--wot-segmented-item-color	$text-secondary	选项文字颜色
--wot-segmented-item-font-size	$typography-body-size-extra-large	选项文字字号
--wot-segmented-item-line-height	$typography-body-line--height-size-extra-large	选项文字行高
--wot-segmented-item-padding	$padding-ultra-tight $padding-loose	选项内边距
--wot-segmented-item-font-weight	$font-weight-regular	选项文字字重
--wot-segmented-item-font-weight-active	$font-weight-medium	选项激活字重
--wot-segmented-item-bg-active	$filled-oppo	选项激活背景色
--wot-segmented-item-color-active	$primary-6	选项激活文字颜色
--wot-segmented-item-disabled-opacity	$opacity-disabled	选项禁用透明度
--wot-segmented-outline-border-color	$border-main	轮廓模式边框颜色
--wot-segmented-outline-radius	$radius-zero	轮廓模式圆角
--wot-segmented-outline-bg	$filled-zero	轮廓模式背景色
--wot-segmented-outline-padding	$padding-zero	轮廓模式内边距
--wot-segmented-outline-item-padding	$padding-extra-tight $padding-extra-loose	轮廓模式选项内边距
--wot-segmented-outline-item-color	$text-secondary	轮廓模式选项文字颜色
--wot-segmented-outline-item-bg-active	$primary-6	轮廓模式选项激活背景色
--wot-segmented-outline-item-color-active	$text-white	轮廓模式选项激活文字颜色
--wot-segmented-outline-item-disabled-color	$text-disabled	轮廓模式选项禁用文字颜色
--wot-segmented-outline-item-bg-active-disabled	$filled-content	轮廓模式选项激活禁用背景色

源代码

文档

• 组件