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

fix: 🐛 修复 Collapse 使用 toggleAall 方法时不会触发 before-expand 钩子的问题 (#727)

Browse Source
This commit is contained in:
不如摸鱼去 2024-11-23 11:45:43 +08:00 committed by GitHub
parent 4bf8d1e300
commit 02aa5ceb78
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 305 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
docs/component/collapse.md
View File

@ -54,20 +54,13 @@ const value = ref<string[]>(['item1'])
```html ```html
<wd-collapse v-model="value"> <wd-collapse v-model="value">
<wd-collapse-item <wd-collapse-item v-for="(item, index) in itemList" :before-expend="beforeExpend" :key="index" :title="item.title" :name="item.name">
v-for="(item, index) in itemList"
:before-expend="beforeExpend"
:key="index"
:title="item.title"
:name="item.name"
>
{{ item.body }} {{ item.body }}
</wd-collapse-item> </wd-collapse-item>
</wd-collapse> </wd-collapse>
``` ```
```ts ```ts
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'
const toast = useToast() const toast = useToast()
const value = ref<string[]>(['item1']) const value = ref<string[]>(['item1'])
@ -152,14 +145,60 @@ Collapse 查看更多的模式下，可以使用插槽定义自己想要的折
</wd-collapse> </wd-collapse>
``` ```
## 嵌套使用
`collapse`可以嵌套使用，同时由于`collapse-item`的内容容器存在默认的`padding`，所以嵌套的`collapse`需要设置`custom-body-style`或者`custom-body-class`来覆盖默认样式。
***以下为示例，也可以自行调整样式。***
:::tip 注意
`custom-body-style`和`custom-body-class`在`$LOWEST_VERSION$`及以上版本支持。
:::
```html
<view class="collapse">
<wd-collapse v-model="collapseRoot">
<wd-collapse-item custom-body-style="padding:0 0 0 14px" v-for="item in 5" :key="item" :title="`标签${item}`" :name="`${item}`">
<wd-collapse v-model="collapseList[item - 1]">
<wd-collapse-item
v-for="(item, index) in itemList"
:custom-class="index === 0 ? 'no-border' : ''"
:key="index"
:title="item.title"
:name="item.name"
>
{{ item.body }}
</wd-collapse-item>
</wd-collapse>
</wd-collapse-item>
</wd-collapse>
</view>
```
```css
.collapse {
:deep() {
.no-border {
&::after {
display: none;
}
}
}
}
```
```ts
const collapseRoot = ref<string[]>(['0'])
const collapseList = ref<Array<string[]>>([['item1'], ['item2'], ['item3'], ['item4'], ['item5']])
```
## CollapseItem Attributes ## CollapseItem Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ------------- | ----------------------------------------------------------- | -------- | ------ | ------ | -------- | | ------------- | ----------------------------------------------------------- | -------- | ------ | ------ | -------- |
| name | 折叠栏的标识符 | string | - | - | - | | name | 折叠栏的标识符 | string | - | - | - |
| title | 折叠栏的标题, 支持同名 slot 自定义内容 | string | - | '' | - | | title | 折叠栏的标题, 支持同名 slot 自定义内容 | string | - | '' | - |
| disabled | 禁用折叠栏 | boolean | - | false | - | | disabled | 禁用折叠栏 | boolean | - | false | - |
| before-expend | 打开前的回调函数，返回 false 可以阻止打开，支持返回 Promise | Function | - | false | - | | before-expend | 打开前的回调函数，返回 false 可以阻止打开，支持返回 Promise | Function | - | - | - |
### `before-expend` 执行时会传递以下回调参数： ### `before-expend` 执行时会传递以下回调参数：
@ -185,24 +224,62 @@ Collapse 查看更多的模式下，可以使用插槽定义自己想要的折
## Methods ## Methods
| 方法名 | 说明 | 参数 | 最低版本 | | 方法名 | 说明 | 参数 | 最低版本 |
| --- | --- | --- | --- | | --------- | -------------------------------------------------------------------------------- | ------------------------------------ | -------- |
| toggleAll | 切换所有面板展开状态，传 `true` 为全部展开，`false` 为全部收起，不传参为全部切换 | _options?: boolean \| object_ | 0.2.6 | | toggleAll | 切换所有面板展开状态，传 `true` 为全部展开，`false` 为全部收起，不传参为全部切换 | `options?: CollapseToggleAllOptions` | 0.2.6 |
### CollapseToggleAllOptions 参数说明
| 参数名 | 说明 | 类型 | 默认值 |
| ------------ | ----------------------------------- | ------- | ------ |
| expanded | 是否展开，true 为展开，false 为收起 | boolean | - |
| skipDisabled | 是否跳过禁用项 | boolean | false |
### toggleAll 方法示例
```html
<wd-collapse ref="collapse">...</wd-collapse>
```
```ts
import { ref } from 'vue'
import type { CollapseInstance } from '@/uni_modules/wot-design-uni/components/wd-collapse/types'
const collapseRef = ref<CollapseInstance>()
// 全部切换
collapseRef.value?.toggleAll()
// 全部展开
collapseRef.value?.toggleAll(true)
// 全部收起
collapseRef.value?.toggleAll(false)
// 全部全部切换，并跳过禁用项
collapseRef.value?.toggleAll({
skipDisabled: true
})
// 全部选中，并跳过禁用项
collapseRef.value?.toggleAll({
expanded: true,
skipDisabled: true
})
```
## Collapse Slot ## Collapse Slot
| name | 说明 | 最低版本 | | name | 说明 | 最低版本 |
| ---- | ---------------------------------------------------- | -------- | | ----- | ---------------------------------------------------- | -------- |
| title |标题，便于开发者自定义标题（非 viewmore 使用） | 1.2.27 | | title | 标题，便于开发者自定义标题（非 viewmore 使用） | 1.2.27 |
| more | 查看更多，便于开发者自定义查看更多类型的展开收起样式 | - | | more | 查看更多，便于开发者自定义查看更多类型的展开收起样式 | - |
## CollapseItem 外部样式类 ## CollapseItem 外部样式类
| 类名 | 说明 | 最低版本 | | 类名 | 说明 | 最低版本 |
| ------------ | ----------------------- | -------- | | ----------------- | ------------------------------ | ---------------- |
| custom-class | collapseItem 根节点样式 | - | | custom-class | collapseItem 根节点样式 | - |
| custom-body-style | 自定义折叠面板内容容器的样式 | $LOWEST_VERSION$ |
| custom-body-class | 自定义折叠面板内容容器的样式类 | $LOWEST_VERSION$ |
**注意：组件内插槽样式不生效，因此使用插槽时需注意添加外部样式类**
## Collapse 外部样式类 ## Collapse 外部样式类

227
src/pages/collapse/Index.vue
View File

@ -1,94 +1,107 @@
<template> <template>
<page-wraper> <view class="collapse">
<wd-toast></wd-toast> <page-wraper>
<demo-block title="toggleAll">
<wd-button custom-class="custom-button" type="info" @click="collapse?.toggleAll()">全部切换</wd-button>
<wd-button custom-class="custom-button" type="success" @click="collapse?.toggleAll(true)">全部展开</wd-button>
<wd-button custom-class="custom-button" type="primary" @click="collapse?.toggleAll(false)">全部收起</wd-button>
<wd-button custom-class="custom-button" type="warning" @click="collapse?.toggleAll({ skipDisabled: true })">全部切换跳过禁用</wd-button>
<wd-button custom-class="custom-button" type="error" @click="collapse?.toggleAll({ expanded: true, skipDisabled: true })">
全部选中跳过禁用
</wd-button>
</demo-block>
<demo-block title="基础用法" transparent>
<wd-collapse ref="collapse" v-model="value1" @change="handleChange1">
<wd-collapse-item
:disabled="item.disabled"
v-for="(item, index) in itemList"
:before-expend="index === 2 ? beforeExpend : undefined"
:key="index"
:title="item.title"
:name="item.name"
>
{{ item.body }}
</wd-collapse-item>
</wd-collapse>
</demo-block>
<demo-block title="toggleAll" transparent> <demo-block title="自定义title" transparent>
<wd-button @click="collapse?.toggleAll()">toggleAll</wd-button> <wd-collapse v-model="value7">
</demo-block> <wd-collapse-item name="item1">
<demo-block title="基础用法" transparent> <template #title="{ expanded }">
<wd-collapse ref="collapse" v-model="value1" @change="handleChange1"> <text style="color: red">通过 slot 自定义标题</text>
<wd-collapse-item <text>{{ expanded ? '我展开了' : '我已收起' }}</text>
v-for="(item, index) in itemList" </template>
:before-expend="index === 2 ? beforeExpend : undefined" {{ desc7 }}
:key="index" </wd-collapse-item>
:title="item.title" <wd-collapse-item name="item2" disabled>
:name="item.name" <template #title="{ expanded, disabled }">
> <text v-if="disabled">被禁用</text>
{{ item.body }} <text style="color: red" v-else>通过 slot 自定义 title</text>
</wd-collapse-item> <text>{{ expanded ? '我展开了' : '我已收起' }}</text>
</wd-collapse> </template>
</demo-block> {{ desc7 }}
</wd-collapse-item>
</wd-collapse>
</demo-block>
<demo-block title="自定义title" transparent> <demo-block title="手风琴" transparent>
<wd-collapse v-model="value7"> <wd-collapse v-model="value2" :accordion="accordion" @change="handleChange2">
<wd-collapse-item name="item1"> <wd-collapse-item title="标签1" name="item1">这是一条简单的示例文字。</wd-collapse-item>
<template #title="{ expanded }"> <wd-collapse-item title="标签2" name="item2">
<text style="color: red">通过 slot 自定义标题</text> 这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。
<text>{{ expanded ? '我展开了' : '我已收起' }}</text> </wd-collapse-item>
</template> <wd-collapse-item title="标签3" name="item3">这是一条简单的示例文字。</wd-collapse-item>
{{ desc7 }} </wd-collapse>
</wd-collapse-item> </demo-block>
<wd-collapse-item name="item2" disabled> <demo-block title="禁用" transparent>
<template #title="{ expanded, disabled }"> <wd-collapse v-model="value3" @change="handleChange3">
<text v-if="disabled">被禁用</text> <wd-collapse-item title="标签1" name="item1">
<text style="color: red" v-else>通过 slot 自定义 title</text> 这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。
<text>{{ expanded ? '我展开了' : '我已收起' }}</text> </wd-collapse-item>
</template> <wd-collapse-item title="标签2" name="item2" disabled>这是一条简单的示例文字。</wd-collapse-item>
{{ desc7 }} <wd-collapse-item title="标签3" name="item3">这是一条简单的示例文字。</wd-collapse-item>
</wd-collapse-item> </wd-collapse>
</wd-collapse> </demo-block>
</demo-block>
<demo-block title="手风琴" transparent> <demo-block title="嵌套" transparent>
<wd-collapse v-model="value2" :accordion="accordion" @change="handleChange2"> <wd-collapse v-model="collapseRoot" @change="handleChange1">
<wd-collapse-item title="标签1" name="item1">这是一条简单的示例文字。</wd-collapse-item> <wd-collapse-item custom-body-style="padding:0 0 0 14px" v-for="item in 5" :key="item" :title="`标签${item}`" :name="`${item}`">
<wd-collapse-item title="标签2" name="item2"> <wd-collapse v-model="collapseList[item - 1]">
<wd-collapse-item
:custom-class="index === 0 ? 'no-border' : ''"
v-for="(item, index) in itemList"
:key="index"
:title="item.title"
:name="item.name"
>
{{ item.body }}
</wd-collapse-item>
</wd-collapse>
</wd-collapse-item>
</wd-collapse>
</demo-block>
<demo-block title="查看更多" transparent>
<wd-collapse viewmore v-model="value4" @change="handleChange4">
这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。 这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。
</wd-collapse-item> </wd-collapse>
<wd-collapse-item title="标签3" name="item3">这是一条简单的示例文字。</wd-collapse-item> </demo-block>
</wd-collapse> <demo-block title="查看更多-行数显示设置" transparent>
</demo-block> <wd-collapse viewmore v-model="value5" @change="handleChange5" :line-num="3">
<demo-block title="禁用" transparent> 行数显示设置：这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。
<wd-collapse v-model="value3" @change="handleChange3"> </wd-collapse>
<wd-collapse-item title="标签1" name="item1"> </demo-block>
这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。 <demo-block title="查看更多-具名插槽" transparent>
</wd-collapse-item> <wd-collapse viewmore v-model="value6" @change="handleChange6" use-more-slot custom-more-slot-class="more-slot">
<wd-collapse-item title="标签2" name="item2" disabled>这是一条简单的示例文字。</wd-collapse-item> 具名插槽：这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。
<wd-collapse-item title="标签3" name="item3">这是一条简单的示例文字。</wd-collapse-item> <template #more>
</wd-collapse> <view>显示全部</view>
</demo-block> </template>
</wd-collapse>
<demo-block title="嵌套" transparent> </demo-block>
<wd-collapse v-model="collapseRoot" @change="handleChange1"> </page-wraper>
<wd-collapse-item v-for="item in 5" :key="item" :title="`标签${item}`" :name="`${item}`"> </view>
<wd-collapse v-model="collapseList[item - 1]">
<wd-collapse-item v-for="(item, index) in itemList" :key="index" :title="item.title" :name="item.name">
{{ item.body }}
</wd-collapse-item>
</wd-collapse>
</wd-collapse-item>
</wd-collapse>
</demo-block>
<demo-block title="查看更多" transparent>
<wd-collapse viewmore v-model="value4" @change="handleChange4">
这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。
</wd-collapse>
</demo-block>
<demo-block title="查看更多-行数显示设置" transparent>
<wd-collapse viewmore v-model="value5" @change="handleChange5" :line-num="3">
行数显示设置：这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。
</wd-collapse>
</demo-block>
<demo-block title="查看更多-具名插槽" transparent>
<wd-collapse viewmore v-model="value6" @change="handleChange6" use-more-slot custom-more-slot-class="more-slot">
具名插槽：这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。
<template #more>
<view>显示全部</view>
</template>
</wd-collapse>
</demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'
@ -105,7 +118,8 @@ const itemList = ref<Record<string, any>[]>([
{ {
title: '标签2', title: '标签2',
name: 'item2', name: 'item2',
body: '一般情况下，买家只能向商户申请退款，商户确认可以退款后，可以通过接口或者商户平台向微信支付发起退款申请。' body: '一般情况下，买家只能向商户申请退款，商户确认可以退款后，可以通过接口或者商户平台向微信支付发起退款申请。',
disabled: true
}, },
{ {
title: '标签3', title: '标签3',
@ -161,27 +175,6 @@ function handleChange7({ value }: any) {
console.log(value) console.log(value)
} }
/**
function handleChange1({ value }: any) {
console.log(value)
}
function handleChange2({ value }: any) {
console.log(value)
}
function handleChange3({ value }: any) {
console.log(value)
}
function handleChange4({ value }: any) {
console.log(value)
}
function handleChange5({ value }: any) {
console.log(value)
}
function handleChange6({ value }: any) {
console.log(value)
}
/** /**
* 折叠面板展开前回调方法 * 折叠面板展开前回调方法
* @param e * @param e
@ -205,7 +198,21 @@ function beforeExpend(name: string) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.more-slot) { .collapse {
color: red; :deep(.more-slot) {
color: red;
}
:deep(.custom-button) {
margin-right: 16px;
margin-bottom: 16px;
}
:deep() {
.no-border {
&::after {
display: none;
}
}
}
} }
</style> </style>

2
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
View File

@ -270,7 +270,7 @@ $-checkbox-button-disabled-border: var(--wot-checkbox-button-disabled-border, rg
/* collapse */ /* collapse */
$-collapse-side-padding: var(--wot-collapse-side-padding, $-size-side-padding) !default; // 左右间距 $-collapse-side-padding: var(--wot-collapse-side-padding, $-size-side-padding) !default; // 左右间距
$-collapse-body-padding: var(--wot-collapse-body-padding, 14px 25px) !default; // body padding $-collapse-body-padding: var(--wot-collapse-body-padding, 14px $-size-side-padding) !default; // body padding
$-collapse-header-padding: var(--wot-collapse-header-padding, 13px $-size-side-padding) !default; // 头部padding $-collapse-header-padding: var(--wot-collapse-header-padding, 13px $-size-side-padding) !default; // 头部padding
$-collapse-title-color: var(--wot-collapse-title-color, rgba(0, 0, 0, 0.85)) !default; // 标题颜色 $-collapse-title-color: var(--wot-collapse-title-color, rgba(0, 0, 0, 0.85)) !default; // 标题颜色
$-collapse-title-fs: var(--wot-collapse-title-fs, 16px) !default; // 标题字号 $-collapse-title-fs: var(--wot-collapse-title-fs, 16px) !default; // 标题字号

5
src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss
View File

@ -39,6 +39,11 @@
padding: $-collapse-header-padding; padding: $-collapse-header-padding;
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
@include when(expanded) {
@include halfPixelBorder('bottom');
}
} }
@include e(title) { @include e(title) {

11
src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts
View File

@ -1,10 +1,18 @@
import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue' import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
import { baseProps, makeBooleanProp, makeRequiredProp, makeStringProp } from '../common/props' import { baseProps, makeBooleanProp, makeRequiredProp, makeStringProp } from '../common/props'
export type CollapseItemBeforeExpand = (name: string) => void export type CollapseItemBeforeExpand = (name: string) => boolean | Promise<unknown>
export const collapseItemProps = { export const collapseItemProps = {
...baseProps, ...baseProps,
/**
* 自定义折叠栏内容容器样式类名
*/
customBodyClass: makeStringProp(''),
/**
* 自定义折叠栏内容容器样式
*/
customBodyStyle: makeStringProp(''),
/** /**
* 折叠栏的标题, 可通过 slot 传递自定义内容 * 折叠栏的标题, 可通过 slot 传递自定义内容
*/ */
@ -33,7 +41,6 @@ export type CollapseItemExpose = {
getExpanded: () => boolean getExpanded: () => boolean
/** /**
* 更新展开状态 * 更新展开状态
* @returns Promise<void>
*/ */
updateExpand: () => Promise<void> updateExpand: () => Promise<void>
} }

97
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue
View File

@ -1,13 +1,16 @@
<template> <template>
<view :class="`wd-collapse-item ${disabled ? 'is-disabled' : ''} is-border ${customClass}`" :style="customStyle"> <view :class="`wd-collapse-item ${disabled ? 'is-disabled' : ''} is-border ${customClass}`" :style="customStyle">
<view :class="`wd-collapse-item__header ${isFirst ? 'wd-collapse-item__header-first' : ''}`" @click="handleClick"> <view
:class="`wd-collapse-item__header ${expanded ? 'is-expanded' : ''} ${isFirst ? 'wd-collapse-item__header-first' : ''}`"
@click="handleClick"
>
<slot name="title" :expanded="expanded" :disabled="disabled" :isFirst="isFirst"> <slot name="title" :expanded="expanded" :disabled="disabled" :isFirst="isFirst">
<text class="wd-collapse-item__title">{{ title }}</text> <text class="wd-collapse-item__title">{{ title }}</text>
<wd-icon name="arrow-down" :custom-class="`wd-collapse-item__arrow ${expanded ? 'is-retract' : ''}`" /> <wd-icon name="arrow-down" :custom-class="`wd-collapse-item__arrow ${expanded ? 'is-retract' : ''}`" />
</slot> </slot>
</view> </view>
<view class="wd-collapse-item__wrapper" :style="contentStyle" @transitionend="handleTransitionEnd"> <view class="wd-collapse-item__wrapper" :style="contentStyle" @transitionend="handleTransitionEnd">
<view class="wd-collapse-item__body" :id="collapseId"> <view class="wd-collapse-item__body" :class="customBodyClass" :style="customBodyStyle" :id="collapseId">
<slot /> <slot />
</view> </view>
</view> </view>
@ -26,8 +29,8 @@ export default {
<script lang="ts" setup> <script lang="ts" setup>
import wdIcon from '../wd-icon/wd-icon.vue' import wdIcon from '../wd-icon/wd-icon.vue'
import { computed, getCurrentInstance, onMounted, ref, watch, type CSSProperties } from 'vue' import { computed, getCurrentInstance, onMounted, ref, type CSSProperties } from 'vue'
import { addUnit, getRect, isArray, isDef, isPromise, objToStyle, requestAnimationFrame, uuid } from '../common/util' import { addUnit, getRect, isArray, isDef, isPromise, isString, objToStyle, requestAnimationFrame, uuid } from '../common/util'
import { useParent } from '../composables/useParent' import { useParent } from '../composables/useParent'
import { COLLAPSE_KEY } from '../wd-collapse/types' import { COLLAPSE_KEY } from '../wd-collapse/types'
import { collapseItemProps, type CollapseItemExpose } from './types' import { collapseItemProps, type CollapseItemExpose } from './types'
@ -66,33 +69,37 @@ const contentStyle = computed(() => {
return objToStyle(style) return objToStyle(style)
}) })
const selected = computed(() => { /**
if (collapse) { * 是否选中
return collapse.props.modelValue */
} else { const isSelected = computed(() => {
return [] const modelValue = collapse ? collapse?.props.modelValue || [] : []
} const { name } = props
return (isString(modelValue) && modelValue === name) || (isArray(modelValue) && modelValue.indexOf(name as string) >= 0)
}) })
onMounted(() => { onMounted(() => {
updateExpand() updateExpand(isSelected.value)
}) })
function updateExpand() { async function updateExpand(useBeforeExpand: boolean = true) {
return getRect(`#${collapseId.value}`, false, proxy).then((rect) => { try {
if (useBeforeExpand) {
await handleBeforeExpand()
}
initRect()
} catch (error) {
/* empty */
}
}
function initRect() {
getRect(`#${collapseId.value}`, false, proxy).then((rect) => {
const { height: rectHeight } = rect const { height: rectHeight } = rect
height.value = isDef(rectHeight) ? Number(rectHeight) : '' height.value = isDef(rectHeight) ? Number(rectHeight) : ''
const name = props.name
requestAnimationFrame(() => { requestAnimationFrame(() => {
if (isDef(selected.value)) { if (isSelected.value) {
if ( expanded.value = true
(typeof selected.value === 'string' && selected.value === name) ||
(isArray(selected.value) && selected.value.indexOf(name as string) >= 0)
) {
expanded.value = true
} else {
expanded.value = false
}
} else { } else {
expanded.value = false expanded.value = false
} }
@ -110,40 +117,44 @@ function handleTransitionEnd() {
} }
// 点击子项 // 点击子项
function handleClick() { async function handleClick() {
if (props.disabled) return if (props.disabled) return
let name = props.name try {
const nexexpanded = !expanded.value // 执行后展开状态 await updateExpand()
if (nexexpanded) { const { name } = props
if (props.beforeExpend) { collapse && collapse.toggle(name, !expanded.value)
const response: any = props.beforeExpend(name) } catch (error) {
/* empty */
}
}
/**
* 展开前钩子
*/
function handleBeforeExpand() {
return new Promise<void>((resolve, reject) => {
const { name } = props
const nextexpanded = !expanded.value
if (nextexpanded && props.beforeExpend) {
const response = props.beforeExpend(name)
if (!response) { if (!response) {
return reject()
} }
if (isPromise(response)) { if (isPromise(response)) {
response.then(() => { response.then(() => resolve()).catch(reject)
handleChangeExpand(name)
})
} else { } else {
handleChangeExpand(name) resolve()
} }
} else { } else {
handleChangeExpand(name) resolve()
} }
} else { })
handleChangeExpand(name)
}
} }
function getExpanded() { function getExpanded() {
return expanded.value return expanded.value
} }
function handleChangeExpand(name: string) {
updateExpand()
collapse && collapse.toggle(name, !expanded.value)
}
defineExpose<CollapseItemExpose>({ getExpanded, updateExpand }) defineExpose<CollapseItemExpose>({ getExpanded, updateExpand })
</script> </script>

2
src/uni_modules/wot-design-uni/components/wd-collapse/types.ts
View File

@ -52,7 +52,7 @@ export type CollapseExpose = {
* 切换所有面板展开状态，传 true 为全部展开，false 为全部收起，不传参为全部切换 * 切换所有面板展开状态，传 true 为全部展开，false 为全部收起，不传参为全部切换
* @param options 面板状态 * @param options 面板状态
*/ */
toggleAll: (options?: boolean | CollapseToggleAllOptions) => void toggleAll: (options?: CollapseToggleAllOptions) => void
} }
export type CollapseInstance = ComponentPublicInstance<CollapseProps, CollapseExpose> export type CollapseInstance = ComponentPublicInstance<CollapseProps, CollapseExpose>

31
src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue
View File

@ -45,7 +45,7 @@ import wdIcon from '../wd-icon/wd-icon.vue'
import { onBeforeMount, ref, watch } from 'vue' import { onBeforeMount, ref, watch } from 'vue'
import { COLLAPSE_KEY, collapseProps, type CollapseExpose, type CollapseToggleAllOptions } from './types' import { COLLAPSE_KEY, collapseProps, type CollapseExpose, type CollapseToggleAllOptions } from './types'
import { useChildren } from '../composables/useChildren' import { useChildren } from '../composables/useChildren'
import { isArray, isDef } from '../common/util' import { isArray, isBoolean, isDef } from '../common/util'
import { useTranslate } from '../composables/useTranslate' import { useTranslate } from '../composables/useTranslate'
const props = defineProps(collapseProps) const props = defineProps(collapseProps)
@ -94,10 +94,22 @@ function updateChange(activeNames: string | string[] | boolean) {
}) })
} }
function toggle(name: string, expanded: boolean) { // 更新全部自组件展开状态
const updateChildren = async () => {
for (const item of children) {
try {
await item.$.exposed!.updateExpand()
} catch (error) {
console.warn(`更新折叠面板状态失败: ${error}`)
}
}
}
async function toggle(name: string, expanded: boolean) {
const { accordion, modelValue } = props const { accordion, modelValue } = props
if (accordion) { if (accordion) {
updateChange(name === modelValue ? '' : name) updateChange(name === modelValue ? '' : name)
await updateChildren()
} else if (expanded) { } else if (expanded) {
updateChange((modelValue as string[]).concat(name)) updateChange((modelValue as string[]).concat(name))
} else { } else {
@ -109,30 +121,27 @@ function toggle(name: string, expanded: boolean) {
* 切换所有面板展开状态，传 true 为全部展开，false 为全部收起，不传参为全部切换 * 切换所有面板展开状态，传 true 为全部展开，false 为全部收起，不传参为全部切换
* @param options 面板状态 * @param options 面板状态
*/ */
const toggleAll = (options: boolean | CollapseToggleAllOptions = {}) => { const toggleAll = async (options: CollapseToggleAllOptions = {}) => {
if (props.accordion) { if (props.accordion) {
return return
} }
if (typeof options === 'boolean') { if (isBoolean(options)) {
options = { expanded: options } options = { expanded: options }
} }
const { expanded, skipDisabled } = options const { expanded, skipDisabled } = options
const names: string[] = [] const names: string[] = []
children.forEach((item, index) => {
children.forEach((item, index: number) => {
if (item.disabled && skipDisabled) { if (item.disabled && skipDisabled) {
if (item.$.exposed!.getExpanded()) { if (item.$.exposed!.getExpanded()) {
names.push(item.name || index) names.push(item.name || index)
} }
} else { } else if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) {
item.$.exposed!.updateExpand() names.push(item.name || index)
if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) {
names.push(item.name || index)
}
} }
}) })
updateChange(names) updateChange(names)
await updateChildren()
} }
/** /**