ui-form-switch-tag 分段标签切换组件

版本：v2.3.11

分段标签切换组件，功能与 ui-form-switch-control 完全一致，以标签样式展示多个选项供用户切换选择

基本使用

<template>
  <view class="switch-tag-demo">
    <ui-form-switch-tag
      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-tag-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-tag-multi-demo">
    <ui-form-switch-tag
      v-model="activeValue"
      :options="options"
    />
  </view>
</template>

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

const activeValue = ref('all')

const options = [
  { label: '全部', value: 'all' },
  { label: '待付款', value: 'unpaid' },
  { label: '已完成', value: 'done' }
]
</script>

带边框样式

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

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

const activeValue = ref('1')

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

平台兼容

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

注意事项

1. 与 ui-form-switch-control 功能完全一致，仅视觉样式不同（标签样式 vs 分段控制器样式）
2. options 数组中每项必须包含 label（显示文本）和 value（绑定值）
3. border 为 true 时会显示整体边框
4. selectedBackgroundColor 可自定义选中项的背景颜色
5. 根据实际 UI 需求选择 ui-form-switch-control 或 ui-form-switch-tag