Skip to content

Commit

Permalink
feat: ✨ Segmented 提供 updateActiveStyle 方法设置激活样式
Browse files Browse the repository at this point in the history
  • Loading branch information
@Moonofweisheng
Moonofweisheng committed Nov 25, 2024
1 parent 28ad03b commit 529e57f
Show file tree
Hide file tree
Showing 8 changed files with 259 additions and 66 deletions.
107 changes: 75 additions & 32 deletions docs/component/segmented.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
# Segmented 分段器 <el-tag text style="vertical-align: middle;margin-left:8px;" effect="plain">0.1.23</el-tag>

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

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

## 基本用法

Expand All @@ -14,6 +14,7 @@
```vue
<wd-segmented :options="list" v-model:value="current"></wd-segmented>
```

```ts
const list = ref<string[]>(['评论', '点赞', '贡献', '打赏'])

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


## 小型分段器

通过设置 `size` 属性为 `"small"`，创建一个小型分段器。
Expand Down Expand Up @@ -62,13 +62,12 @@ const current = ref('点赞')
<template #label="{ option }">
<view class="section-slot">
<image style="border-radius: 50%; width: 32px; height: 32px" :src="option.payload.avatar" />
<view class="name">
{{ option.value }}
</view>
<view class="name">{{ option.value }}</view>
</view>
</template>
</wd-segmented>
```

```ts
const list = ref([
{
Expand All @@ -87,6 +86,7 @@ const list = ref([
}
])
```

```scss
.section {
width: 100%;
Expand All @@ -96,47 +96,90 @@ const list = ref([
padding: 4px;
}
}

```

## 在弹出框中使用
微信小程序端，在弹出框中使用本组件时，需要调用 `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)。


```html
<wd-button @click="handleClick">打开弹窗</wd-button>
<wd-popup v-model="showPopup" position="bottom" @after-enter="handlePopupShow" closable custom-style="height: 200px;padding: 0 24rpx;">
<view class="title">在弹出框中使用</view>
<wd-segmented :options="list" v-model:value="current" ref="segmentedRef"></wd-segmented>
</wd-popup>
```
```ts
const list = ref<string[]>(['评论', '点赞', '贡献', '打赏'])
const current = ref('点赞')

const segmentedRef = ref<SegmentedInstance>() // 获取分段器实例
const showPopup = ref(false) // 控制popup显示
/**
* 点击按钮打开popup
*/
function handleClick() {
showPopup.value = true
}
/**
* popup打开后更新分段器样式
*/
function handlePopupShow() {
segmentedRef.value?.updateActiveStyle()
}
```
```css
.title {
display: flex;
font-size: 32rpx;
align-items: center;
justify-content: center;
padding: 24rpx 0;
}
```

## Attributes

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

### SegmentedOption

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ---------- | ------------ | ---------------------- | ------ | ------ | -------- |
| value | 选中值 | string \| number | - | - | 0.1.23 |
| disabled | 是否禁用 | boolean | true \| false | - | 0.1.23 |
| payload | 更多数据 | any | - | - | 0.1.23 |

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| -------- | -------- | ---------------- | ------------- | ------ | -------- |
| value | 选中值 | string \| number | - | - | 0.1.23 |
| disabled | 是否禁用 | boolean | true \| false | - | 0.1.23 |
| payload | 更多数据 | any | - | - | 0.1.23 |

## Events

| 事件名称 | 说明 | 参数 | 最低版本 |
| -------- | -------------------------- | ----------- | -------- |
| change | 选项切换时触发 | `SegmentedOption` | 0.1.23 |
| click | 选项点击时触发 | `SegmentedOption` | 1.2.20 |
| 事件名称 | 说明 | 参数 | 最低版本 |
| -------- | -------------- | ----------------- | -------- |
| change | 选项切换时触发 | `SegmentedOption` | 0.1.23 |
| click | 选项点击时触发 | `SegmentedOption` | 1.2.20 |

## Slots
## Methods

对外暴露函数

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

## Slots

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

## 外部样式类

| 类名 | 说明 | 最低版本 |
| ------------ | ---------- | -------- |
| customStyle | 自定义样式 | 0.1.23 |
| customClass | 自定义样式类 | 0.1.23 |
| 类名 | 说明 | 最低版本 |
| ----------- | ------------ | -------- |
| customStyle | 自定义样式 | 0.1.23 |
| customClass | 自定义样式类 | 0.1.23 |
104 changes: 80 additions & 24 deletions docs/component/tabs.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,35 +205,81 @@ const tab = ref('Design')

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

## 在弹出框中使用

微信小程序端，在弹出框中使用本组件时，需要调用 `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)。

```html
<wd-button @click="handleClick">打开弹窗</wd-button>
<wd-popup v-model="showPopup" position="bottom" @after-enter="handlePopupShow" closable custom-style="height: 200px;padding: 0 24rpx;">
<view class="title">在弹出框中使用</view>
<wd-tabs v-model="tab" ref="tabsRef">
<wd-tab v-for="item in tabs" :key="item" :title="`${item}`" :name="item">
<view class="content">内容{{ tab }}</view>
</wd-tab>
</wd-tabs>
</wd-popup>
```

```ts
const tab = ref<number>(3)
const tabs = ref(['这', '是', '一', '个', '例子'])

const showPopup = ref(false) // 控制popup显示
const tabsRef = ref<TabsInstance>() // 获取分段器实例
/**
* 点击按钮打开popup
*/
function handleOpenClick() {
showPopup.value = true
}
/**
* popup打开后更新分段器样式
*/
function handlePopupShow() {
tabsRef.value?.updateLineStyle(false)
}
```

```css
.title {
display: flex;
font-size: 32rpx;
align-items: center;
justify-content: center;
padding: 24rpx 0;
}
```

## Tabs Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ------------- | ------------------------------------------------- | --------------- | -------- | ------ | ---------------- |
| v-model | 绑定值 | string / number | - | - | - |
| slidable-num | 可滑动的标签数阈值，`slidable`设置为`auto`时生效 | number | - | 6 | - |
| map-num | 显示导航地图的标签数阈值 | number | - | 10 | - |
| map-title | 导航地图标题 | string | - | - | 1.4.0 |
| sticky | 粘性布局 | boolean | - | false | - |
| offset-top | 粘性布局时距离窗口顶部距离 | number | - | 0 | - |
| swipeable | 开启手势滑动 | boolean | - | false | - |
| autoLineWidth | 底部条宽度跟随文字，指定`lineWidth`时此选项不生效 | boolean | - | false | 1.4.0 |
| lineWidth | 底部条宽度，单位像素 | number | - | 19 | - |
| lineHeight | 底部条高度，单位像素 | number | - | 3 | - |
| color | 文字颜色 | string | - | - | - |
| inactiveColor | 非活动标签文字颜色 | string | - | - | - |
| animated | 是否开启切换标签内容时的转场动画 | boolean | - | false | - |
| duration | 切换动画过渡时间，单位毫秒 | number | - | 300 | - |
| slidable | 是否开启滚动导航 | TabsSlidable | `always` | `auto` | 1.4.0 |
| badge-props | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes) | BadgeProps | - | - | 1.4.0 |
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ------------- | ---------------------------------------------------------------------------------------- | --------------- | -------- | ------ | -------- |
| v-model | 绑定值 | string / number | - | - | - |
| slidable-num | 可滑动的标签数阈值，`slidable`设置为`auto`时生效 | number | - | 6 | - |
| map-num | 显示导航地图的标签数阈值 | number | - | 10 | - |
| map-title | 导航地图标题 | string | - | - | 1.4.0 |
| sticky | 粘性布局 | boolean | - | false | - |
| offset-top | 粘性布局时距离窗口顶部距离 | number | - | 0 | - |
| swipeable | 开启手势滑动 | boolean | - | false | - |
| autoLineWidth | 底部条宽度跟随文字，指定`lineWidth`时此选项不生效 | boolean | - | false | 1.4.0 |
| lineWidth | 底部条宽度，单位像素 | number | - | 19 | - |
| lineHeight | 底部条高度，单位像素 | number | - | 3 | - |
| color | 文字颜色 | string | - | - | - |
| inactiveColor | 非活动标签文字颜色 | string | - | - | - |
| animated | 是否开启切换标签内容时的转场动画 | boolean | - | false | - |
| duration | 切换动画过渡时间，单位毫秒 | number | - | 300 | - |
| slidable | 是否开启滚动导航 | TabsSlidable | `always` | `auto` | 1.4.0 |
| badge-props | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes) | BadgeProps | - | - | 1.4.0 |

## Tab Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| -------- | ------------------------------------------------------- | ------- | ------ | ------ | ---------------- |
| name | 标签页名称 | string | - | - | - |
| title | 标题 | string | - | - | - |
| disabled | 禁用 | boolean | - | false | - |
| lazy | 延迟渲染，默认开启，开启`animated`后此选项始终为`false` | boolean | - | true | 1.4.0 |
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| -------- | ------------------------------------------------------- | ------- | ------ | ------ | -------- |
| name | 标签页名称 | string | - | - | - |
| title | 标题 | string | - | - | - |
| disabled | 禁用 | boolean | - | false | - |
| lazy | 延迟渲染，默认开启，开启`animated`后此选项始终为`false` | boolean | - | true | 1.4.0 |

## Tabs Events

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

## Methods

对外暴露函数

| 事件名称 | 说明 | 参数 | 最低版本 |
| --------------- | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | -------- |
| setActive | 设置激活项，参数分别为：`value` 激活值，`init` 是否已初始化 ，`setScroll` 是否设置 scroll-view 滚动 | `(value: number \| string, init: boolean, setScroll: boolean) => void` | - |
| scrollIntoView | 使选中项滚动到可视区域 | - | - |
| updateLineStyle | 更新激活项边框线样式，参数`animation`用于是否开启动画，默认开启 | `(animation: boolean) => void` | - |

## 外部样式类

| 类名 | 说明 | 最低版本 |
Expand Down
30 changes: 29 additions & 1 deletion src/pages/segmented/Index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,22 @@
</wd-segmented>
</view>
</demo-block>

<demo-block title="在弹出框中使用" transparent>
<view class="section">
<wd-button @click="handleClick">打开弹窗</wd-button>
</view>
</demo-block>

<wd-popup v-model="showPopup" position="bottom" @after-enter="handlePopupShow" closable custom-style="height: 200px;padding: 0 24rpx;">
<view class="title">在弹出框中使用</view>
<wd-segmented :options="list" v-model:value="current6" @change="handleChange" ref="segmentedRef"></wd-segmented>
</wd-popup>
</page-wraper>
</view>
</template>
<script lang="ts" setup>
import type { SegmentedOption } from '@/uni_modules/wot-design-uni/components/wd-segmented/types'
import type { SegmentedInstance, SegmentedOption } from '@/uni_modules/wot-design-uni/components/wd-segmented/types'
import { ref } from 'vue'
const list = ref<string[]>(['评论', '点赞', '贡献', '打赏'])
Expand Down Expand Up @@ -101,6 +112,16 @@ const current5 = ref('评论')
function handleChange(option: SegmentedOption) {
console.log(option)
}
const current6 = ref('点赞')
const segmentedRef = ref<SegmentedInstance>()
const showPopup = ref(false)
function handleClick() {
showPopup.value = true
}
function handlePopupShow() {
segmentedRef.value?.updateActiveStyle()
}
</script>
<style lang="scss" scoped>
.section {
Expand All @@ -111,4 +132,11 @@ function handleChange(option: SegmentedOption) {
padding: 4px;
}
}
.title {
display: flex;
font-size: 32rpx;
align-items: center;
justify-content: center;
padding: 24rpx 0;
}
</style>
Loading

0 comments on commit 529e57f

Please sign in to comment.