# Segmented 分段器 0.1.23 ## 何时使用 * 用于展示多个选项并允许用户选择其中单个选项; * 当切换选中选项时,关联区域的内容会发生变化。 ## 大型分段器 通过设置 `size` 属性为 `"large"`,创建一个大型分段器。 ```html ``` ## 默认分段器 这是默认尺寸的分段器。 ```vue ``` ## 小型分段器 通过设置 `size` 属性为 `"small"`,创建一个小型分段器。 ```html ``` ## 带振动效果的分段器 通过设置 `vibrate-short` 属性为 `true`,使手机在切换选项时产生短暂振动。 ```html ``` ## 禁用分段器 通过设置 `disabled` 属性为 `true`,禁用分段器。 ```html ``` ## 自定义渲染分段器标签 使用插槽 `label` 可以自定义渲染分段器的标签内容。 ```html ``` ```ts const list1 = ref([ { value: '李雷', disabled: false, payload: { avatar: 'https://unpkg.com/wot-design-uni-assets/redpanda.jpg' } }, { value: '韩梅梅', disabled: false, payload: { avatar: 'https://unpkg.com/wot-design-uni-assets/capybara.jpg' } } ]) ``` ```scss .section { width: 100%; padding: 0 24rpx; box-sizing: border-box; &-slot { padding: 4px; } } ``` 请注意,上述示例代码中的 `list` 和 `list1` 变量是您在 `