更新记录

1.0.0（2026-02-24） 下载此版本

init

平台兼容性

uni-app x(4.85)

ywx-subsection

YwxSubsection 是一个分段选择器组件，用于在多个选项间进行单一选择。它通常表现为一组水平排列的按钮，可适应不同的布局需求，支持自定义样式和双向绑定。

组件名：ywx-subsection

使用须知: 组件关联 ywx-scss

使用示例:

// 基础用法
<template>
  <YwxSubsection 
    v-model="selected" 
    :options="options"
    @handle="onHandle"
  />
</template>

<script setup lang="uts">
import { ref } from 'vue'

const selected = ref('tab1')
const options = [
  { label: '选项一', value: 'tab1' },
  { label: '选项二', value: 'tab2' },
  { label: '选项三', value: 'tab3' }
]

const onHandle = (option) => {
  console.log('选中：', option)
}
</script>

// 拉伸等分宽度
<template>
  <!-- 父容器需有宽度，如设置 width: 100% -->
  <view style="width: 100%;">
    <YwxSubsection 
      v-model="selected" 
      :options="options"
      stretch
    />
  </view>
</template>

// 启用阴影
<template>
  <YwxSubsection 
    v-model="selected" 
    :options="options"
    shadow
  />
</template>

// 动态选项
<template>
  <YwxSubsection 
    v-model="selected" 
    :options="dynamicOptions"
    stretch
  />
</template>

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

const categories = ref(['科技', '体育', '娱乐'])
const dynamicOptions = computed(() => 
  categories.value.map((cat, index) => ({
    label: cat,
    value: index
  }))
)
</script>

注意事项 1.选项格式：options 数组中的每个对象必须包含 label 和 value 字段，且 value 应唯一。

2.双向绑定：v-model 绑定的值应与某个选项的 value 匹配，否则没有选项高亮。

3.拉伸模式：当 stretch 为 true 时，需要确保父容器有明确的宽度，否则子元素无法正确等分空间。

4.样式依赖：组件内部使用了多个全局样式类，请确保项目已引入依赖 ywx-scss 组件。

5.类型支持：modelValue 和 options 的 value 支持 number 或 string，请根据实际数据使用。

如有问题或建议，请联系作者 YinXueHai 🐧：1170709203