examples/vue-ts-example
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

feat: 添加 useIntersectionObserverList 页面，支持懒加载和可见性检测
All checks were successful
/ depcheck (push) Successful in 1m26s
Details
/ build-and-deploy-to-vercel (push) Successful in 1m9s
Details
/ playwright (push) Successful in 2m57s
Details

Browse Source
This commit is contained in:
严浩
2024-12-07 19:28:37 +08:00
parent b309260e8f
commit 12a02eb193
9 changed files with 368 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -16,8 +16,8 @@
app.style.minHeight = `${window.innerHeight}px`;
}
window.addEventListener('resize', setAppHeight);
window.addEventListener('load', setAppHeight);
// window.addEventListener('resize', setAppHeight);
// window.addEventListener('load', setAppHeight);
</script>
<style type="text/css">
body {
@ -43,7 +43,8 @@
</style>
</head>
<body ontouchstart ontouchend>
<!-- ontouchstart ontouchend -->
<body>
<div id="app">
<div class="page-wrapper" style="display: flex; justify-content: center; align-items: center">Loading...</div>
</div>

3
package.json
View File

@ -44,6 +44,7 @@
"page-stack-vue3": "^2.5.6",
"pinia": "^2.2.8",
"pinia-plugin-persistedstate": "^4.1.3",
"primeicons": "^7.0.0",
"primelocale": "^1.2.2",
"primevue": "^4.2.4",
"radash": "^12.1.0",
@ -92,7 +93,7 @@
"npm-run-all2": "^7.0.1",
"prettier": "^3.4.1",
"surge": "^0.24.6",
"typescript": "~5.7.2",
"typescript": "~5.6.3",
"unocss": "^0.65.0",
"unplugin-auto-import": "^0.18.6",
"unplugin-icons": "^0.21.0",

598
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

1
src/App.vue
View File

@ -6,6 +6,5 @@ const VITE_BUILD_COMMIT = import.meta.env.VITE_BUILD_COMMIT;
<div fixed rounded-br-4 bottom-0 left-0 z-9999 px-4 py-2 bg-black text-white op-75>
commit: {{ VITE_BUILD_COMMIT }}
</div>
<div>$__DEV__: {{ $__DEV__ }}</div>
<RouterView />
</template>

2
src/assets/base.css
View File

@ -67,7 +67,7 @@
}
body {
min-height: 100vh;
/* min-height: 100vh; */
color: var(--color-text);
background: var(--color-background);
transition:

0
src/components/ReusableTemplate.vue → src/components/vue-macros/ReusableTemplate.vue
View File

1
src/main.ts
View File

@ -13,6 +13,7 @@ import { router } from './router';
import Aura from '@primevue/themes/aura';
import zhCN from 'primelocale/zh-CN.json';
import PrimeVue from 'primevue/config';
// import 'primeicons/primeicons.css';
/* https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#static-bundle-importing
* All i18n resources specified in the plugin `include` option can be loaded

56
src/pages/useIntersectionObserverList.page.vue Normal file
View File

@ -0,0 +1,56 @@
<script setup lang="ts">
import { useIntersectionObserver } from '@vueuse/core';
import { ref } from 'vue';
const loading = ref(false);
const list = ref<string[]>([]);
const loadMore = async () => {
loading.value = true;
await new Promise((resolve) => setTimeout(resolve, 1000));
const items = Array.from({ length: 5 }, (_, i) => `Item ${list.value.length + i + 1}`);
list.value.push(...items);
loading.value = false;
};
const target = ref(null);
const isVisible = ref(false);
const { isActive, pause, resume, isSupported } = useIntersectionObserver([target], ([entry]) => {
isVisible.value = entry?.isIntersecting || false;
});
</script>
<template>
<Card v-for="item in list" :key="item" class="mb-[16px]">
<template #title>{{ item }}</template>
</Card>
<div ref="target" class="border-[8px] border-blue-500 p-[16px] bg-white dark:bg-gray-800 dark:border-gray-700">
<Button label="Load more" :loading="loading" fluid @click="loadMore" />
</div>
<ScrollTop />
<div
class="border-[1px] border-blue-500 fixed top-16 right-16 p-[4px] bg-white dark:bg-gray-800 dark:border-gray-700"
flex="~ col"
items-end
>
<label class="checkbox">
<span mr="[8px]">isSupported: {{ isSupported }}</span>
<input
:checked="isActive"
type="checkbox"
name="enabled"
@input="($event.target as HTMLInputElement)!.checked ? resume() : pause()"
/>
<span>Enable</span>
</label>
<div>
Element
<span class="font-bold" :class="isVisible ? 'text-blue-500' : 'text-orange-400 dark:text-orange-300'">
{{ isVisible ? 'inside' : 'outside' }}
</span>
the viewport
</div>
</div>
</template>

1
typed-router.d.ts vendored
View File

@ -28,5 +28,6 @@ declare module 'vue-router/auto-routes' {
'MdPage': RouteRecordInfo<'MdPage', '/md-page', Record<never, never>, Record<never, never>>,
'SomePage': RouteRecordInfo<'SomePage', '/some-page', Record<never, never>, Record<never, never>>,
'TsEnumUtil': RouteRecordInfo<'TsEnumUtil', '/ts-enum-util', Record<never, never>, Record<never, never>>,
'UseIntersectionObserverList': RouteRecordInfo<'UseIntersectionObserverList', '/useIntersectionObserverList', Record<never, never>, Record<never, never>>,
}
}