renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: refactor code when v-if & v-for are used together

Browse Source
This commit is contained in:
Hakadao
2023-10-15 00:55:12 +08:00
parent 1a5f33dbe7
commit 9aad900450
2 changed files with 43 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/contentScripts/views/Home/components/Following.vue
View File

@@ -100,29 +100,31 @@ function jumpToLoginPage() {
/>
<!-- skeleton -->
<template v-for="item in 30" :key="item">
<div
v-if="isLoading"
mb-8 pointer-events-none select-none
>
<div aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
<div flex mt-4>
<div m="r-4" w="40px" h="40px" rounded="1/2" bg="$bew-fill-4" shrink-0 />
<div w-full>
<div grid gap-2>
<div w-full h-5 bg="$bew-fill-3" />
<div w="3/4" h-5 bg="$bew-fill-3" />
</div>
<div grid gap-2 mt-4>
<div w="50%" h-4 bg="$bew-fill-2" />
<div w="80%" h-4 bg="$bew-fill-2" />
</div>
<div text="transparent sm" inline-block mt-4 p="x-2 y-1" bg="$bew-fill-1" rounded-4>
hello world
<template v-if="isLoading">
<template v-for="item in 30" :key="item">
<div
mb-8 pointer-events-none select-none
>
<div aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
<div flex mt-4>
<div m="r-4" w="40px" h="40px" rounded="1/2" bg="$bew-fill-4" shrink-0 />
<div w-full>
<div grid gap-2>
<div w-full h-5 bg="$bew-fill-3" />
<div w="3/4" h-5 bg="$bew-fill-3" />
</div>
<div grid gap-2 mt-4>
<div w="50%" h-4 bg="$bew-fill-2" />
<div w="80%" h-4 bg="$bew-fill-2" />
</div>
<div text="transparent sm" inline-block mt-4 p="x-2 y-1" bg="$bew-fill-1" rounded-4>
hello world
</div>
</div>
</div>
</div>
</div>
</template>
</template>
</div>

42
src/contentScripts/views/Home/components/ForYou.vue
View File

@@ -181,29 +181,30 @@ function jumpToLoginPage() {
</template>
<!-- skeleton -->
<template v-for="item in 30" :key="item">
<div
v-if="isLoading"
mb-8 pointer-events-none select-none
>
<div aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
<div flex mt-4>
<div m="r-4" w="40px" h="40px" rounded="1/2" bg="$bew-fill-4" shrink-0 />
<div w-full>
<div grid gap-2>
<div w-full h-5 bg="$bew-fill-3" />
<div w="3/4" h-5 bg="$bew-fill-3" />
</div>
<div grid gap-2 mt-4>
<div w="50%" h-4 bg="$bew-fill-2" />
<div w="80%" h-4 bg="$bew-fill-2" />
</div>
<div text="transparent sm" inline-block mt-4 p="x-2 y-1" bg="$bew-fill-1" rounded-4>
hello world
<template v-if="isLoading">
<template v-for="item in 30" :key="item">
<div
mb-8 pointer-events-none select-none
>
<div aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
<div flex mt-4>
<div m="r-4" w="40px" h="40px" rounded="1/2" bg="$bew-fill-4" shrink-0 />
<div w-full>
<div grid gap-2>
<div w-full h-5 bg="$bew-fill-3" />
<div w="3/4" h-5 bg="$bew-fill-3" />
</div>
<div grid gap-2 mt-4>
<div w="50%" h-4 bg="$bew-fill-2" />
<div w="80%" h-4 bg="$bew-fill-2" />
</div>
<div text="transparent sm" inline-block mt-4 p="x-2 y-1" bg="$bew-fill-1" rounded-4>
hello world
</div>
</div>
</div>
</div>
</div>
</template>
</template>
</div>
@@ -215,4 +216,3 @@ function jumpToLoginPage() {
<style lang="scss" scoped>
</style>
../types