fix: omit value property of isHydrated in template (#681)

This commit is contained in:
三咲智子 Kevin Deng 2023-01-02 04:43:09 +08:00 committed by GitHub
parent 64611083a5
commit 645da2f945
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 15 additions and 19 deletions

View file

@ -31,11 +31,11 @@ const toggleApply = () => {
v-if="removable"
:aria-label="$t('attachment.remove_label')"
hover:bg="gray/40" transition-100 p-1 rounded-5 cursor-pointer
:class="[isHydrated.value && isSmallScreen ? '' : 'op-0 group-hover:op-100hover:']"
:class="[isHydrated && isSmallScreen ? '' : 'op-0 group-hover:op-100hover:']"
mix-blend-difference
@click="$emit('remove')"
>
<div i-ri:close-line text-3 :class="[isHydrated.value && isSmallScreen ? 'text-6' : 'text-3']" />
<div i-ri:close-line text-3 :class="[isHydrated && isSmallScreen ? 'text-6' : 'text-3']" />
</div>
</div>
<div absolute right-2 bottom-2>

View file

@ -1,14 +1,8 @@
export const isHydrated = computed(() => {
if (process.server)
return { value: false }
export const isHydrated = ref(false)
if (!process.server) {
const nuxtApp = useNuxtApp()
if (!nuxtApp.isHydrating)
return { value: false }
const hydrated = ref(false)
nuxtApp.hooks.hookOnce('app:suspense:resolve', () => {
hydrated.value = true
isHydrated.value = true
})
return hydrated
})
}

View file

@ -45,8 +45,8 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
<slot />
</div>
<div sm:hidden sticky left-0 right-0 bottom-0 z-10 bg-base pb="[env(safe-area-inset-bottom)]" transition="padding 20">
<CommonOfflineChecker :small-screen="isHydrated.value" />
<NavBottom v-if="isHydrated.value" />
<CommonOfflineChecker :small-screen="isHydrated" />
<NavBottom v-if="isHydrated" />
</div>
</div>
<aside v-if="!wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide">

View file

@ -13,7 +13,7 @@ useHeadFixed({
</script>
<template>
<CommonAlert v-if="isHydrated.value && !hideNewsTips" @close="hideNewsTips = true">
<CommonAlert v-if="isHydrated && !hideNewsTips" @close="hideNewsTips = true">
<p>{{ $t('tooltip.explore_posts_intro') }}</p>
</CommonAlert>
<!-- TODO: Tabs for trending statuses, tags, and links -->

View file

@ -13,7 +13,7 @@ useHeadFixed({
</script>
<template>
<CommonAlert v-if="isHydrated.value && !hideNewsTips" @close="hideNewsTips = true">
<CommonAlert v-if="isHydrated && !hideNewsTips" @close="hideNewsTips = true">
<p>{{ $t('tooltip.explore_links_intro') }}</p>
</CommonAlert>

View file

@ -22,7 +22,7 @@ useHeadFixed({
</script>
<template>
<CommonAlert v-if="isHydrated.value && !hideTagsTips && data && data.length" @close="hideTagsTips = true">
<CommonAlert v-if="isHydrated && !hideTagsTips && data && data.length" @close="hideTagsTips = true">
<p>{{ $t('tooltip.explore_tags_intro') }}</p>
</CommonAlert>

View file

@ -21,8 +21,8 @@ const isRootPath = computedEager(() => route.name === 'settings')
</template>
<div xl:w-97 lg:w-78 w-full>
<SettingsNavItem
v-show="currentUser"
:command="!!currentUser"
v-if="isHydrated && currentUser "
command
icon="i-ri:user-line"
:text="$t('settings.profile.label')"
to="/settings/profile"

View file

@ -69,6 +69,7 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
<!-- banner -->
<div of-hidden bg="gray-500/20" aspect="3">
<CommonInputImage
v-if="isHydrated"
ref="elInputImage"
v-model="form.header"
:original="onlineSrc.header"
@ -80,6 +81,7 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
<!-- avatar -->
<div px-4>
<CommonInputImage
v-if="isHydrated"
v-model="form.avatar"
:original="onlineSrc.avatar"
mt--10