yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

fix(theme): fix CardMasonry media query failure (#688)

Browse Source
This commit is contained in:
pengzhanbo 2025-09-10 12:43:27 +08:00 committed by GitHub
parent 3051b5d146
commit 2757301d61
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
theme/src/client/components/global/VPCardMasonry.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import type { VNode } from 'vue'
import { useDebounceFn, useMediaQuery, useResizeObserver } from '@vueuse/core'
import { cloneVNode, computed, markRaw, mergeProps, nextTick, onMounted, shallowRef, useId, watch } from 'vue'
import { cloneVNode, computed, markRaw, mergeProps, nextTick, onMounted, ref, shallowRef, useId, watch } from 'vue'
const props = withDefaults(defineProps<{
cols?: number | { sm?: number, md?: number, lg?: number }
@ -14,6 +14,7 @@ const props = withDefaults(defineProps<{
const slots = defineSlots<{ default: () => VNode[] | null }>()
const uuid = useId()
const columnsLength = ref(3)
const isMd = useMediaQuery('(min-width: 640px)')
const isLg = useMediaQuery('(min-width: 960px)')
@ -26,10 +27,7 @@ const rawList = computed(() => {
)
})
const columnsLength = computed<number>(() => {
if (__VUEPRESS_SSR__)
return 3
function resolveColumnsLength() {
let length = 1
if (typeof props.cols === 'number') {
length = props.cols
@ -43,8 +41,8 @@ const columnsLength = computed<number>(() => {
length = props.cols.sm || 2
}
return Number(length)
})
columnsLength.value = Number(length)
}
const columnsList = shallowRef<VNode[][]>([])
const masonry = shallowRef<HTMLDivElement>()
@ -73,6 +71,8 @@ onMounted(() => {
if (__VUEPRESS_SSR__)
return
watch(() => [isMd.value, isLg.value, props.cols], resolveColumnsLength, { immediate: true })
drawColumns()
const debounceDraw = useDebounceFn(drawColumns)
watch([rawList, columnsLength], debounceDraw, { flush: 'post' })