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