ui-form-switch-control 分段控制器组件

版本：v2.3.11

分段选择控制器，以标签页形式展示多个选项供用户切换选择，类似 iOS 的 Segmented Control

基本使用

<template>
  <view class="switch-control-demo">
    <ui-form-switch-control
      v-model="activeValue"
      :options="options"
    />
    <text>当前选中：{{ activeValue }}</text>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const activeValue = ref('self')

const options = [
  { label: '自提', value: 'self' },
  { label: '外送', value: 'delivery' }
]
</script>

<style scoped>
.switch-control-demo {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

Props

参数	类型	默认值	说明
modelValue	String/Number	''	绑定值（v-model）
options	Array	[{ label: '自提', value: 'self' }, { label: '外送', value: 'delivery' }]	选项配置数组，每项包含 label 和 value
type	String	'primary'	主题类型
border	Boolean	false	是否显示边框
borderColor	String	'#e0e0e0'	边框颜色
selectedBackgroundColor	String	''	选中项背景颜色
uiClass	String	''	自定义类名
uiStyle	Object	{}	自定义样式

Events

事件名	说明	回调参数
change	选中项变化时触发	(value) 当前选中的值

示例

多个选项

<template>
  <view class="switch-control-multi-demo">
    <ui-form-switch-control
      v-model="activeValue"
      :options="options"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const activeValue = ref('week')

const options = [
  { label: '日', value: 'day' },
  { label: '周', value: 'week' },
  { label: '月', value: 'month' },
  { label: '年', value: 'year' }
]
</script>

带边框样式

<template>
  <view class="switch-control-border-demo">
    <ui-form-switch-control
      v-model="activeValue"
      :options="options"
      :border="true"
      borderColor="#409EFF"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const activeValue = ref('1')

const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' }
]
</script>

自定义选中背景色

<template>
  <view class="switch-control-custom-demo">
    <ui-form-switch-control
      v-model="activeValue"
      :options="options"
      selectedBackgroundColor="#67C23A"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const activeValue = ref('a')

const options = [
  { label: 'A', value: 'a' },
  { label: 'B', value: 'b' }
]
</script>

平台兼容

平台	支持情况
H5	✅
微信小程序	✅
支付宝小程序	✅
百度小程序	✅
字节跳动小程序	✅
QQ小程序	✅
APP	✅

注意事项

1. options 数组中每项必须包含 label（显示文本）和 value（绑定值）
2. 与 ui-form-switch-tag 功能相同，仅视觉样式不同
3. border 为 true 时会显示整体边框和选项分割线
4. selectedBackgroundColor 可自定义选中项的背景颜色