|
7 | 7 | * 当切换选中选项时,关联区域的内容会发生变化。 |
8 | 8 |
|
9 | 9 |
|
| 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 | + |
10 | 23 | ## 大型分段器 |
11 | 24 |
|
12 | 25 | 通过设置 `size` 属性为 `"large"`,创建一个大型分段器。 |
|
15 | 28 | <wd-segmented :options="list" v-model:value="current" size="large"></wd-segmented> |
16 | 29 | ``` |
17 | 30 |
|
18 | | -## 默认分段器 |
19 | | - |
20 | | -这是默认尺寸的分段器。 |
21 | | - |
22 | | -```vue |
23 | | -<wd-segmented :options="list" v-model:value="current1"></wd-segmented> |
24 | | -``` |
25 | 31 |
|
26 | 32 | ## 小型分段器 |
27 | 33 |
|
28 | 34 | 通过设置 `size` 属性为 `"small"`,创建一个小型分段器。 |
29 | 35 |
|
30 | 36 | ```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> |
32 | 38 | ``` |
33 | 39 |
|
34 | 40 | ## 带振动效果的分段器 |
35 | 41 |
|
36 | 42 | 通过设置 `vibrate-short` 属性为 `true`,使手机在切换选项时产生短暂振动。 |
37 | 43 |
|
38 | 44 | ```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> |
40 | 46 | ``` |
41 | 47 |
|
42 | 48 | ## 禁用分段器 |
43 | 49 |
|
44 | 50 | 通过设置 `disabled` 属性为 `true`,禁用分段器。 |
45 | 51 |
|
46 | 52 | ```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> |
48 | 54 | ``` |
49 | 55 |
|
50 | 56 | ## 自定义渲染分段器标签 |
51 | 57 |
|
52 | 58 | 使用插槽 `label` 可以自定义渲染分段器的标签内容。 |
53 | 59 |
|
54 | 60 | ```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"> |
56 | 62 | <template #label="{ option }"> |
57 | 63 | <view class="section-slot"> |
58 | 64 | <image style="border-radius: 50%; width: 32px; height: 32px" :src="option.payload.avatar" /> |
|
64 | 70 | </wd-segmented> |
65 | 71 | ``` |
66 | 72 | ```ts |
67 | | -const list1 = ref([ |
| 73 | +const list = ref([ |
68 | 74 | { |
69 | 75 | value: '李雷', |
70 | 76 | disabled: false, |
@@ -93,7 +99,6 @@ const list1 = ref([ |
93 | 99 |
|
94 | 100 | ``` |
95 | 101 |
|
96 | | -请注意,上述示例代码中的 `list` 和 `list1` 变量是您在 `<script>` 部分设置的示例数据。您可以根据您的实际需求自定义这些数据。 |
97 | 102 |
|
98 | 103 |
|
99 | 104 | ## Attributes |
|
0 commit comments