admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
✅ Closes: #711
This commit is contained in:
不如摸鱼去 2024-11-18 23:29:50 +08:00 committed by GitHub
parent 08e7d774c6
commit 1f5801d3f4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 171 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
docs/component/sidebar.md
View File

@ -67,14 +67,45 @@ 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">
```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>
@ -87,7 +118,7 @@ sidebar组件的锚点用法可以帮助用户在长页面上快速导航到特
</wd-cell-group>
</view>
</scroll-view>
</view>
</view>
```
```typescript [typescript]
@ -179,16 +210,18 @@ function onScroll(e) {
background: #fff;
}
```
:::
## 切换页面用法示例
sidebar组件在每次切换激活项时，跳转到指定的页面，且无法通过滚动导航到下一个sidebar项。
sidebar 组件在每次切换激活项时，跳转到指定的页面，且无法通过滚动导航到下一个 sidebar 项。
::: details 查看切换页面用法示例
::: code-group
``` html [vue]
<view class="wraper">
```html [vue]
<view class="wraper">
<wd-sidebar v-model="active" @change="handleChange">
<wd-sidebar-item
v-for="(item, index) in categories"
@ -217,7 +250,7 @@ sidebar组件在每次切换激活项时，跳转到指定的页面，且无法
</wd-cell-group>
</scroll-view>
</view>
</view>
</view>
```
```typescript [typescript]
@ -307,6 +340,7 @@ function handleChange({ value }) {
height: 100%;
}
```
:::
## 自定义图标用法示例
@ -315,8 +349,9 @@ function handleChange({ value }) {
::: details 自定义图标用法示例
::: code-group
``` html [vue]
<view class="wraper">
```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>
@ -329,7 +364,7 @@ function handleChange({ value }) {
</wd-cell-group>
</view>
</scroll-view>
</view>
</view>
```
```typescript [typescript]
@ -427,14 +462,15 @@ function onScroll(e) {
background: #fff;
}
```
:::
:::
## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ------------------ | ---------------- | ---------------- | ------ | ------ | -------- |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ------ | ------ | ---------------- |
| modelValue/v-model | 当前导航项的索引 | string \| number | - | 0 | 0.1.49 |
| before-change | 切换导航项前钩子，可以在切换标签前执行特定的逻辑，接收 { value, resolve } 参数，通过 resolve 继续执行，resolve 接收 1 个 boolean 参数 | function | - | - | $LOWEST_VERSION$ |
## Events
@ -458,7 +494,7 @@ function onScroll(e) {
## SidebarItem Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| -------- | ---------------------- | -------------------------- | ------ | ------ | -------- |
| ----------- | ---------------------------------------------------------------------------------------- | -------------------------- | ------ | ------ | -------- |
| label | 当前选项标题 | string | - | - | 0.1.49 |
| value | 当前选项的值，唯一标识 | `number \| string` | - | - | 0.1.49 |
| icon | 图标 | string | - | - | 0.1.49 |
@ -468,7 +504,6 @@ function onScroll(e) {
| disabled | 是否禁用 | boolean | - | false | 0.1.49 |
| badge-props | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes) | BadgeProps | - | - | 0.1.50 |
## SidebarItem Slots
| name | 说明 | 参数 | 最低版本 |

17
src/pages/sidebar/Index.vue
View File

@ -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' })
}

27
src/uni_modules/wot-design-uni/components/wd-sidebar/types.ts
View File

@ -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>

24
src/uni_modules/wot-design-uni/components/wd-sidebar/wd-sidebar.vue
View File

@ -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 })
}