shop-wx/doc/wot-design-uni/docs/component/segmented.md

Segmented 分段器

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

何时使用

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

基本用法

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

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

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

const current = ref('点赞')

大型分段器

通过设置 size 属性为 "large"，创建一个大型分段器。

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

小型分段器

通过设置 size 属性为 "small"，创建一个小型分段器。

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

带振动效果的分段器

通过设置 vibrate-short 属性为 true，使手机在切换选项时产生短暂振动。

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

禁用分段器

通过设置 disabled 属性为 true，禁用分段器。

<wd-segmented :options="list" v-model:value="current" disabled></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;
  }
}

在弹出框中使用

微信小程序端，在弹出框中使用本组件时，需要调用 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	-	-	0.1.23
disabled	是否禁用分段器	boolean	true / false	false	0.1.23
size	控件尺寸	string	large / middle / small	middle	0.1.23
options	数据集合	string[] / number[] / SegmentedOption[]	-	[]	0.1.23
vibrateShort	切换选项时是否振动	boolean	true / false	false	0.1.23

SegmentedOption

参数	说明	类型	可选值	默认值	最低版本
value	选中值	string / number	-	-	0.1.23
disabled	是否禁用	boolean	true / false	-	0.1.23
payload	更多数据	any	-	-	0.1.23

Events

事件名称	说明	参数	最低版本
change	选项切换时触发	SegmentedOption	0.1.23
click	选项点击时触发	SegmentedOption	1.2.20

Methods

对外暴露函数

事件名称	说明	参数	最低版本
updateActiveStyle	更新滑块偏移量，参数animation用于是否开启动画，默认开启	(animation: boolean) => void	-

Slots

name	说明	参数	最低版本
label	选项标签内容	{ option: SegmentedOption }	0.1.23

外部样式类

类名	说明	最低版本
customStyle	自定义样式	0.1.23
customClass	自定义样式类	0.1.23