diff --git a/docs/component/sidebar.md b/docs/component/sidebar.md index 92918924..4a8356cf 100644 --- 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 + + + + + +``` +```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(1) + +const beforeChange: SidebarBeforeChange = ({ value, resolve }) => { + showLoading('切换中') + setTimeout(() => { + closeLoading() + resolve(true) + }, 2000) +} +``` + + ## 锚点用法示例 -sidebar组件的锚点用法可以帮助用户在长页面上快速导航到特定的部分。 +sidebar 组件的锚点用法可以帮助用户在长页面上快速导航到特定的部分。 ::: details 查看锚点用法示例 ::: code-group -``` html [vue] - - - - - - - - - - - - - + +```html [vue] + + + + + + + + + + + + + ``` ```typescript [typescript] @@ -179,45 +210,47 @@ function onScroll(e) { background: #fff; } ``` + ::: ## 切换页面用法示例 -sidebar组件在每次切换激活项时，跳转到指定的页面，且无法通过滚动导航到下一个sidebar项。 +sidebar 组件在每次切换激活项时，跳转到指定的页面，且无法通过滚动导航到下一个 sidebar 项。 ::: details 查看切换页面用法示例 ::: code-group -``` html [vue] - - - - - - - - - - - - - - + +```html [vue] + + + + + + + + + + + + + + ``` ```typescript [typescript] @@ -307,6 +340,7 @@ function handleChange({ value }) { height: 100%; } ``` + ::: ## 自定义图标用法示例 @@ -315,21 +349,22 @@ function handleChange({ value }) { ::: details 自定义图标用法示例 ::: code-group -``` html [vue] - - - - - - - - - - - - - + +```html [vue] + + + + + + + + + + + + + ``` ```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 index 16ff09c5..0690b74c 100644 --- a/src/pages/sidebar/Index.vue +++ b/src/pages/sidebar/Index.vue @@ -1,10 +1,10 @@