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" v-if="removable"
:aria-label="$t('attachment.remove_label')" :aria-label="$t('attachment.remove_label')"
hover:bg="gray/40" transition-100 p-1 rounded-5 cursor-pointer 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 mix-blend-difference
@click="$emit('remove')" @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> </div>
<div absolute right-2 bottom-2> <div absolute right-2 bottom-2>

View file

@ -1,14 +1,8 @@
export const isHydrated = computed(() => { export const isHydrated = ref(false)
if (process.server)
return { value: false }
if (!process.server) {
const nuxtApp = useNuxtApp() const nuxtApp = useNuxtApp()
if (!nuxtApp.isHydrating)
return { value: false }
const hydrated = ref(false)
nuxtApp.hooks.hookOnce('app:suspense:resolve', () => { 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 /> <slot />
</div> </div>
<div sm:hidden sticky left-0 right-0 bottom-0 z-10 bg-base pb="[env(safe-area-inset-bottom)]" transition="padding 20"> <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" /> <CommonOfflineChecker :small-screen="isHydrated" />
<NavBottom v-if="isHydrated.value" /> <NavBottom v-if="isHydrated" />
</div> </div>
</div> </div>
<aside v-if="!wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide"> <aside v-if="!wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide">

View file

@ -13,7 +13,7 @@ useHeadFixed({
</script> </script>
<template> <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> <p>{{ $t('tooltip.explore_posts_intro') }}</p>
</CommonAlert> </CommonAlert>
<!-- TODO: Tabs for trending statuses, tags, and links --> <!-- TODO: Tabs for trending statuses, tags, and links -->

View file

@ -13,7 +13,7 @@ useHeadFixed({
</script> </script>
<template> <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> <p>{{ $t('tooltip.explore_links_intro') }}</p>
</CommonAlert> </CommonAlert>

View file

@ -22,7 +22,7 @@ useHeadFixed({
</script> </script>
<template> <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> <p>{{ $t('tooltip.explore_tags_intro') }}</p>
</CommonAlert> </CommonAlert>

View file

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

View file

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