Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 🐛 修复 Collapse v-model绑定数据变化时未更新折叠面板状态的问题 #744

Merged
merged 1 commit into from
Nov 28, 2024
Merged

fix: 🐛 修复 Collapse v-model绑定数据变化时未更新折叠面板状态的问题 #744

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default {

<script lang="ts" setup>
import wdIcon from '../wd-icon/wd-icon.vue'
import { computed, getCurrentInstance, onMounted, ref, type CSSProperties } from 'vue'
import { computed, getCurrentInstance, onMounted, ref, watch, type CSSProperties } from 'vue'
import { addUnit, getRect, isArray, isDef, isPromise, isString, objToStyle, requestAnimationFrame, uuid } from '../common/util'
import { useParent } from '../composables/useParent'
import { COLLAPSE_KEY } from '../wd-collapse/types'
Expand Down Expand Up @@ -80,6 +80,13 @@ const isSelected = computed(() => {
return (isString(modelValue) && modelValue === name) || (isArray(modelValue) && modelValue.indexOf(name as string) >= 0)
})

watch(
() => isSelected.value,
(newVal) => {
updateExpand(newVal)
}
)

onMounted(() => {
updateExpand(isSelected.value)
})
Expand Down
19 changes: 3 additions & 16 deletions src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ watch(
console.error('value must be Array')
}
},
{ deep: true, immediate: true }
{ deep: true }
)

watch(
Expand All @@ -94,22 +94,10 @@ function updateChange(activeNames: string | string[] | 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) {
function toggle(name: string, expanded: boolean) {
const { accordion, modelValue } = props
if (accordion) {
updateChange(name === modelValue ? '' : name)
await updateChildren()
} else if (expanded) {
updateChange((modelValue as string[]).concat(name))
} else {
Expand All @@ -121,7 +109,7 @@ async function toggle(name: string, expanded: boolean) {
* 切换所有面板展开状态，传 true 为全部展开，false 为全部收起，不传参为全部切换
* @param options 面板状态
*/
const toggleAll = async (options: CollapseToggleAllOptions = {}) => {
const toggleAll = (options: CollapseToggleAllOptions = {}) => {
if (props.accordion) {
return
}
Expand All @@ -141,7 +129,6 @@ const toggleAll = async (options: CollapseToggleAllOptions = {}) => {
}
})
updateChange(names)
await updateChildren()
}

/**
Expand Down