Skip to content

Commit 529e57f

Browse files
MoonofweishengMoonofweisheng
committed
feat: ✨ Segmented 提供 updateActiveStyle 方法设置激活样式
1 parent 28ad03b commit 529e57f

File tree

8 files changed

+259
-66
lines changed

8 files changed

+259
-66
lines changed

‎docs/component/segmented.md‎

Lines changed: 75 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
# Segmented 分段器 <el-tag text style="vertical-align: middle;margin-left:8px;" effect="plain">0.1.23</el-tag>
44

55
## 何时使用
6-
* 用于展示多个选项并允许用户选择其中单个选项；
7-
* 当切换选中选项时，关联区域的内容会发生变化。
86

7+
- 用于展示多个选项并允许用户选择其中单个选项；
8+
- 当切换选中选项时，关联区域的内容会发生变化。
99

1010
## 基本用法
1111

@@ -14,6 +14,7 @@
1414
```vue
1515
<wd-segmented :options="list" v-model:value="current"></wd-segmented>
1616
```
17+
1718
```ts
1819
const list = ref<string[]>(['评论', '点赞', '贡献', '打赏'])
1920

@@ -28,7 +29,6 @@ const current = ref('点赞')
2829
<wd-segmented :options="list" v-model:value="current" size="large"></wd-segmented>
2930
```
3031

31-
3232
## 小型分段器
3333

3434
通过设置 `size` 属性为 `"small"`，创建一个小型分段器。
@@ -62,13 +62,12 @@ const current = ref('点赞')
6262
<template #label="{ option }">
6363
<view class="section-slot">
6464
<image style="border-radius: 50%; width: 32px; height: 32px" :src="option.payload.avatar" />
65-
<view class="name">
66-
{{ option.value }}
67-
</view>
65+
<view class="name">{{ option.value }}</view>
6866
</view>
6967
</template>
7068
</wd-segmented>
7169
```
70+
7271
```ts
7372
const list = ref([
7473
{
@@ -87,6 +86,7 @@ const list = ref([
8786
}
8887
])
8988
```
89+
9090
```scss
9191
.section {
9292
width: 100%;
@@ -96,47 +96,90 @@ const list = ref([
9696
padding: 4px;
9797
}
9898
}
99-
10099
```
101100

101+
## 在弹出框中使用
102+
微信小程序端，在弹出框中使用本组件时，需要调用 `updateActiveStyle` 方法更新分段器样式，参见[常见问题](/guide/common-problems.html#%E4%B8%BA%E4%BB%80%E4%B9%88%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%8A%E4%BD%BF%E7%94%A8popup%E3%80%81actionsheet%E3%80%81dropdownitem%E7%AD%89%E5%BC%B9%E5%87%BA%E6%A1%86%E7%BB%84%E4%BB%B6%E5%8C%85%E8%A3%B9slider%E3%80%81tabs%E7%AD%89%E7%BB%84%E4%BB%B6%E6%97%B6-slider%E3%80%81tabs%E8%A1%A8%E7%8E%B0%E5%BC%82%E5%B8%B8)。
103+
104+
105+
```html
106+
<wd-button @click="handleClick">打开弹窗</wd-button>
107+
<wd-popup v-model="showPopup" position="bottom" @after-enter="handlePopupShow" closable custom-style="height: 200px;padding: 0 24rpx;">
108+
<view class="title">在弹出框中使用</view>
109+
<wd-segmented :options="list" v-model:value="current" ref="segmentedRef"></wd-segmented>
110+
</wd-popup>
111+
```
112+
```ts
113+
const list = ref<string[]>(['评论', '点赞', '贡献', '打赏'])
114+
const current = ref('点赞')
102115

116+
const segmentedRef = ref<SegmentedInstance>() // 获取分段器实例
117+
const showPopup = ref(false) // 控制popup显示
118+
/**
119+
* 点击按钮打开popup
120+
*/
121+
function handleClick() {
122+
showPopup.value = true
123+
}
124+
/**
125+
* popup打开后更新分段器样式
126+
*/
127+
function handlePopupShow() {
128+
segmentedRef.value?.updateActiveStyle()
129+
}
130+
```
131+
```css
132+
.title {
133+
display: flex;
134+
font-size: 32rpx;
135+
align-items: center;
136+
justify-content: center;
137+
padding: 24rpx 0;
138+
}
139+
```
103140

104141
## Attributes
105142

106-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
107-
| ------------ | ----------------------------- | --------------- | ------ | ------ | -------- |
108-
| value/v-model:value | 当前选中的值 | string \| number | - | - | 0.1.23 |
109-
| disabled | 是否禁用分段器 | boolean | true \| false | `false` | 0.1.23 |
110-
| size | 控件尺寸 | string | `large` \| `middle` \| `small` | `middle` | 0.1.23 |
111-
| options | 数据集合 | `string[] \| number[] \| SegmentedOption[]` | - | [] | 0.1.23 |
112-
| vibrateShort | 切换选项时是否振动 | boolean | true \| false | `false` | 0.1.23 |
143+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
144+
| ------------------- | ------------------ | ------------------------------------------- | ------------------------------ | -------- | -------- |
145+
| value/v-model:value | 当前选中的值 | string \| number | - | - | 0.1.23 |
146+
| disabled | 是否禁用分段器 | boolean | true \| false | `false` | 0.1.23 |
147+
| size | 控件尺寸 | string | `large` \| `middle` \| `small` | `middle` | 0.1.23 |
148+
| options | 数据集合 | `string[] \| number[] \| SegmentedOption[]` | - | [] | 0.1.23 |
149+
| vibrateShort | 切换选项时是否振动 | boolean | true \| false | `false` | 0.1.23 |
113150

114151
### SegmentedOption
115152

116-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
117-
| ---------- | ------------ | ---------------------- | ------ | ------ | -------- |
118-
| value | 选中值 | string \| number | - | - | 0.1.23 |
119-
| disabled | 是否禁用 | boolean | true \| false | - | 0.1.23 |
120-
| payload | 更多数据 | any | - | - | 0.1.23 |
121-
153+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
154+
| -------- | -------- | ---------------- | ------------- | ------ | -------- |
155+
| value | 选中值 | string \| number | - | - | 0.1.23 |
156+
| disabled | 是否禁用 | boolean | true \| false | - | 0.1.23 |
157+
| payload | 更多数据 | any | - | - | 0.1.23 |
122158

123159
## Events
124160

125-
| 事件名称 | 说明 | 参数 | 最低版本 |
126-
| -------- | -------------------------- | ----------- | -------- |
127-
| change | 选项切换时触发 | `SegmentedOption` | 0.1.23 |
128-
| click | 选项点击时触发 | `SegmentedOption` | 1.2.20 |
161+
| 事件名称 | 说明 | 参数 | 最低版本 |
162+
| -------- | -------------- | ----------------- | -------- |
163+
| change | 选项切换时触发 | `SegmentedOption` | 0.1.23 |
164+
| click | 选项点击时触发 | `SegmentedOption` | 1.2.20 |
129165

130-
## Slots
166+
## Methods
167+
168+
对外暴露函数
131169

132-
| name | 说明 | 参数 | 最低版本 |
133-
| ------ | -------------------- | ----------------------- | -------- |
134-
| label | 选项标签内容 | `{ option: SegmentedOption }` | 0.1.23 |
170+
| 事件名称 | 说明 | 参数 | 最低版本 |
171+
| ----------------- | --------------------------------------------------------- | ------------------------------ | -------- |
172+
| updateActiveStyle | 更新滑块偏移量，参数`animation`用于是否开启动画，默认开启 | `(animation: boolean) => void` | - |
173+
174+
## Slots
135175

176+
| name | 说明 | 参数 | 最低版本 |
177+
| ----- | ------------ | ----------------------------- | -------- |
178+
| label | 选项标签内容 | `{ option: SegmentedOption }` | 0.1.23 |
136179

137180
## 外部样式类
138181

139-
| 类名 | 说明 | 最低版本 |
140-
| ------------ | ---------- | -------- |
141-
| customStyle | 自定义样式 | 0.1.23 |
142-
| customClass | 自定义样式类 | 0.1.23 |
182+
| 类名 | 说明 | 最低版本 |
183+
| ----------- | ------------ | -------- |
184+
| customStyle | 自定义样式 | 0.1.23 |
185+
| customClass | 自定义样式类 | 0.1.23 |

‎docs/component/tabs.md‎

Lines changed: 80 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -205,35 +205,81 @@ const tab = ref('Design')
205205

206206
标签页在标签数大于等于 6 个时，可以滑动；当标签数大于等于 10 个时，将会显示导航地图，便于快速定位到某个标签。可以通过设置 `slidable-num` 修改可滑动的数量阈值；设置 `map-num` 修改显示导航地图的阈值。`slidable`设置为`always`时，所有的标签会向左侧收缩对齐，超出即可滑动。
207207

208+
## 在弹出框中使用
209+
210+
微信小程序端，在弹出框中使用本组件时，需要调用 `updateLineStyle` 方法更新激活项样式，参见[常见问题](/guide/common-problems.html#%E4%B8%BA%E4%BB%80%E4%B9%88%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%8A%E4%BD%BF%E7%94%A8popup%E3%80%81actionsheet%E3%80%81dropdownitem%E7%AD%89%E5%BC%B9%E5%87%BA%E6%A1%86%E7%BB%84%E4%BB%B6%E5%8C%85%E8%A3%B9slider%E3%80%81tabs%E7%AD%89%E7%BB%84%E4%BB%B6%E6%97%B6-slider%E3%80%81tabs%E8%A1%A8%E7%8E%B0%E5%BC%82%E5%B8%B8)。
211+
212+
```html
213+
<wd-button @click="handleClick">打开弹窗</wd-button>
214+
<wd-popup v-model="showPopup" position="bottom" @after-enter="handlePopupShow" closable custom-style="height: 200px;padding: 0 24rpx;">
215+
<view class="title">在弹出框中使用</view>
216+
<wd-tabs v-model="tab" ref="tabsRef">
217+
<wd-tab v-for="item in tabs" :key="item" :title="`${item}`" :name="item">
218+
<view class="content">内容{{ tab }}</view>
219+
</wd-tab>
220+
</wd-tabs>
221+
</wd-popup>
222+
```
223+
224+
```ts
225+
const tab = ref<number>(3)
226+
const tabs = ref(['这', '是', '一', '个', '例子'])
227+
228+
const showPopup = ref(false) // 控制popup显示
229+
const tabsRef = ref<TabsInstance>() // 获取分段器实例
230+
/**
231+
* 点击按钮打开popup
232+
*/
233+
function handleOpenClick() {
234+
showPopup.value = true
235+
}
236+
/**
237+
* popup打开后更新分段器样式
238+
*/
239+
function handlePopupShow() {
240+
tabsRef.value?.updateLineStyle(false)
241+
}
242+
```
243+
244+
```css
245+
.title {
246+
display: flex;
247+
font-size: 32rpx;
248+
align-items: center;
249+
justify-content: center;
250+
padding: 24rpx 0;
251+
}
252+
```
253+
208254
## Tabs Attributes
209255

210-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
211-
| ------------- | ------------------------------------------------- | --------------- | -------- | ------ | ---------------- |
212-
| v-model | 绑定值 | string / number | - | - | - |
213-
| slidable-num | 可滑动的标签数阈值，`slidable`设置为`auto`时生效 | number | - | 6 | - |
214-
| map-num | 显示导航地图的标签数阈值 | number | - | 10 | - |
215-
| map-title | 导航地图标题 | string | - | - | 1.4.0 |
216-
| sticky | 粘性布局 | boolean | - | false | - |
217-
| offset-top | 粘性布局时距离窗口顶部距离 | number | - | 0 | - |
218-
| swipeable | 开启手势滑动 | boolean | - | false | - |
219-
| autoLineWidth | 底部条宽度跟随文字，指定`lineWidth`时此选项不生效 | boolean | - | false | 1.4.0 |
220-
| lineWidth | 底部条宽度，单位像素 | number | - | 19 | - |
221-
| lineHeight | 底部条高度，单位像素 | number | - | 3 | - |
222-
| color | 文字颜色 | string | - | - | - |
223-
| inactiveColor | 非活动标签文字颜色 | string | - | - | - |
224-
| animated | 是否开启切换标签内容时的转场动画 | boolean | - | false | - |
225-
| duration | 切换动画过渡时间，单位毫秒 | number | - | 300 | - |
226-
| slidable | 是否开启滚动导航 | TabsSlidable | `always` | `auto` | 1.4.0 |
227-
| badge-props | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes) | BadgeProps | - | - | 1.4.0 |
256+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
257+
| ------------- | ---------------------------------------------------------------------------------------- | --------------- | -------- | ------ | -------- |
258+
| v-model | 绑定值 | string / number | - | - | - |
259+
| slidable-num | 可滑动的标签数阈值，`slidable`设置为`auto`时生效 | number | - | 6 | - |
260+
| map-num | 显示导航地图的标签数阈值 | number | - | 10 | - |
261+
| map-title | 导航地图标题 | string | - | - | 1.4.0 |
262+
| sticky | 粘性布局 | boolean | - | false | - |
263+
| offset-top | 粘性布局时距离窗口顶部距离 | number | - | 0 | - |
264+
| swipeable | 开启手势滑动 | boolean | - | false | - |
265+
| autoLineWidth | 底部条宽度跟随文字，指定`lineWidth`时此选项不生效 | boolean | - | false | 1.4.0 |
266+
| lineWidth | 底部条宽度，单位像素 | number | - | 19 | - |
267+
| lineHeight | 底部条高度，单位像素 | number | - | 3 | - |
268+
| color | 文字颜色 | string | - | - | - |
269+
| inactiveColor | 非活动标签文字颜色 | string | - | - | - |
270+
| animated | 是否开启切换标签内容时的转场动画 | boolean | - | false | - |
271+
| duration | 切换动画过渡时间，单位毫秒 | number | - | 300 | - |
272+
| slidable | 是否开启滚动导航 | TabsSlidable | `always` | `auto` | 1.4.0 |
273+
| badge-props | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes) | BadgeProps | - | - | 1.4.0 |
228274

229275
## Tab Attributes
230276

231-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
232-
| -------- | ------------------------------------------------------- | ------- | ------ | ------ | ---------------- |
233-
| name | 标签页名称 | string | - | - | - |
234-
| title | 标题 | string | - | - | - |
235-
| disabled | 禁用 | boolean | - | false | - |
236-
| lazy | 延迟渲染，默认开启，开启`animated`后此选项始终为`false` | boolean | - | true | 1.4.0 |
277+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
278+
| -------- | ------------------------------------------------------- | ------- | ------ | ------ | -------- |
279+
| name | 标签页名称 | string | - | - | - |
280+
| title | 标题 | string | - | - | - |
281+
| disabled | 禁用 | boolean | - | false | - |
282+
| lazy | 延迟渲染，默认开启，开启`animated`后此选项始终为`false` | boolean | - | true | 1.4.0 |
237283

238284
## Tabs Events
239285

@@ -243,6 +289,16 @@ const tab = ref('Design')
243289
| click | 点击标题时触发 | event = { index, name },index 为 tab 下标，name 为 tab 绑定的值 | - |
244290
| disabled | 点击禁用的标题时触发 | event = { index, name },index 为 tab 下标，name 为 tab 绑定的值 | - |
245291

292+
## Methods
293+
294+
对外暴露函数
295+
296+
| 事件名称 | 说明 | 参数 | 最低版本 |
297+
| --------------- | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | -------- |
298+
| setActive | 设置激活项，参数分别为：`value` 激活值，`init` 是否已初始化 ，`setScroll` 是否设置 scroll-view 滚动 | `(value: number \| string, init: boolean, setScroll: boolean) => void` | - |
299+
| scrollIntoView | 使选中项滚动到可视区域 | - | - |
300+
| updateLineStyle | 更新激活项边框线样式，参数`animation`用于是否开启动画，默认开启 | `(animation: boolean) => void` | - |
301+
246302
## 外部样式类
247303

248304
| 类名 | 说明 | 最低版本 |

‎src/pages/segmented/Index.vue‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,22 @@
4646
</wd-segmented>
4747
</view>
4848
</demo-block>
49+
50+
<demo-block title="在弹出框中使用" transparent>
51+
<view class="section">
52+
<wd-button @click="handleClick">打开弹窗</wd-button>
53+
</view>
54+
</demo-block>
55+
56+
<wd-popup v-model="showPopup" position="bottom" @after-enter="handlePopupShow" closable custom-style="height: 200px;padding: 0 24rpx;">
57+
<view class="title">在弹出框中使用</view>
58+
<wd-segmented :options="list" v-model:value="current6" @change="handleChange" ref="segmentedRef"></wd-segmented>
59+
</wd-popup>
4960
</page-wraper>
5061
</view>
5162
</template>
5263
<script lang="ts" setup>
53-
import type { SegmentedOption } from '@/uni_modules/wot-design-uni/components/wd-segmented/types'
64+
import type { SegmentedInstance, SegmentedOption } from '@/uni_modules/wot-design-uni/components/wd-segmented/types'
5465
import { ref } from 'vue'
5566
5667
const list = ref<string[]>(['评论', '点赞', '贡献', '打赏'])
@@ -101,6 +112,16 @@ const current5 = ref('评论')
101112
function handleChange(option: SegmentedOption) {
102113
console.log(option)
103114
}
115+
116+
const current6 = ref('点赞')
117+
const segmentedRef = ref<SegmentedInstance>()
118+
const showPopup = ref(false)
119+
function handleClick() {
120+
showPopup.value = true
121+
}
122+
function handlePopupShow() {
123+
segmentedRef.value?.updateActiveStyle()
124+
}
104125
</script>
105126
<style lang="scss" scoped>
106127
.section {
@@ -111,4 +132,11 @@ function handleChange(option: SegmentedOption) {
111132
padding: 4px;
112133
}
113134
}
135+
.title {
136+
display: flex;
137+
font-size: 32rpx;
138+
align-items: center;
139+
justify-content: center;
140+
padding: 24rpx 0;
141+
}
114142
</style>

0 commit comments

Comments
 (0)