Skip to content

Commit 5caf3b9

Browse files
docs: ✏️ 优化Segmented分段器关于绑定激活项的文档
1 parent c4071c3 commit 5caf3b9

File tree

1 file changed

+18
-13
lines changed

1 file changed

+18
-13
lines changed

docs/component/segmented.md

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,19 @@
77
* 当切换选中选项时,关联区域的内容会发生变化。
88

99

10+
## 基本用法
11+
12+
通过 `options` 属性设置选项列表,通过 `v-model:value` 绑定当前选中项。
13+
14+
```vue
15+
<wd-segmented :options="list" v-model:value="current"></wd-segmented>
16+
```
17+
```ts
18+
const list = ref<string[]>(['评论', '点赞', '贡献', '打赏'])
19+
20+
const current = ref('点赞')
21+
```
22+
1023
## 大型分段器
1124

1225
通过设置 `size` 属性为 `"large"`,创建一个大型分段器。
@@ -15,44 +28,37 @@
1528
<wd-segmented :options="list" v-model:value="current" size="large"></wd-segmented>
1629
```
1730

18-
## 默认分段器
19-
20-
这是默认尺寸的分段器。
21-
22-
```vue
23-
<wd-segmented :options="list" v-model:value="current1"></wd-segmented>
24-
```
2531

2632
## 小型分段器
2733

2834
通过设置 `size` 属性为 `"small"`,创建一个小型分段器。
2935

3036
```html
31-
<wd-segmented :options="list" v-model:value="current2" size="small"></wd-segmented>
37+
<wd-segmented :options="list" v-model:value="current" size="small"></wd-segmented>
3238
```
3339

3440
## 带振动效果的分段器
3541

3642
通过设置 `vibrate-short` 属性为 `true`,使手机在切换选项时产生短暂振动。
3743

3844
```html
39-
<wd-segmented :options="list" v-model:value="current3" :vibrate-short="true"></wd-segmented>
45+
<wd-segmented :options="list" v-model:value="current" :vibrate-short="true"></wd-segmented>
4046
```
4147

4248
## 禁用分段器
4349

4450
通过设置 `disabled` 属性为 `true`,禁用分段器。
4551

4652
```html
47-
<wd-segmented :options="list" v-model:value="current5" disabled></wd-segmented>
53+
<wd-segmented :options="list" v-model:value="current" disabled></wd-segmented>
4854
```
4955

5056
## 自定义渲染分段器标签
5157

5258
使用插槽 `label` 可以自定义渲染分段器的标签内容。
5359

5460
```html
55-
<wd-segmented :options="list1" v-model:value="current4" :vibrate-short="true">
61+
<wd-segmented :options="list" v-model:value="current" :vibrate-short="true">
5662
<template #label="{ option }">
5763
<view class="section-slot">
5864
<image style="border-radius: 50%; width: 32px; height: 32px" :src="option.payload.avatar" />
@@ -64,7 +70,7 @@
6470
</wd-segmented>
6571
```
6672
```ts
67-
const list1 = ref([
73+
const list = ref([
6874
{
6975
value: '李雷',
7076
disabled: false,
@@ -93,7 +99,6 @@ const list1 = ref([
9399

94100
```
95101

96-
请注意,上述示例代码中的 `list``list1` 变量是您在 `<script>` 部分设置的示例数据。您可以根据您的实际需求自定义这些数据。
97102

98103

99104
## Attributes

0 commit comments

Comments
 (0)