From 529e57fc83b00482f101e84cf0437627e140a59f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=8D=E5=A6=82=E6=91=B8=E9=B1=BC=E5=8E=BB?= <1780903673@qq.com> Date: Mon, 25 Nov 2024 12:40:34 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20Segmented=20=E6=8F=90?= =?UTF-8?q?=E4=BE=9B=20updateActiveStyle=20=E6=96=B9=E6=B3=95=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E6=BF=80=E6=B4=BB=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/component/segmented.md | 107 ++++++++++++------ docs/component/tabs.md | 104 +++++++++++++---- src/pages/segmented/Index.vue | 30 ++++- src/pages/tabs/Index.vue | 40 +++++++ .../components/wd-segmented/types.ts | 16 ++- .../components/wd-segmented/wd-segmented.vue | 6 +- .../components/wd-tabs/types.ts | 18 ++- .../components/wd-tabs/wd-tabs.vue | 4 +- 8 files changed, 259 insertions(+), 66 deletions(-) diff --git a/docs/component/segmented.md b/docs/component/segmented.md index 318766b9..444cf704 100644 --- a/docs/component/segmented.md +++ b/docs/component/segmented.md @@ -3,9 +3,9 @@ # Segmented 分段器 0.1.23 ## 何时使用 -* 用于展示多个选项并允许用户选择其中单个选项； -* 当切换选中选项时，关联区域的内容会发生变化。 +- 用于展示多个选项并允许用户选择其中单个选项； +- 当切换选中选项时，关联区域的内容会发生变化。 ## 基本用法 @@ -14,6 +14,7 @@ ```vue ``` + ```ts const list = ref(['评论', '点赞', '贡献', '打赏']) @@ -28,7 +29,6 @@ const current = ref('点赞') ``` - ## 小型分段器 通过设置 `size` 属性为 `"small"`，创建一个小型分段器。 @@ -62,13 +62,12 @@ const current = ref('点赞') ``` + ```ts const list = ref([ { @@ -87,6 +86,7 @@ const list = ref([ } ]) ``` + ```scss .section { width: 100%; @@ -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 +打开弹窗 + + 在弹出框中使用 + + +``` +```ts +const list = ref(['评论', '点赞', '贡献', '打赏']) +const current = ref('点赞') + +const segmentedRef = ref() // 获取分段器实例 +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 | + +## Methods + +对外暴露函数 + +| 事件名称 | 说明 | 参数 | 最低版本 | +| ----------------- | --------------------------------------------------------- | ------------------------------ | -------- | +| updateActiveStyle | 更新滑块偏移量，参数`animation`用于是否开启动画，默认开启 | `(animation: boolean) => void` | - | ## Slots -| name | 说明 | 参数 | 最低版本 | -| ------ | -------------------- | ----------------------- | -------- | -| label | 选项标签内容 | `{ option: SegmentedOption }` | 0.1.23 | - +| name | 说明 | 参数 | 最低版本 | +| ----- | ------------ | ----------------------------- | -------- | +| label | 选项标签内容 | `{ option: SegmentedOption }` | 0.1.23 | ## 外部样式类 -| 类名 | 说明 | 最低版本 | -| ------------ | ---------- | -------- | -| customStyle | 自定义样式 | 0.1.23 | -| customClass | 自定义样式类 | 0.1.23 | +| 类名 | 说明 | 最低版本 | +| ----------- | ------------ | -------- | +| customStyle | 自定义样式 | 0.1.23 | +| customClass | 自定义样式类 | 0.1.23 | diff --git a/docs/component/tabs.md b/docs/component/tabs.md index 6cebab92..98f9539a 100644 --- a/docs/component/tabs.md +++ b/docs/component/tabs.md @@ -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 +打开弹窗 + + 在弹出框中使用 + + + 内容{{ tab }} + + + +``` + +```ts +const tab = ref(3) +const tabs = ref(['这', '是', '一', '个', '例子']) + +const showPopup = ref(false) // 控制popup显示 +const tabsRef = ref() // 获取分段器实例 +/** + * 点击按钮打开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 @@ -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` | - | + ## 外部样式类 | 类名 | 说明 | 最低版本 | diff --git a/src/pages/segmented/Index.vue b/src/pages/segmented/Index.vue index 7c32d9b0..55604a34 100644 --- a/src/pages/segmented/Index.vue +++ b/src/pages/segmented/Index.vue @@ -46,11 +46,22 @@ + + + + 打开弹窗 + + + + + 在弹出框中使用 + + diff --git a/src/pages/tabs/Index.vue b/src/pages/tabs/Index.vue index 007ba3dd..f96a6ce3 100644 --- a/src/pages/tabs/Index.vue +++ b/src/pages/tabs/Index.vue @@ -120,10 +120,26 @@ + + + + 打开弹窗 + + + + + 在弹出框中使用 + + + 内容{{ tab10 }} + + + diff --git a/src/uni_modules/wot-design-uni/components/wd-segmented/types.ts b/src/uni_modules/wot-design-uni/components/wd-segmented/types.ts index f473d310..99c3a397 100644 --- a/src/uni_modules/wot-design-uni/components/wd-segmented/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-segmented/types.ts @@ -1,13 +1,13 @@ /* * @Author: weisheng * @Date: 2024-03-18 11:22:03 - * @LastEditTime: 2024-07-25 22:17:56 + * @LastEditTime: 2024-11-24 23:04:55 * @LastEditors: weisheng * @Description: * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-segmented/types.ts * 记得注释 */ -import type { PropType } from 'vue' +import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue' import { baseProps, makeBooleanProp, makeRequiredProp, makeStringProp } from '../common/props' export type SegmentedType = 'large' | 'middle' | 'small' @@ -66,3 +66,15 @@ export const segmentedProps = { */ vibrateShort: makeBooleanProp(false) } + +export type SegmentedExpose = { + /** + * 更新滑块偏移量 + * @param animation 是否开启动画，默认开启 + */ + updateActiveStyle: (animation?: boolean) => void +} + +export type SegmentedProps = ExtractPropTypes + +export type SegmentedInstance = ComponentPublicInstance diff --git a/src/uni_modules/wot-design-uni/components/wd-segmented/wd-segmented.vue b/src/uni_modules/wot-design-uni/components/wd-segmented/wd-segmented.vue index 87b4a3c8..735f631d 100644 --- a/src/uni_modules/wot-design-uni/components/wd-segmented/wd-segmented.vue +++ b/src/uni_modules/wot-design-uni/components/wd-segmented/wd-segmented.vue @@ -34,7 +34,7 @@ export default { import { computed, getCurrentInstance, onMounted, reactive, watch } from 'vue' import { requestAnimationFrame, getRect, isObj, objToStyle, addUnit } from '../common/util' import type { CSSProperties } from 'vue' -import { segmentedProps, type SegmentedOption } from './types' +import { segmentedProps, type SegmentedExpose, type SegmentedOption } from './types' const $item = '.wd-segmented__item' const props = defineProps(segmentedProps) @@ -124,6 +124,10 @@ function handleClick(option: string | number | SegmentedOption, index: number) { emit('change', isObj(option) ? option : { value }) emit('click', isObj(option) ? option : { value }) } + +defineExpose({ + updateActiveStyle +})