diff --git a/docs/component/segmented.md b/docs/component/segmented.md index 5fe67f35e..318766b93 100644 --- a/docs/component/segmented.md +++ b/docs/component/segmented.md @@ -7,6 +7,19 @@ * 当切换选中选项时,关联区域的内容会发生变化。 +## 基本用法 + +通过 `options` 属性设置选项列表,通过 `v-model:value` 绑定当前选中项。 + +```vue + +``` +```ts +const list = ref(['评论', '点赞', '贡献', '打赏']) + +const current = ref('点赞') +``` + ## 大型分段器 通过设置 `size` 属性为 `"large"`,创建一个大型分段器。 @@ -15,20 +28,13 @@ ``` -## 默认分段器 - -这是默认尺寸的分段器。 - -```vue - -``` ## 小型分段器 通过设置 `size` 属性为 `"small"`,创建一个小型分段器。 ```html - + ``` ## 带振动效果的分段器 @@ -36,7 +42,7 @@ 通过设置 `vibrate-short` 属性为 `true`,使手机在切换选项时产生短暂振动。 ```html - + ``` ## 禁用分段器 @@ -44,7 +50,7 @@ 通过设置 `disabled` 属性为 `true`,禁用分段器。 ```html - + ``` ## 自定义渲染分段器标签 @@ -52,7 +58,7 @@ 使用插槽 `label` 可以自定义渲染分段器的标签内容。 ```html - +