feat: ✨ Siderbar 侧边栏添加before-change属性支持异步更新 (#721)

✅ Closes: #711
Moonofweisheng · Nov 18, 2024 · 1f5801d · 1f5801d
1 parent 08e7d77
commit 1f5801d
Show file tree

Hide file tree

Showing 4 changed files with 171 additions and 84 deletions.
diff --git a/docs/component/sidebar.md b/docs/component/sidebar.md
@@ -67,27 +67,58 @@ function handleChange({ value, label }) {
 }
 ```
 
+## 异步切换
+
+通过 `before-change` 属性可以在切换标签前执行特定的逻辑。它接收 `{ value, resolve }` 参数，通过 `resolve` `继续执行，resolve` 接收 1 个 boolean 参数
+
+```html
+<wd-sidebar v-model="active" :before-change="beforeChange">
+  <wd-sidebar-item :value="0" label="标签名称" />
+  <wd-sidebar-item :value="1" label="标签名称" disabled />
+  <wd-sidebar-item :value="2" label="标签名称" />
+</wd-sidebar>
+```
+```typescript
+import { useToast } from '@/uni_modules/wot-design-uni'
+import type { SidebarBeforeChange } from '@/uni_modules/wot-design-uni/components/wd-sidebar/types'
+import { ref } from 'vue'
+const { loading: showLoading, close: closeLoading } = useToast()
+
+const toast = useToast()
+const active = ref<number>(1)
+
+const beforeChange: SidebarBeforeChange = ({ value, resolve }) => {
+  showLoading('切换中')
+  setTimeout(() => {
+    closeLoading()
+    resolve(true)
+  }, 2000)
+}
+```
+
+
 ## 锚点用法示例
 
-sidebar组件的锚点用法可以帮助用户在长页面上快速导航到特定的部分。
+sidebar 组件的锚点用法可以帮助用户在长页面上快速导航到特定的部分。
 
 ::: details 查看锚点用法示例
 ::: code-group
-``` html [vue]
-  <view class="wraper">
-      <wd-sidebar v-model="active" @change="handleChange">
-        <wd-sidebar-item v-for="(item, index) in categories" :key="index" :value="index" :label="item.label" />
-      </wd-sidebar>
-      <scroll-view class="content" scroll-y scroll-with-animation :scroll-top="scrollTop" :throttle="false" @scroll="onScroll">
-        <view v-for="(item, index) in categories" :key="index" class="category">
-          <wd-cell-group :title="item.title" border>
-            <wd-cell v-for="(cell, index) in item.items" :key="index" :title="cell.title" :label="cell.label">
-              <wd-icon name="github-filled" size="24px"></wd-icon>
-            </wd-cell>
-          </wd-cell-group>
-        </view>
-      </scroll-view>
+
+```html [vue]
+<view class="wraper">
+  <wd-sidebar v-model="active" @change="handleChange">
+    <wd-sidebar-item v-for="(item, index) in categories" :key="index" :value="index" :label="item.label" />
+  </wd-sidebar>
+  <scroll-view class="content" scroll-y scroll-with-animation :scroll-top="scrollTop" :throttle="false" @scroll="onScroll">
+    <view v-for="(item, index) in categories" :key="index" class="category">
+      <wd-cell-group :title="item.title" border>
+        <wd-cell v-for="(cell, index) in item.items" :key="index" :title="cell.title" :label="cell.label">
+          <wd-icon name="github-filled" size="24px"></wd-icon>
+        </wd-cell>
+      </wd-cell-group>
     </view>
+  </scroll-view>
+</view>
 ```
 
 ```typescript [typescript]
@@ -179,45 +210,47 @@ function onScroll(e) {
   background: #fff;
 }
 ```
+
 :::
 
 ## 切换页面用法示例
 
-sidebar组件在每次切换激活项时，跳转到指定的页面，且无法通过滚动导航到下一个sidebar项。
+sidebar 组件在每次切换激活项时，跳转到指定的页面，且无法通过滚动导航到下一个 sidebar 项。
 
 ::: details 查看切换页面用法示例
 ::: code-group
-``` html [vue]
- <view class="wraper">
-      <wd-sidebar v-model="active" @change="handleChange">
-        <wd-sidebar-item
-          v-for="(item, index) in categories"
-          :key="index"
-          :value="index"
-          :label="item.label"
-          :icon="item.icon"
-          :disabled="item.disabled"
-        />
-      </wd-sidebar>
-      <view class="content" :style="`transform: translateY(-${active * 100}%)`">
-        <scroll-view
-          v-for="(item, index) in categories"
-          :key="index"
-          class="category"
-          scroll-y
-          scroll-with-animation
-          :show-scrollbar="false"
-          :scroll-top="scrollTop"
-          :throttle="false"
-        >
-          <wd-cell-group :title="item.title" border>
-            <wd-cell v-for="(cell, index) in item.items" :key="index" :title="cell.title" :label="cell.label">
-              <wd-icon name="github-filled" size="24px"></wd-icon>
-            </wd-cell>
-          </wd-cell-group>
-        </scroll-view>
-      </view>
-    </view>
+
+```html [vue]
+<view class="wraper">
+  <wd-sidebar v-model="active" @change="handleChange">
+    <wd-sidebar-item
+      v-for="(item, index) in categories"
+      :key="index"
+      :value="index"
+      :label="item.label"
+      :icon="item.icon"
+      :disabled="item.disabled"
+    />
+  </wd-sidebar>
+  <view class="content" :style="`transform: translateY(-${active * 100}%)`">
+    <scroll-view
+      v-for="(item, index) in categories"
+      :key="index"
+      class="category"
+      scroll-y
+      scroll-with-animation
+      :show-scrollbar="false"
+      :scroll-top="scrollTop"
+      :throttle="false"
+    >
+      <wd-cell-group :title="item.title" border>
+        <wd-cell v-for="(cell, index) in item.items" :key="index" :title="cell.title" :label="cell.label">
+          <wd-icon name="github-filled" size="24px"></wd-icon>
+        </wd-cell>
+      </wd-cell-group>
+    </scroll-view>
+  </view>
+</view>
 ```
 
 ```typescript [typescript]
@@ -307,6 +340,7 @@ function handleChange({ value }) {
   height: 100%;
 }
 ```
+
 :::
 
 ## 自定义图标用法示例
@@ -315,21 +349,22 @@ function handleChange({ value }) {
 
 ::: details 自定义图标用法示例
 ::: code-group
-``` html [vue]
-    <view class="wraper">
-      <wd-sidebar v-model="active" @change="handleChange">
-        <wd-sidebar-item v-for="(item, index) in categories" :key="index" :value="index" :label="item.label" :icon="item.icon" />
-      </wd-sidebar>
-      <scroll-view class="content" scroll-y scroll-with-animation :scroll-top="scrollTop" :throttle="false" @scroll="onScroll">
-        <view v-for="(item, index) in categories" :key="index" class="category">
-          <wd-cell-group :title="item.title" border>
-            <wd-cell v-for="(cell, index) in item.items" :key="index" :title="cell.title" :label="cell.label">
-              <wd-icon name="github-filled" size="24px"></wd-icon>
-            </wd-cell>
-          </wd-cell-group>
-        </view>
-      </scroll-view>
+
+```html [vue]
+<view class="wraper">
+  <wd-sidebar v-model="active" @change="handleChange">
+    <wd-sidebar-item v-for="(item, index) in categories" :key="index" :value="index" :label="item.label" :icon="item.icon" />
+  </wd-sidebar>
+  <scroll-view class="content" scroll-y scroll-with-animation :scroll-top="scrollTop" :throttle="false" @scroll="onScroll">
+    <view v-for="(item, index) in categories" :key="index" class="category">
+      <wd-cell-group :title="item.title" border>
+        <wd-cell v-for="(cell, index) in item.items" :key="index" :title="cell.title" :label="cell.label">
+          <wd-icon name="github-filled" size="24px"></wd-icon>
+        </wd-cell>
+      </wd-cell-group>
     </view>
+  </scroll-view>
+</view>
 ```
 
 ```typescript [typescript]
@@ -427,14 +462,15 @@ function onScroll(e) {
   background: #fff;
 }
 ```
-:::
 
+:::
 
 ## Attributes
 
-| 参数               | 说明             | 类型             | 可选值 | 默认值 | 最低版本 |
-| ------------------ | ---------------- | ---------------- | ------ | ------ | -------- |
-| modelValue/v-model | 当前导航项的索引 | string \| number | -      | 0      | 0.1.49   |
+| 参数               | 说明                                                                                                                                  | 类型             | 可选值 | 默认值 | 最低版本         |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ------ | ------ | ---------------- |
+| modelValue/v-model | 当前导航项的索引                                                                                                                      | string \| number | -      | 0      | 0.1.49           |
+| before-change      | 切换导航项前钩子，可以在切换标签前执行特定的逻辑，接收 { value, resolve } 参数，通过 resolve 继续执行，resolve 接收 1 个 boolean 参数 | function         | -      | -      | $LOWEST_VERSION$ |
 
 ## Events
 
@@ -457,17 +493,16 @@ function onScroll(e) {
 
 ## SidebarItem Attributes
 
-| 参数     | 说明                   | 类型                       | 可选值 | 默认值 | 最低版本 |
-| -------- | ---------------------- | -------------------------- | ------ | ------ | -------- |
-| label    | 当前选项标题           | string                     | -      | -      | 0.1.49   |
-| value    | 当前选项的值，唯一标识 | `number \| string`         | -      | -      | 0.1.49   |
-| icon     | 图标                   | string                     | -      | -      | 0.1.49   |
-| badge    | 徽标属性，徽标显示值             | `number \| string \| null` | -      | -      | 0.1.49   |
-| isDot    | 徽标属性，是否点状徽标           | boolean                    | -      | false  | 0.1.49   |
-| max      | 徽标属性，徽标最大值             | number                     | -      | 99     | 0.1.49   |
-| disabled | 是否禁用               | boolean                    | -      | false  | 0.1.49   |
-| badge-props | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes)	| BadgeProps    | -      | -  | 0.1.50   |
-
+| 参数        | 说明                                                                                     | 类型                       | 可选值 | 默认值 | 最低版本 |
+| ----------- | ---------------------------------------------------------------------------------------- | -------------------------- | ------ | ------ | -------- |
+| label       | 当前选项标题                                                                             | string                     | -      | -      | 0.1.49   |
+| value       | 当前选项的值，唯一标识                                                                   | `number \| string`         | -      | -      | 0.1.49   |
+| icon        | 图标                                                                                     | string                     | -      | -      | 0.1.49   |
+| badge       | 徽标属性，徽标显示值                                                                     | `number \| string \| null` | -      | -      | 0.1.49   |
+| isDot       | 徽标属性，是否点状徽标                                                                   | boolean                    | -      | false  | 0.1.49   |
+| max         | 徽标属性，徽标最大值                                                                     | number                     | -      | 99     | 0.1.49   |
+| disabled    | 是否禁用                                                                                 | boolean                    | -      | false  | 0.1.49   |
+| badge-props | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes) | BadgeProps                 | -      | -      | 0.1.50   |
 
 ## SidebarItem Slots
 

diff --git a/src/pages/sidebar/Index.vue b/src/pages/sidebar/Index.vue
@@ -1,10 +1,10 @@
 <!--
  * @Author: weisheng
  * @Date: 2023-11-06 20:08:34
- * @LastEditTime: 2023-11-06 20:32:06
+ * @LastEditTime: 2024-11-18 23:27:20
  * @LastEditors: weisheng
  * @Description: 
- * @FilePath: \wot-design-uni\src\pages\sidebar\Index.vue
+ * @FilePath: /wot-design-uni/src/pages/sidebar/Index.vue
  * 记得注释
 -->
 <template>
@@ -21,7 +21,7 @@
           <wd-sidebar-item :value="1" label="标签名称" badge="5" />
           <wd-sidebar-item :value="2" label="标签名称" badge="2" :badge-props="{ type: 'warning', modelValue: 55, max: 99 }" />
         </wd-sidebar>
-        <wd-sidebar v-model="active3">
+        <wd-sidebar v-model="active3" :before-change="beforeChange">
           <wd-sidebar-item :value="0" label="标签名称" />
           <wd-sidebar-item :value="1" label="标签名称" disabled />
           <wd-sidebar-item :value="2" label="标签名称" />
@@ -49,12 +49,23 @@
   </page-wraper>
 </template>
 <script lang="ts" setup>
+import { useToast } from '@/uni_modules/wot-design-uni'
+import type { SidebarBeforeChange } from '@/uni_modules/wot-design-uni/components/wd-sidebar/types'
 import { ref } from 'vue'
+const { loading: showLoading, close: closeLoading } = useToast()
 
 const active1 = ref(0)
 const active2 = ref(0)
 const active3 = ref(0)
 
+const beforeChange: SidebarBeforeChange = ({ value, resolve }) => {
+  showLoading('切换中')
+  setTimeout(() => {
+    closeLoading()
+    resolve(true)
+  }, 2000)
+}
+
 function handleClick1() {
   uni.navigateTo({ url: '/pages/sidebar/demo1' })
 }

diff --git a/src/uni_modules/wot-design-uni/components/wd-sidebar/types.ts b/src/uni_modules/wot-design-uni/components/wd-sidebar/types.ts
@@ -1,13 +1,13 @@
 /*
  * @Author: weisheng
  * @Date: 2024-01-05 18:03:27
- * @LastEditTime: 2024-03-18 15:52:37
+ * @LastEditTime: 2024-11-18 23:27:55
  * @LastEditors: weisheng
  * @Description:
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-sidebar\types.ts
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-sidebar/types.ts
  * 记得注释
  */
-import { type ExtractPropTypes, type InjectionKey } from 'vue'
+import { type ExtractPropTypes, type InjectionKey, type PropType } from 'vue'
 import { baseProps, makeNumericProp } from '../common/props'
 
 export type SidebarProvide = {
@@ -17,12 +17,31 @@ export type SidebarProvide = {
 
 export const SIDEBAR_KEY: InjectionKey<SidebarProvide> = Symbol('wd-sidebar')
 
+/**
+ * Sidebar切换前的选项接口
+ */
+export type SidebarBeforeChangeOption = {
+  // 目标值
+  value: number | string
+  resolve: (pass: boolean) => void
+}
+
+/**
+ * Sidebar切换前的钩子函数类型
+ * @param option 切换选项
+ */
+export type SidebarBeforeChange = (option: SidebarBeforeChangeOption) => void
+
 export const sidebarProps = {
   ...baseProps,
   /**
    * 当前导航项的索引
    */
-  modelValue: makeNumericProp(0)
+  modelValue: makeNumericProp(0),
+  /**
+   * 在改变前执行的函数
+   */
+  beforeChange: Function as PropType<SidebarBeforeChange>
 }
 
 export type SidebarProps = ExtractPropTypes<typeof sidebarProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-sidebar/wd-sidebar.vue b/src/uni_modules/wot-design-uni/components/wd-sidebar/wd-sidebar.vue
@@ -17,6 +17,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import { isFunction } from '../common/util'
 import { useChildren } from '../composables/useChildren'
 import { SIDEBAR_KEY, sidebarProps } from './types'
 
@@ -28,9 +29,30 @@ linkChildren({ props, setChange })
 
 /**
  * 子项状态变更
- * @param child 子项
+ * @param value 目标值
+ * @param label 目标值标题
  */
 function setChange(value: number | string, label: string) {
+  if (isFunction(props.beforeChange)) {
+    props.beforeChange({
+      value: value,
+      resolve: (pass: boolean) => {
+        if (pass) {
+          updateValue(value, label)
+        }
+      }
+    })
+  } else {
+    updateValue(value, label)
+  }
+}
+
+/**
+ * 更新选中状态
+ * @param value 目标值
+ * @param label 目标值标题
+ */
+function updateValue(value: number | string, label: string) {
   emit('update:modelValue', value)
   emit('change', { value, label })
 }