├── .eslintignore
├── .vscode
    └── extensions.json
├── public
    └── favicon.ico
├── src
    ├── assets
    │   └── logo.png
    ├── env.d.ts
    ├── router
    │   ├── index.ts
    │   └── type.d.ts
    ├── main.ts
    ├── stores
    │   ├── head.ts
    │   └── navbar.ts
    ├── hooks
    │   ├── usePhysicalBtnRetrun.ts
    │   ├── useRouterAnimation.ts
    │   └── useScrollPosition.ts
    ├── components
    │   ├── VirtualList
    │   │   ├── type.ts
    │   │   ├── props.ts
    │   │   ├── utils.ts
    │   │   └── index.vue
    │   ├── Header
    │   │   └── index.vue
    │   └── Navbar
    │   │   └── index.vue
    ├── components.d.ts
    ├── pages
    │   ├── second
    │   │   └── index.vue
    │   ├── first
    │   │   ├── index.vue
    │   │   └── detail
    │   │   │   └── index.vue
    │   ├── third
    │   │   └── index.vue
    │   ├── fourth
    │   │   └── index.vue
    │   └── fifth
    │   │   └── index.vue
    ├── App.vue
    ├── main.css
    └── auto-imports.d.ts
├── .prettierignore
├── tsconfig.node.json
├── postcss.config.js
├── scripts
    ├── tsconfig.json
    └── verifyCommit.ts
├── .gitignore
├── index.html
├── deploy.sh
├── tsconfig.json
├── .eslintrc.js
├── vite.config.ts
├── .prettierrc.js
├── README.md
├── unocss.config.ts
└── package.json


/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/
3 | index.html
4 | docs/
5 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["johnsoncodehk.volar", "antfu.unocss"]
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cll123456/template-varlet-v3-ts/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cll123456/template-varlet-v3-ts/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | .prettierignore
2 | .gitignore
3 | .eslintignore
4 | pnpm-lock.yaml
5 | docs/
6 | dist/
7 | .vscode
8 | node_modules
9 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "composite": true,
4 |     "module": "esnext",
5 |     "moduleResolution": "node"
6 |   },
7 |   "include": ["vite.config.ts"]
8 | }
9 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | // postcss.config.js
 2 | module.exports = {
 3 |   plugins: {
 4 |     'postcss-px-to-viewport': {
 5 |       viewportWidth: 375,
 6 |       unitPrecision: 6,
 7 |       unitToConvert: 'px',
 8 |       propList: ['*'],
 9 |     },
10 |   },
11 | }
12 | 


--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 
3 | declare module '*.vue' {
4 |   import type { DefineComponent } from 'vue'
5 |   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
6 |   const component: DefineComponent<{}, {}, any>
7 |   export default component
8 | }
9 | 


--------------------------------------------------------------------------------
/scripts/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "module": "commonjs",
 5 |     "moduleResolution": "node",
 6 |     "target": "es2019",
 7 |     "strict": true,
 8 |     "esModuleInterop": true,
 9 |     "forceConsistentCasingInFileNames": true,
10 |     "types": ["node"]
11 |   },
12 |   "include": ["./*.ts"]
13 | }
14 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import routes from '~pages'
 2 | import { createRouter, createWebHashHistory } from 'vue-router'
 3 | 
 4 | const router = createRouter({
 5 |   history: createWebHashHistory(),
 6 |   routes: [...routes, { path: '/', redirect: '/first' }],
 7 | })
 8 | // eslint-disable-next-line no-console
 9 | console.log(routes)
10 | export default router
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | import '@unocss/reset/tailwind.css'
 4 | import './main.css'
 5 | import 'uno.css'
 6 | import router from './router'
 7 | import { createPinia } from 'pinia'
 8 | 
 9 | const pinia = createPinia()
10 | 
11 | const app = createApp(App)
12 | 
13 | app.use(router)
14 | app.use(pinia)
15 | 
16 | app.mount('#app')
17 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 
 8 |     <title>Vite App</title>
 9 |   </head>
10 | 
11 |   <body>
12 |     <div id="app"></div>
13 |     <script type="module" src="/src/main.ts"></script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/deploy.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env sh
 2 | 
 3 | # 确保脚本抛出遇到的错误
 4 | set -e
 5 | 
 6 | # 生成静态文件
 7 | pnpm run build
 8 | 
 9 | # 进入生成的文件夹
10 | cd dist/
11 | 
12 | # 如果是发布到自定义域名
13 | # echo 'www.example.com' > CNAME
14 | 
15 | git init
16 | git add -A
17 | git commit -m 'deploy: 自动部署'
18 | 
19 | # 如果发布到 https://<USERNAME>.github.io
20 | # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
21 | 
22 | # 如果发布到 https://<USERNAME>.github.io/<REPO>
23 |  git push -f git@github.com:cll123456/template-varlet-v3-ts.git master:gh-pages
24 | 
25 | cd -
26 | 


--------------------------------------------------------------------------------
/src/stores/head.ts:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia'
 2 | 
 3 | export const useHeadStore = defineStore<
 4 |   'head',
 5 |   { isDark: boolean },
 6 |   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 7 |   any,
 8 |   { changeTheme: (isDark: boolean) => void }
 9 | >('head', {
10 |   state: () => ({
11 |     /**
12 |      * 激活的navbar的颜色
13 |      */
14 |     isDark: false,
15 |   }),
16 |   actions: {
17 |     /**
18 |      * 改变主题
19 |      * @param isDark {boolean} 是否是黑暗
20 |      */
21 |     changeTheme(isDark: boolean) {
22 |       this.isDark = isDark
23 |     },
24 |   },
25 | })
26 | 


--------------------------------------------------------------------------------
/src/router/type.d.ts:
--------------------------------------------------------------------------------
 1 | import 'vue-router'
 2 | 
 3 | declare module 'vue-router' {
 4 |   interface RouteMeta {
 5 |     /**
 6 |      * 每个页面的动画名称
 7 |      */
 8 |     transitionName?: string
 9 |     /**
10 |      * 是否缓存当前页面
11 |      */
12 |     keepAlive?: boolean
13 |     /**
14 |      * 当前页面的标题
15 |      */
16 |     title?: string
17 |     /**
18 |      * 当前页面滚动的位置
19 |      */
20 |     scrollPosition?: {
21 |       /**
22 |        * 顶部距离
23 |        */
24 |       top: number
25 |       /**
26 |        * 左侧距离
27 |        */
28 |       left: number
29 |       /**
30 |        * 滚动的行为
31 |        */
32 |       behavior?: ScrollBehavior
33 |     }
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "esnext",
 6 |     "moduleResolution": "node",
 7 |     "strict": true,
 8 |     "sourceMap": true,
 9 |     "jsx": "preserve",
10 |     "skipLibCheck": true,
11 |     "resolveJsonModule": true,
12 |     "esModuleInterop": true,
13 |     "lib": ["esnext", "dom"],
14 |     "baseUrl": ".",
15 |     "types": ["vite/client", "vite-plugin-pages/client"],
16 |     "paths": {
17 |       "@": ["src"],
18 |       "@/*": ["src/*"],
19 |       "~/*": ["src/*"]
20 |     }
21 |   },
22 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
23 |   "references": [
24 |     { "path": "./tsconfig.node.json" },
25 |     { "path": "./scripts/tsconfig.json" }
26 |   ]
27 | }
28 | 


--------------------------------------------------------------------------------
/src/hooks/usePhysicalBtnRetrun.ts:
--------------------------------------------------------------------------------
 1 | import { onMounted, onBeforeUnmount } from 'vue'
 2 | /**
 3 |  * 移动端物理按钮f返回事件
 4 |  * @param doSomeThing {Function} 需要做的事情
 5 |  * attention: 如果没有传回调函数，自动router.go(-1)
 6 |  */
 7 | export function usePhysicalBtnRetrun(doSomeThing?: () => void) {
 8 |   const router = useRouter()
 9 |   onMounted(() => {
10 |     if (window.history) {
11 |       history.pushState(history.state, '', document.URL)
12 |       window.addEventListener('popstate', cusFunc, false) //false阻止默认事件
13 |     }
14 |   })
15 | 
16 |   onBeforeUnmount(() => {
17 |     window.removeEventListener('popstate', cusFunc, false) //false阻止默认事件
18 |   })
19 |   const cusFunc = () => {
20 |     if (doSomeThing && typeof doSomeThing === 'function') {
21 |       doSomeThing()
22 |     } else {
23 |       router.go(-1)
24 |     }
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     es2021: true,
 6 |     node: true,
 7 |   },
 8 |   parser: 'vue-eslint-parser',
 9 |   parserOptions: {
10 |     parser: '@typescript-eslint/parser',
11 |     ecmaVersion: 2022,
12 |     sourceType: 'module',
13 |   },
14 |   extends: [
15 |     'plugin:vue/vue3-recommended',
16 |     'plugin:@typescript-eslint/recommended',
17 |     'prettier',
18 |     'plugin:prettier/recommended',
19 |   ],
20 | 
21 |   rules: {
22 |     'prettier/prettier': 'warn',
23 |     '@typescript-eslint/no-non-null-assertion': 'off',
24 |     '@typescript-eslint/no-explicit-any': ['error', { ignoreRestArgs: true }],
25 |     'vue/v-on-event-hyphenation': 'error',
26 |     'vue/multi-word-component-names': [
27 |       'warn',
28 |       {
29 |         ignores: ['index'],
30 |       },
31 |     ],
32 |   },
33 | }
34 | 


--------------------------------------------------------------------------------
/src/hooks/useRouterAnimation.ts:
--------------------------------------------------------------------------------
 1 | import { onBeforeRouteLeave } from 'vue-router'
 2 | /**
 3 |  * 页面路由离开的动画hook
 4 |  * @param routerName {String} 进入的路由名称，就是需要进入那个页面的开场动画
 5 |  * @param beforeAnimationName {String} 进入动画的名称 'slide_right' 'slide_left'}
 6 |  * @param afterAnimationName {String} 离开动画的名称,默认('fade')需要恢复原来的动画
 7 |  */
 8 | export function useRouterAnimation(
 9 |   routerName: string,
10 |   beforeAnimationName: string,
11 |   afterAnimationName: string,
12 | ) {
13 |   onBeforeRouteLeave((to, from, next) => {
14 |     // 离开前，改成想要的进入动画
15 |     if (to.name === routerName) {
16 |       to.meta = {
17 |         ...(to.meta || {}),
18 |         transitionName: beforeAnimationName,
19 |       }
20 |     }
21 |     // 离开后，改成想要的进入动画
22 |     setTimeout(() => {
23 |       to.meta = {
24 |         ...(to.meta || {}),
25 |         transitionName: afterAnimationName,
26 |       }
27 |     }, 300)
28 |     next()
29 |   })
30 | }
31 | 


--------------------------------------------------------------------------------
/src/components/VirtualList/type.ts:
--------------------------------------------------------------------------------
 1 | import { ListProps } from '@varlet/ui'
 2 | 
 3 | export interface IVirtualObject {
 4 |   /**
 5 |    * id
 6 |    */
 7 |   id: string
 8 |   /**
 9 |    * 其他属性
10 |    */
11 |   // eslint-disable-next-line @typescript-eslint/no-explicit-any
12 |   [key: string]: any
13 | }
14 | 
15 | export interface IVirtualList extends ListProps {
16 |   /**
17 |    * 是否开启虚拟dom加载
18 |    */
19 |   useVirtual?: boolean
20 |   /**
21 |    * 传入的数据
22 |    */
23 |   dataList: Array<IVirtualObject>
24 |   /**
25 |    * key
26 |    */
27 |   dataKey?: string | 'id'
28 | }
29 | 
30 | export interface IListAll extends IVirtualList {
31 |   /**
32 |    * 当前行的id
33 |    */
34 |   curRowId: number | string
35 |   /**
36 |    * 是否渲染过
37 |    */
38 |   hasRenderDom: boolean
39 |   /**
40 |    * 当前行key
41 |    */
42 |   curRowKey: number | string
43 |   /**
44 |    * 当前行距离顶部的距离
45 |    */
46 |   curRowMarginTop: number
47 |   /**
48 |    * 当前行的高度
49 |    */
50 |   curRowHeight: number
51 | }
52 | 


--------------------------------------------------------------------------------
/src/components.d.ts:
--------------------------------------------------------------------------------
 1 | // generated by unplugin-vue-components
 2 | // We suggest you to commit this file into source control
 3 | // Read more: https://github.com/vuejs/core/pull/3399
 4 | import '@vue/runtime-core'
 5 | 
 6 | declare module '@vue/runtime-core' {
 7 |   export interface GlobalComponents {
 8 |     Header: typeof import('./components/Header/index.vue')['default']
 9 |     Navbar: typeof import('./components/Navbar/index.vue')['default']
10 |     RouterLink: typeof import('vue-router')['RouterLink']
11 |     RouterView: typeof import('vue-router')['RouterView']
12 |     VarAppBar: typeof import('@varlet/ui')['_AppBarComponent']
13 |     VarBadge: typeof import('@varlet/ui')['_BadgeComponent']
14 |     VarButton: typeof import('@varlet/ui')['_ButtonComponent']
15 |     VarCard: typeof import('@varlet/ui')['_CardComponent']
16 |     VarIcon: typeof import('@varlet/ui')['_IconComponent']
17 |     VirtualList: typeof import('./components/VirtualList/index.vue')['default']
18 |   }
19 | }
20 | 
21 | export {}
22 | 


--------------------------------------------------------------------------------
/src/pages/second/index.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { usePhysicalBtnRetrun } from '@/hooks/usePhysicalBtnRetrun'
 3 | const router = useRouter()
 4 | const goBack = () => {
 5 |   router.push('/first')
 6 | }
 7 | 
 8 | usePhysicalBtnRetrun(() => {
 9 |   router.push('/first')
10 | })
11 | 
12 | const arr = ref([
13 |   '移',
14 |   '动',
15 |   '端',
16 |   '物',
17 |   '理',
18 |   '键',
19 |   '和',
20 |   'header',
21 |   '返',
22 |   '回',
23 |   '键',
24 |   '都',
25 |   '返',
26 |   '回',
27 |   '到',
28 |   'first',
29 |   '页',
30 |   '面',
31 | ])
32 | </script>
33 | <template>
34 |   <Header title="second" :is-show-go-back="true" @go-back="goBack" />
35 |   <div class="exclude-h-n-s flex flex-wrap justify-center">
36 |     <div
37 |       v-for="(item, index) in arr"
38 |       :key="item + index"
39 |       :class="`var-elevation--${index} flex justify-center items-center h-25vw w-25vw m-2vw `"
40 |     >
41 |       {{ item }}
42 |     </div>
43 |   </div>
44 |   <Navbar></Navbar>
45 | </template>
46 | 
47 | <style lang="scss" scoped></style>
48 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | import Unocss from 'unocss/vite'
 4 | import components from 'unplugin-vue-components/vite'
 5 | import { VarletUIResolver } from 'unplugin-vue-components/resolvers'
 6 | import AutoImport from 'unplugin-auto-import/vite'
 7 | import Pages from 'vite-plugin-pages'
 8 | import { resolve } from 'path'
 9 | // https://vitejs.dev/config/
10 | export default defineConfig({
11 |   plugins: [
12 |     vue({}),
13 |     Unocss(),
14 |     // 自动引入组件
15 |     components({
16 |       dirs: ['src/components'],
17 |       resolvers: [VarletUIResolver()],
18 |       dts: './src/components.d.ts',
19 |     }),
20 |     // 自动引入库的api
21 |     AutoImport({
22 |       imports: ['vue', 'vue-router'],
23 |       dts: './src/auto-imports.d.ts',
24 |     }),
25 |     // 基于文件系统的路由
26 |     Pages({
27 |       dirs: [{ dir: resolve(__dirname, './src/pages'), baseRoute: '' }],
28 |       extensions: ['vue'],
29 |     }),
30 |   ],
31 |   resolve: {
32 |     alias: {
33 |       '@': resolve(__dirname, './src'), //设置别名
34 |     },
35 |     dedupe: ['vue'],
36 |   },
37 | })
38 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   // 一行最多 80 字符
 3 |   printWidth: 80,
 4 |   // 不使用 tab 缩进，而使用空格
 5 |   useTabs: false,
 6 |   // 使用 2 个空格缩进
 7 |   tabWidth: 2,
 8 |   // 行尾需要有分号
 9 |   semi: false,
10 |   // 使用单引号代替双引号
11 |   singleQuote: true,
12 |   // 对象的 key 仅在必要时用引号
13 |   quoteProps: 'as-needed',
14 |   // jsx 不使用单引号，而使用双引号
15 |   jsxSingleQuote: false,
16 |   // 末尾使用逗号
17 |   trailingComma: 'all',
18 |   // 大括号内的首尾需要空格 { foo: bar }
19 |   bracketSpacing: true,
20 |   // 箭头函数，只有一个参数的时候，也需要括号
21 |   arrowParens: 'always',
22 |   // 每个文件格式化的范围是文件的全部内容
23 |   rangeStart: 0,
24 |   rangeEnd: Infinity,
25 |   // 不需要写文件开头的 @prettier
26 |   requirePragma: false,
27 |   // 不需要自动在文件开头插入 @prettier
28 |   insertPragma: false,
29 |   // 使用默认的折行标准
30 |   proseWrap: 'preserve',
31 |   // 根据显示样式决定 html 要不要折行
32 |   htmlWhitespaceSensitivity: 'css',
33 |   // 换行符使用 lf
34 |   endOfLine: 'lf',
35 |   overrides: [
36 |     {
37 |       files: ['*.json5'],
38 |       options: {
39 |         singleQuote: false,
40 |         quoteProps: 'preserve',
41 |       },
42 |     },
43 |     {
44 |       files: ['*.yml'],
45 |       options: {
46 |         singleQuote: false,
47 |       },
48 |     },
49 |   ],
50 | }
51 | 


--------------------------------------------------------------------------------
/src/pages/first/index.vue:
--------------------------------------------------------------------------------
 1 | <route>
 2 | {
 3 |   meta: {
 4 |     keepAlive:true,
 5 |     title: 'first',
 6 |     transitionName: 'fade'
 7 |   }
 8 | }
 9 | </route>
10 | <script lang="ts" setup>
11 | const router = useRouter()
12 | const goToDetail = () => {
13 |   router.push('/first/detail')
14 | }
15 | </script>
16 | <template>
17 |   <Header title="first1" />
18 |   <div class="exclude-h-n-s">
19 |     <var-card
20 |       class="m-b-2"
21 |       title="风景"
22 |       subtitle="公园里的风景"
23 |       description="公园的树林也很美。在公园的小山上栽满了树木，梧桐树的叶子随着时间的流逝慢慢变黄，纷纷飘落；枫树的叶子却变红了，公园笼罩在片片红云中，也使秋天增添了一分热情。而柏树的叶子仍是那么青翠欲滴，令你陶醉极了。山上有一群孩子在快乐的嬉戏，不时传来阵阵欢笑声，瞧，他们玩得多起劲呀，给树林增添了活力。"
24 |       src="https://varlet.gitee.io/varlet-ui/cat.jpg"
25 |     >
26 |       <template #extra>
27 |         <div class="w-full text-right" @click="goToDetail">
28 |           <var-button type="warning">查看详情</var-button>
29 |         </div>
30 |       </template>
31 |     </var-card>
32 |     <var-card
33 |       title="风景"
34 |       subtitle="公园里的风景"
35 |       description="公园的树林也很美。在公园的小山上栽满了树木，梧桐树的叶子随着时间的流逝慢慢变黄，纷纷飘落；枫树的叶子却变红了，公园笼罩在片片红云中，也使秋天增添了一分热情。而柏树的叶子仍是那么青翠欲滴，令你陶醉极了。山上有一群孩子在快乐的嬉戏，不时传来阵阵欢笑声，瞧，他们玩得多起劲呀，给树林增添了活力。"
36 |       src="https://varlet.gitee.io/varlet-ui/cat.jpg"
37 |     />
38 |   </div>
39 |   <Navbar></Navbar>
40 | </template>
41 | 
42 | <style lang="scss" scoped></style>
43 | 


--------------------------------------------------------------------------------
/src/pages/third/index.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { IVirtualObject } from '@/components/VirtualList/type'
 3 | import { Ref, ref } from 'vue'
 4 | const loading = ref(false)
 5 | const finished = ref(false)
 6 | const list: Ref<IVirtualObject[]> = ref([])
 7 | 
 8 | const load = () => {
 9 |   setTimeout(() => {
10 |     for (let i = 0; i < 20; i++) {
11 |       list.value.push({
12 |         id: list.value.length + 1 + '',
13 |         title: list.value.length + 1,
14 |       })
15 |     }
16 | 
17 |     loading.value = false
18 | 
19 |     if (list.value.length >= 200) {
20 |       finished.value = true
21 |     }
22 |   }, 1000)
23 | }
24 | </script>
25 | <template>
26 |   <Header title="Third-long-long-long-name" />
27 |   <div class="exclude-h-n-s p-0">
28 |     <VirtualList
29 |       v-model:loading="loading"
30 |       loading-text="正在努力输出"
31 |       finished-text="一滴都没有了"
32 |       error-text="出错了出错了"
33 |       :finished="finished"
34 |       :use-virtual="true"
35 |       :data-list="list"
36 |       @load="load"
37 |     >
38 |       <template #default="{ item, index }">
39 |         <var-cell :key="index" :style="{ height: 50 + Number(index) + 'px' }">
40 |           <div>列表项: {{ item.title }}</div>
41 |           <var-divider dashed />
42 |         </var-cell>
43 |       </template>
44 |     </VirtualList>
45 |   </div>
46 |   <Navbar></Navbar>
47 | </template>
48 | 
49 | <style lang="scss" scoped></style>
50 | 


--------------------------------------------------------------------------------
/src/pages/fourth/index.vue:
--------------------------------------------------------------------------------
 1 | <route>
 2 | {
 3 |   meta: {
 4 |     keepAlive:true,
 5 |     title: 'fourth'
 6 |   }
 7 | }
 8 | </route>
 9 | <script lang="ts" setup>
10 | import { IVirtualObject } from '@/components/VirtualList/type'
11 | import { Ref, ref } from 'vue'
12 | const loading = ref(false)
13 | const finished = ref(false)
14 | const useVirtual = ref(false)
15 | const list: Ref<IVirtualObject[]> = ref([])
16 | 
17 | const load = () => {
18 |   setTimeout(() => {
19 |     for (let i = 0; i < 20; i++) {
20 |       list.value.push({
21 |         id: list.value.length + 1 + '',
22 |         title: list.value.length + 1,
23 |       })
24 |     }
25 | 
26 |     loading.value = false
27 | 
28 |     if (list.value.length >= 110) {
29 |       finished.value = true
30 |     }
31 |   }, 1000)
32 | }
33 | </script>
34 | <template>
35 |   <Header />
36 |   <div class="exclude-h-n-s p-0">
37 |     <VirtualList
38 |       v-model:loading="loading"
39 |       v-model:use-virtual="useVirtual"
40 |       loading-text="正在努力输出"
41 |       finished-text="一滴都没有了"
42 |       error-text="出错了出错了"
43 |       :finished="finished"
44 |       :data-list="list"
45 |       @load="load"
46 |     >
47 |       <template #default="{ item, index }">
48 |         <var-cell :key="index">
49 |           <div>列表项: {{ item.title }}</div>
50 |           <var-divider dashed />
51 |         </var-cell>
52 |       </template>
53 |     </VirtualList>
54 |   </div>
55 |   <Navbar></Navbar>
56 | </template>
57 | 
58 | <style lang="scss" scoped></style>
59 | 


--------------------------------------------------------------------------------
/scripts/verifyCommit.ts:
--------------------------------------------------------------------------------
 1 | // Invoked on the commit-msg git hook by simple-git-hooks.
 2 | 
 3 | import colors from 'picocolors'
 4 | import { readFileSync } from 'fs'
 5 | 
 6 | // get $1 from commit-msg script
 7 | const msgPath = process.argv[2]
 8 | const msg = readFileSync(msgPath, 'utf-8').trim()
 9 | 
10 | const releaseRE = /^v\d/
11 | const commitRE =
12 |   /^(revert: )?(feat|bug|fix|ui|docs|style|perf|release|deploy|refactor|test|chore|revert|merge|build)(\(.+\))?: .{1,50}/
13 | const msgObj: any = {
14 |   feat: '新功能(feature)',
15 |   bug: '此项特别针对bug号,用于向测试反馈bug列表的bug修改情况',
16 |   ui: '更新 ui',
17 |   fix: '修复bug(fix)',
18 |   docs: '文档(documentation)',
19 |   style: '格式,不影响代码运行的变动(style)',
20 |   perf: '性能性能优化(performance)',
21 |   release: '发布(release)',
22 |   deploy: '部署(deploy)',
23 |   refactor: '重构,即不是新增功能,也不是修改bug的代码变动(refactor)',
24 |   test: '单元测试(test)',
25 |   chore: '构建过程或辅助工具的变动(chore)',
26 |   revert: '回滚(revert)',
27 |   merge: '合并分支(merge)',
28 |   build: '构建(build)',
29 | }
30 | 
31 | let msgStr = ''
32 | for (const key in msgObj) {
33 |   if (Object.prototype.hasOwnProperty.call(msgObj, key)) {
34 |     const element = msgObj[key]
35 |     msgStr += `    ${key}: ` + element + '\n'
36 |   }
37 | }
38 | 
39 | if (!releaseRE.test(msg) && !commitRE.test(msg)) {
40 |   console.log()
41 |   console.error(
42 |     `  ${colors.bgRed(colors.white(' ERROR '))} ${colors.red(
43 |       `invalid commit message format.`,
44 |     )}\n\n` +
45 |       colors.red(
46 |         `  Proper commit message format is required for automated changelog generation. Examples:\n\n`,
47 |       ) +
48 |       `${colors.green(`${msgStr}`)}\n\n`,
49 |   )
50 |   process.exit(1)
51 | }
52 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts"></script>
 2 | <template>
 3 |   <router-view v-slot="{ Component, route }">
 4 |     <transition :name="route.meta.transitionName || 'fade'">
 5 |       <template v-if="route.meta.keepAlive">
 6 |         <keep-alive>
 7 |           <div :key="route.path" class="relative">
 8 |             <component :is="Component" />
 9 |           </div>
10 |         </keep-alive>
11 |       </template>
12 |       <template v-else>
13 |         <div :key="route.path" class="relative">
14 |           <component :is="Component" />
15 |         </div>
16 |       </template>
17 |     </transition>
18 |   </router-view>
19 | </template>
20 | 
21 | <style>
22 | /* 可以为进入和离开动画设置不同的持续时间和动画函数 */
23 | .fade-enter-active,
24 | .fade-leave-active {
25 |   transition: opacity 0.3s;
26 |   position: absolute !important;
27 |   background-color: white;
28 |   left: 0;
29 |   right: 0;
30 |   top: 0;
31 |   bottom: 0;
32 |   z-index: 1;
33 |   opacity: 1;
34 | }
35 | 
36 | .fade-enter-from,
37 | .fade-leave-to {
38 |   opacity: 0;
39 | }
40 | 
41 | .slide_left-enter-active,
42 | .slide_left-leave-active,
43 | .slide_right-enter-active,
44 | .slide_right-leave-active {
45 |   transition: all 0.3s;
46 |   position: absolute !important;
47 |   background-color: white;
48 |   left: 0;
49 |   right: 0;
50 |   top: 0;
51 |   bottom: 0;
52 |   z-index: 1;
53 | }
54 | 
55 | .slide_left-enter-from,
56 | .slide_right-leave-to {
57 |   opacity: 1;
58 |   transform: translateX(100%);
59 | }
60 | 
61 | .slide_right-enter-from,
62 | .slide_left-leave-to {
63 |   opacity: 1;
64 |   transform: translateX(-100%);
65 | }
66 | 
67 | .slide_left-leave-to,
68 | .slide_right-leave-to {
69 |   opacity: 0.3;
70 | }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | unocss 是什么，不清楚的可以看这边[ 重新构想原子化 CSS](https://antfu.me/posts/reimagine-atomic-css-zh)，
 3 | 
 4 | # 整体的架构
 5 | 1. vue3 + setup + ts， vw + rem等来搭建的移动端项目
 6 | 2. tslint, prettier来控制代码的格式
 7 | 3. simple-git-hook来控制代码提交的规范
 8 | 4. deploy.sh 来实现自动部署
 9 | 5. unocss 及其生态来实现css和icon图标的按需加载，不需要使用js就能引入图标
10 | 6. 记录滚动条位置，监听物理键返回，路由动画等都是hooks的形式存在
11 | 
12 | # 项目效果图
13 | 代码地址： [https://github.com/cll123456/template-varlet-v3-ts](https://github.com/cll123456/template-varlet-v3-ts)
14 | 
15 | 演示环境： [https://cll123456.github.io/template-varlet-v3-ts](https://cll123456.github.io/template-varlet-v3-ts)
16 | 
17 | > 在断断续续的几天中，把项目实现了，做的效果还是让自己满意的。从开发体验来说是真的香，一直从js, css, icon图标等都遵从按需加载的原理。
18 | ## 外围效果
19 | 
20 | ![total-pages.gif](https://img-blog.csdnimg.cn/img_convert/f3e3fbf948c22405c2b9eef91a2abedf.gif)
21 | 
22 | > 标配的移动端项目，移动端的适配也是做好了，vm + rem的形式来的。上中下的布局，黑暗模式等
23 | ## 第一个页面
24 | 
25 | 
26 | ![first-pages.gif](https://img-blog.csdnimg.cn/img_convert/24ea4ff185a73d5f11e0b55e73a22705.gif)
27 | > 进入时候的动画是渐变，进入详情是右边切入动画，离开详情是左边切入的动画，看起来还挺好看的。🎈🎈🎈
28 | ## 第二个页面
29 | 
30 | ![second-pages.gif](https://img-blog.csdnimg.cn/img_convert/b87b7de1aec89df5fdf1c599000c9456.gif)
31 | > 第二个特点是实现移动端物理键的控制，换句话说是这里实现了监听物理按钮的返回来做一点你想要的事情。
32 | 
33 | ## 第三个页面
34 | 
35 | ![third-pages.gif](https://img-blog.csdnimg.cn/img_convert/24559109d3dd25cd7298f4e85276e385.gif)
36 | 
37 | > 由于varlet提供了无限滚动的组件，如果无限滚动的数据太多，那么dom数量达到一定的量级就会卡顿，所以我在此基础上加上了虚拟dom的形式来节约性能。注意看，每一个列表的高度可是不固定的哦！
38 | 
39 | ## 第五个页面
40 | 
41 | ![fifth-pages.gif](https://img-blog.csdnimg.cn/img_convert/4391ff754df71f2c96be9d14299445e5.gif)
42 | > 在移动端上面，经常会有需要返回到滚动条指定的位置，也就是说记录滚动条的位置，这里也是实现了哦
43 | 
44 | 
45 | # 🎈🎈彩蛋
46 | 想要这一系列文章吗？那就请督促我更新吧！😄😄😄让我看到大家的热情，请评论转发告诉我，最后能不能给个小星星呢😁
47 | 


--------------------------------------------------------------------------------
/src/hooks/useScrollPosition.ts:
--------------------------------------------------------------------------------
 1 | import routes from '~pages'
 2 | export function useScrollPosition(scrollContainerSelector: string | Window) {
 3 |   const route = useRoute()
 4 |   let scrollContainer: Element | Window | null
 5 |   // 监听滚动事件
 6 |   onMounted(() => {
 7 |     // window
 8 |     if (scrollContainerSelector instanceof Window) {
 9 |       scrollContainer = window
10 |     } else {
11 |       scrollContainer = document.querySelector(scrollContainerSelector)
12 |     }
13 |     // not exit
14 |     if (!scrollContainer) {
15 |       return
16 |     }
17 |     // 一开始就滚动到对应位置
18 |     routes.forEach((item) => {
19 |       if (item.name === route.name) {
20 |         // scrollContainer
21 |         scrollContainer?.scrollTo({
22 |           left: item.meta?.scrollPosition?.left,
23 |           top: item.meta?.scrollPosition?.top,
24 |         })
25 |       }
26 |     })
27 |     // 添加时间监听
28 |     scrollContainer?.addEventListener('scroll', handleScroll, {
29 |       passive: false,
30 |     })
31 |   })
32 | 
33 |   /**
34 |    * 滚动函数
35 |    * @param e {Event} 事件函数
36 |    */
37 |   const handleScroll = (e: Event) => {
38 |     const scrollTop =
39 |       e.target === window
40 |         ? window.scrollY
41 |         : (e.target as HTMLDivElement).scrollTop
42 |     const scrollLeft =
43 |       e.target === window
44 |         ? window.scrollX
45 |         : (e.target as HTMLDivElement).scrollLeft
46 |     routes.forEach((item) => {
47 |       if (item.name === route.name) {
48 |         item.meta = {
49 |           ...(item.meta || {}),
50 |           scrollPosition: {
51 |             top: scrollTop,
52 |             left: scrollLeft,
53 |           },
54 |         }
55 |       }
56 |     })
57 |   }
58 | 
59 |   // 销毁监听
60 |   onBeforeUnmount(() => {
61 |     scrollContainer?.removeEventListener('scroll', handleScroll)
62 |   })
63 | }
64 | 


--------------------------------------------------------------------------------
/unocss.config.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   defineConfig,
 3 |   presetAttributify,
 4 |   presetIcons,
 5 |   presetTypography,
 6 |   presetUno,
 7 |   presetWebFonts,
 8 | } from 'unocss'
 9 | 
10 | export default defineConfig({
11 |   shortcuts: [
12 |     ['exclude-h-n-s', 'h-[calc(100vh-14.4vw-3rem)] common-content'],
13 |     ['exclude-h-s', 'h-[calc(100vh-14.4vw)] common-content'],
14 |     [
15 |       'common-content',
16 |       'w-full overflow-y-auto overflow-x-hidden text-black-100 dark:text-white-100 bg-gray-100 dark:bg-gray-500 p-2 hyphens-auto',
17 |     ],
18 |   ],
19 |   presets: [
20 |     presetUno(),
21 |     presetAttributify(),
22 |     presetIcons({
23 |       collections: {
24 |         mdi: () =>
25 |           import('@iconify-json/mdi/icons.json').then((i) => i.default as any),
26 |       },
27 |       scale: 1.2,
28 |       warn: true,
29 |       extraProperties: {
30 |         display: 'inline-block',
31 |         'vertical-align': 'middle',
32 |       },
33 |     }),
34 |     presetTypography(),
35 |     presetWebFonts({
36 |       fonts: {
37 |         sans: 'DM Sans',
38 |         serif: 'DM Serif Display',
39 |         mono: 'DM Mono',
40 |       },
41 |     }),
42 |   ],
43 |   theme: {
44 |     extend: {},
45 |     /**这里的颜色可以自己定义，然后在代码中使用windi.css的预设，主要的颜色值需要与main.css中的一致 */
46 |     colors: {
47 |       // 主要的颜色值
48 |       success: '#00c48f',
49 |       danger: '#f44336',
50 |       primary: '#3a7afe',
51 |       info: '#00afef',
52 |       warning: '#ff9f00',
53 |       disabled: '#e0e0e0',
54 |       text: '#000',
55 |       textDisabled: '#aaa',
56 |       light: '#fff',
57 |       dark: `#272727`,
58 |     },
59 |     fontSize: {
60 |       xs: '.6rem',
61 |       sm: '.65rem',
62 |       base: '.7rem',
63 |       lg: '.8rem',
64 |       xl: '1rem',
65 |       '2xl': '2rem',
66 |       '3xl': '3rem',
67 |       '4xl': '4rem',
68 |       '5xl': '5rem',
69 |       '6xl': '6rem',
70 |       '7xl': '7rem',
71 |     },
72 |   },
73 | })
74 | 


--------------------------------------------------------------------------------
/src/components/VirtualList/props.ts:
--------------------------------------------------------------------------------
  1 | import { PropType } from 'vue'
  2 | import { IVirtualObject } from './type'
  3 | 
  4 | export default {
  5 |   /**
  6 |    * 无限滚动的loading 默认false
  7 |    */
  8 |   loading: {
  9 |     type: Boolean,
 10 |     default: false,
 11 |   },
 12 |   /**
 13 |    * 是否立即运行 默认true
 14 |    */
 15 |   immediateCheck: {
 16 |     type: Boolean,
 17 |     default: true,
 18 |   },
 19 |   /**
 20 |    * 无限循环是否完成 默认false
 21 |    */
 22 |   finished: {
 23 |     type: Boolean,
 24 |     default: false,
 25 |   },
 26 |   /**
 27 |    * 是否运行出错 默认false
 28 |    */
 29 |   error: {
 30 |     type: Boolean,
 31 |     default: false,
 32 |   },
 33 |   /**
 34 |    * 触底的高度 默认0
 35 |    */
 36 |   offset: {
 37 |     type: [String, Number],
 38 |     default: 0,
 39 |   },
 40 |   loadingText: {
 41 |     type: String,
 42 |   },
 43 |   /**
 44 |    * 完成时候的文字
 45 |    */
 46 |   finishedText: {
 47 |     type: String,
 48 |   },
 49 |   /**
 50 |    * 错误的文字
 51 |    */
 52 |   errorText: {
 53 |     type: String,
 54 |   },
 55 |   /**
 56 |    * load方法
 57 |    */
 58 |   onLoad: {
 59 |     type: Function as PropType<() => void>,
 60 |   },
 61 |   /**
 62 |    * 更改loading的方法
 63 |    */
 64 |   'onUpdate:loading': {
 65 |     type: Function as PropType<(loading: boolean) => void>,
 66 |   },
 67 |   /**
 68 |    * 更改错误的方法
 69 |    */
 70 |   'onUpdate:error': {
 71 |     type: Function as PropType<(error: boolean) => void>,
 72 |   },
 73 |   /**
 74 |    * 是否使用虚拟dom 默认false,
 75 |    */
 76 |   useVirtual: {
 77 |     type: Boolean,
 78 |     required: true,
 79 |     default: false,
 80 |   },
 81 |   /**
 82 |    * 传入的数据
 83 |    */
 84 |   dataList: {
 85 |     type: Array as PropType<IVirtualObject[]>,
 86 |     default: () => [],
 87 |   },
 88 |   /**
 89 |    * 每一个子项的高度，方便用于一开始计算，默认是50，会自动计算
 90 |    */
 91 |   itemDefaultHeight: {
 92 |     type: Number,
 93 |     default: 50,
 94 |   },
 95 |   /**
 96 |    * 虚拟dom的情况显示多少条数据，默认是20
 97 |    */
 98 |   showCounts: {
 99 |     type: Number,
100 |     default: 20,
101 |   },
102 | }
103 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "template-varlet-v3-ts",
 3 |   "private": false,
 4 |   "homepage": "./",
 5 |   "version": "1.0.0",
 6 |   "scripts": {
 7 |     "dev": "vite --host",
 8 |     "build": "vue-tsc --noEmit && vite build --base=/template-varlet-v3-ts/",
 9 |     "preview": "vite preview",
10 |     "deploy": "deploy.sh",
11 |     "eslint": "eslint --ext .js,ts,.vue --fix src",
12 |     "prettier": "prettier . --write"
13 |   },
14 |   "dependencies": {
15 |     "@varlet/ui": "^1.27.20",
16 |     "pinia": "^2.0.22",
17 |     "vue": "^3.2.39",
18 |     "vue-router": "^4.1.5"
19 |   },
20 |   "devDependencies": {
21 |     "@iconify-json/mdi": "^1.1.33",
22 |     "@types/node": "^17.0.45",
23 |     "@typescript-eslint/eslint-plugin": "^5.38.0",
24 |     "@typescript-eslint/parser": "^5.38.0",
25 |     "@unocss/preset-attributify": "^0.34.1",
26 |     "@unocss/preset-icons": "^0.34.1",
27 |     "@unocss/preset-typography": "^0.34.1",
28 |     "@unocss/preset-web-fonts": "^0.34.1",
29 |     "@unocss/reset": "^0.34.1",
30 |     "@vitejs/plugin-vue": "^2.3.4",
31 |     "eslint": "^8.24.0",
32 |     "eslint-config-prettier": "^8.5.0",
33 |     "eslint-plugin-prettier": "^4.2.1",
34 |     "eslint-plugin-vue": "^9.5.1",
35 |     "lint-staged": "^12.5.0",
36 |     "picocolors": "^1.0.0",
37 |     "postcss-px-to-viewport": "^1.1.1",
38 |     "prettier": "^2.7.1",
39 |     "simple-git-hooks": "^2.8.0",
40 |     "ts-node": "^10.9.1",
41 |     "typescript": "^4.8.3",
42 |     "unocss": "^0.34.1",
43 |     "unplugin-auto-import": "^0.7.2",
44 |     "unplugin-vue-components": "^0.19.9",
45 |     "vite": "^2.9.15",
46 |     "vite-plugin-pages": "^0.23.0",
47 |     "vue-tsc": "^0.34.17"
48 |   },
49 |   "husky": {
50 |     "hooks": {
51 |       "pre-commit": "lint-staged"
52 |     }
53 |   },
54 |   "simple-git-hooks": {
55 |     "pre-commit": "pnpm exec lint-staged --concurrent false",
56 |     "commit-msg": "pnpm exec ts-node scripts/verifyCommit.ts $1"
57 |   },
58 |   "lint-staged": {
59 |     "*.{js,ts,vue}": [
60 |       "pnpm run eslint",
61 |       "pnpm run prettier"
62 |     ]
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/src/main.css:
--------------------------------------------------------------------------------
  1 | html,
  2 | body {
  3 |   padding: 0;
  4 |   margin: 0;
  5 | }
  6 | 
  7 | html {
  8 |   font-size: 16px;
  9 | }
 10 | 
 11 | html body {
 12 |   min-width: 320px;
 13 |   margin-right: auto;
 14 |   margin-left: auto;
 15 | }
 16 | 
 17 | /* 
 18 | 1
 19 | 100vw/x = 750px/100rem
 20 | 
 21 | */
 22 | 
 23 | /**
 24 | 以375为基础稿
 25 |   100vw      320px
 26 | --------- =  --------
 27 |   x vw      14px(默认375的大小是16px)
 28 | 
 29 |     ===  x = 4.375 
 30 | 
 31 | **/
 32 | @media screen and (min-width: 0px) and (max-width: 320px) {
 33 |   html {
 34 |     font-size: 4.375vw;
 35 |     min-width: 320px;
 36 |   }
 37 | }
 38 | 
 39 | /**
 40 | 以375为基础稿
 41 |   100vw      375px
 42 | --------- =  ------------
 43 |   x vw      16px
 44 | 
 45 |     ===  x = 4.26vw 
 46 | **/
 47 | @media screen and (min-width: 375px) {
 48 |   html {
 49 |     font-size: 16px;
 50 |     font-size: 4.26vw;
 51 |     min-width: 375px;
 52 |   }
 53 | }
 54 | 
 55 | /**
 56 | 以375为基础稿
 57 |   100vw       400px
 58 | --------- =  --------
 59 | x vw        18px
 60 | 
 61 |     ===  x = 4.5vw 
 62 | **/
 63 | @media screen and (min-width: 400px) {
 64 |   html {
 65 |     font-size: 18px;
 66 |     font-size: 4.5vw;
 67 |     min-width: 400px;
 68 |   }
 69 | }
 70 | 
 71 | /**
 72 | 以375为基础稿
 73 |   100vw     500px
 74 | --------- =  --------
 75 |   x vw   20px
 76 | 
 77 |     ===  x = 4vw 
 78 | **/
 79 | @media screen and (min-width: 500px) {
 80 |   html {
 81 |     font-size: 20px;
 82 |     font-size: 4vw;
 83 |     min-width: 500px;
 84 |   }
 85 | }
 86 | 
 87 | /* 公共组件库的样式， 主要的颜色值需要与unocss.config.ts中的保持一致 */
 88 | :root {
 89 |   --font-size-xs: 10px;
 90 |   --font-size-sm: 12px;
 91 |   --font-size-md: 14px;
 92 |   --font-size-lg: 16px;
 93 |   --icon-size-xs: 16px;
 94 |   --icon-size-sm: 18px;
 95 |   --icon-size-md: 20px;
 96 |   --icon-size-lg: 22px;
 97 |   --color-body: #fff;
 98 |   --color-text: #333;
 99 |   --color-primary: #3a7afe;
100 |   --color-info: #00afef;
101 |   --color-success: #00c48f;
102 |   --color-warning: #ff9f00;
103 |   --color-danger: #f44336;
104 |   --color-disabled: #e0e0e0;
105 |   --color-text-disabled: #aaa;
106 |   --cubic-bezier: cubic-bezier(0.25, 0.8, 0.5, 1);
107 | }
108 | 


--------------------------------------------------------------------------------
/src/components/Header/index.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { useHeadStore } from '@/stores/head'
 3 | import { StyleProvider } from '@varlet/ui'
 4 | const dark = () => import('@varlet/ui/es/themes/dark')
 5 | 
 6 | const props = defineProps({
 7 |   /**
 8 |    * 标题
 9 |    */
10 |   title: {
11 |     type: String,
12 |     default: '',
13 |   },
14 |   /**
15 |    * 是否展示返回按钮
16 |    */
17 |   isShowGoBack: {
18 |     type: Boolean,
19 |     default: false,
20 |   },
21 | })
22 | 
23 | const ins = getCurrentInstance()
24 | const emits = defineEmits<{
25 |   /**
26 |    * 返回按钮事件
27 |    */
28 |   (event: 'goBack'): void
29 | }>()
30 | 
31 | const router = useRouter()
32 | const route = useRoute()
33 | 
34 | const titles = ref(props.title || (route.meta.title as string))
35 | 
36 | const goBack = () => {
37 |   emits('goBack')
38 |   if (
39 |     ins?.vnode.props?.onGoBack &&
40 |     typeof ins?.vnode.props?.onGoBack === 'function'
41 |   ) {
42 |     ins.vnode.props.onGoBack()
43 |   } else {
44 |     router.back()
45 |   }
46 | }
47 | 
48 | const headStore = useHeadStore()
49 | 
50 | /**
51 |  * 是否是黑夜模式
52 |  */
53 | const isDark = computed(() => headStore.isDark)
54 | const changeTheme = async () => {
55 |   headStore.changeTheme(!isDark.value)
56 |   const darkStyle = await dark()
57 |   const cls = document.getElementById('app')
58 |   if (isDark.value) {
59 |     StyleProvider(darkStyle.default)
60 |     cls?.classList.add('dark')
61 |   } else {
62 |     cls?.classList.remove('dark')
63 |     StyleProvider(null)
64 |   }
65 | }
66 | </script>
67 | <template>
68 |   <var-app-bar :title="titles">
69 |     <template v-if="isShowGoBack" #left>
70 |       <var-button
71 |         round
72 |         text
73 |         color="transparent"
74 |         class="!text-xl"
75 |         text-color="#ffffff"
76 |         @click="goBack"
77 |       >
78 |         <i class="i-mdi-chevron-left"></i>
79 |       </var-button>
80 |     </template>
81 |     <template #right>
82 |       <var-button
83 |         round
84 |         text
85 |         color="transparent"
86 |         text-color="#ffffff"
87 |         @click="changeTheme"
88 |       >
89 |         <var-icon v-if="!isDark" name="white-balance-sunny" />
90 |         <var-icon v-if="isDark" name="weather-night" :size="24" />
91 |       </var-button>
92 |       <!-- 插槽，给用户自定义 -->
93 |       <slot name="right"></slot>
94 |     </template>
95 |   </var-app-bar>
96 | </template>
97 | 
98 | <style lang="scss" scoped></style>
99 | 


--------------------------------------------------------------------------------
/src/components/Navbar/index.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { useNavbarStore } from '@/stores/navbar'
 3 | 
 4 | const navbarStore = useNavbarStore()
 5 | // TODO 目前版本的unocss 还不能自动计算生成类名，所以需要手动定义计算属性里面的类名
 6 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
 7 | const temp = [
 8 |   'i-mdi-numeric-1-box-outline',
 9 |   'i-mdi-numeric-2-box-outline',
10 |   'i-mdi-numeric-3-box-outline',
11 |   'i-mdi-numeric-4-box-outline',
12 |   'i-mdi-numeric-5-box-outline',
13 |   '!text-primary-500',
14 | ]
15 | 
16 | const navbarList = computed(() => navbarStore.navBarList)
17 | 
18 | const activeColor = computed(() => navbarStore.activeColorClass)
19 | 
20 | const route = useRoute()
21 | const router = useRouter()
22 | 
23 | const isCurrentRoutePath = computed(() => (path: string) => route.path === path)
24 | 
25 | const goTo = (url: string) => {
26 |   router.push(url)
27 | }
28 | </script>
29 | <template>
30 |   <div
31 |     bg="light-500 dark:dark-500"
32 |     class="h-12 fixed z-1 bottom-0 left-0 right-0 border-t-1 border-opacity-100 border-gray-500 dark:border-light-500 border-dotted"
33 |   >
34 |     <div class="w-full h-full flex justify-center items-center flex-wrap">
35 |       <div
36 |         v-for="(item, index) in navbarList"
37 |         :key="item.title + index"
38 |         class="text-xl justify-center items-center flex flex-col flex-1 p-2 border-gray-500 dark:border-light-500 box-border"
39 |         @click="goTo(item.links.url)"
40 |       >
41 |         <div
42 |           v-if="!item.badge || item.badge.value === 0"
43 |           :class="`${item.logo} ${'dark:text-light-500'} ${
44 |             isCurrentRoutePath(item.links.url) ? activeColor : ''
45 |           } `"
46 |         ></div>
47 |         <var-badge
48 |           v-else
49 |           type="danger"
50 |           v-bind="item.badge"
51 |           position="right-top"
52 |         >
53 |           <div
54 |             :class="`${item.logo} ${'dark:text-light-500'}
55 |           ${isCurrentRoutePath(item.links.url) ? activeColor : ''} `"
56 |           ></div>
57 |         </var-badge>
58 |         <div
59 |           :style="{
60 |             maxWidth: `${100 / (navbarList.length + 1)}vw`,
61 |           }"
62 |           :class="`${
63 |             isCurrentRoutePath(item.links.url) ? activeColor : ''
64 |           } ${'text-sm h-full truncate dark:text-light-500'}`"
65 |         >
66 |           {{ item.title }}
67 |         </div>
68 |       </div>
69 |     </div>
70 |   </div>
71 | </template>
72 | 
73 | <style lang="scss" scoped></style>
74 | 


--------------------------------------------------------------------------------
/src/stores/navbar.ts:
--------------------------------------------------------------------------------
  1 | import { BadgeProps } from '@varlet/ui'
  2 | import { defineStore } from 'pinia'
  3 | /**
  4 |  * navbar的类型
  5 |  */
  6 | export interface INavbar {
  7 |   /**
  8 |    * navbar title
  9 |    */
 10 |   title: string
 11 |   /**
 12 |    * navbar logo
 13 |    */
 14 |   logo: string
 15 |   /**
 16 |    * navbar router link object
 17 |    */
 18 |   links: {
 19 |     /**
 20 |      * router link name
 21 |      */
 22 |     name: string
 23 |     /**
 24 |      * router link path
 25 |      */
 26 |     url: string
 27 |   }
 28 |   /**
 29 |    * varlet本身组件的badge所有属性
 30 |    */
 31 |   badge?: BadgeProps
 32 | }
 33 | 
 34 | export const useNavbarStore = defineStore<
 35 |   'navbar',
 36 |   { navBarList: INavbar[]; activeColorClass: string },
 37 |   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 38 |   any,
 39 |   { changeNavBarList: (title: string, content: INavbar) => void }
 40 | >('navbar', {
 41 |   state: () => ({
 42 |     /**
 43 |      * navbar的数据
 44 |      */
 45 |     navBarList: [
 46 |       {
 47 |         title: 'First',
 48 |         logo: 'i-mdi-numeric-1-box-outline',
 49 |         links: { name: 'Home', url: '/first' },
 50 |         badge: {
 51 |           value: 0,
 52 |           maxValue: 10,
 53 |         },
 54 |       },
 55 |       {
 56 |         title: 'Second',
 57 |         logo: 'i-mdi-numeric-2-box-outline',
 58 |         links: { name: 'Home', url: '/second' },
 59 |         badge: {
 60 |           value: 0,
 61 |           maxValue: 10,
 62 |         },
 63 |       },
 64 |       {
 65 |         title: 'Third-long-long-long-name',
 66 |         logo: 'i-mdi-numeric-3-box-outline',
 67 |         links: { name: 'Home', url: '/third' },
 68 |         badge: {
 69 |           value: 0,
 70 |           maxValue: 10,
 71 |         },
 72 |       },
 73 |       {
 74 |         title: 'Fourth',
 75 |         logo: 'i-mdi-numeric-4-box-outline',
 76 |         links: { name: 'Home', url: '/fourth' },
 77 |         badge: {
 78 |           value: 0,
 79 |           maxValue: 10,
 80 |         },
 81 |       },
 82 |       {
 83 |         title: 'Fifth',
 84 |         logo: 'i-mdi-numeric-5-box-outline',
 85 |         links: { name: 'Home', url: '/fifth' },
 86 |         badge: {
 87 |           value: 2,
 88 |           maxValue: 10,
 89 |         },
 90 |       },
 91 |     ],
 92 |     /**
 93 |      * 激活的navbar的颜色
 94 |      */
 95 |     activeColorClass: '!text-primary-500',
 96 |   }),
 97 |   actions: {
 98 |     /**
 99 |      * 改变navbar的数据，主要用于更新badge的值
100 |      * @param title {string} navbar title
101 |      * @param content {INavbar} navbar content 需要改变的内容
102 |      */
103 |     changeNavBarList(title: string, content: Partial<INavbar>) {
104 |       this.navBarList = this.navBarList.map((item) => {
105 |         if (item.title === title) {
106 |           item = { ...item, ...content }
107 |         }
108 |         return item
109 |       })
110 |     },
111 |   },
112 | })
113 | 


--------------------------------------------------------------------------------
/src/auto-imports.d.ts:
--------------------------------------------------------------------------------
 1 | // Generated by 'unplugin-auto-import'
 2 | // We suggest you to commit this file into source control
 3 | declare global {
 4 |   const computed: typeof import('vue')['computed']
 5 |   const createApp: typeof import('vue')['createApp']
 6 |   const customRef: typeof import('vue')['customRef']
 7 |   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
 8 |   const defineComponent: typeof import('vue')['defineComponent']
 9 |   const effectScope: typeof import('vue')['effectScope']
10 |   const EffectScope: typeof import('vue')['EffectScope']
11 |   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
12 |   const getCurrentScope: typeof import('vue')['getCurrentScope']
13 |   const h: typeof import('vue')['h']
14 |   const inject: typeof import('vue')['inject']
15 |   const isReadonly: typeof import('vue')['isReadonly']
16 |   const isRef: typeof import('vue')['isRef']
17 |   const markRaw: typeof import('vue')['markRaw']
18 |   const nextTick: typeof import('vue')['nextTick']
19 |   const onActivated: typeof import('vue')['onActivated']
20 |   const onBeforeMount: typeof import('vue')['onBeforeMount']
21 |   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
22 |   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
23 |   const onDeactivated: typeof import('vue')['onDeactivated']
24 |   const onErrorCaptured: typeof import('vue')['onErrorCaptured']
25 |   const onMounted: typeof import('vue')['onMounted']
26 |   const onRenderTracked: typeof import('vue')['onRenderTracked']
27 |   const onRenderTriggered: typeof import('vue')['onRenderTriggered']
28 |   const onScopeDispose: typeof import('vue')['onScopeDispose']
29 |   const onServerPrefetch: typeof import('vue')['onServerPrefetch']
30 |   const onUnmounted: typeof import('vue')['onUnmounted']
31 |   const onUpdated: typeof import('vue')['onUpdated']
32 |   const provide: typeof import('vue')['provide']
33 |   const reactive: typeof import('vue')['reactive']
34 |   const readonly: typeof import('vue')['readonly']
35 |   const ref: typeof import('vue')['ref']
36 |   const resolveComponent: typeof import('vue')['resolveComponent']
37 |   const shallowReactive: typeof import('vue')['shallowReactive']
38 |   const shallowReadonly: typeof import('vue')['shallowReadonly']
39 |   const shallowRef: typeof import('vue')['shallowRef']
40 |   const toRaw: typeof import('vue')['toRaw']
41 |   const toRef: typeof import('vue')['toRef']
42 |   const toRefs: typeof import('vue')['toRefs']
43 |   const triggerRef: typeof import('vue')['triggerRef']
44 |   const unref: typeof import('vue')['unref']
45 |   const useAttrs: typeof import('vue')['useAttrs']
46 |   const useCssModule: typeof import('vue')['useCssModule']
47 |   const useCssVars: typeof import('vue')['useCssVars']
48 |   const useRoute: typeof import('vue-router')['useRoute']
49 |   const useRouter: typeof import('vue-router')['useRouter']
50 |   const useSlots: typeof import('vue')['useSlots']
51 |   const watch: typeof import('vue')['watch']
52 |   const watchEffect: typeof import('vue')['watchEffect']
53 | }
54 | export {}
55 | 


--------------------------------------------------------------------------------
/src/components/VirtualList/utils.ts:
--------------------------------------------------------------------------------
  1 | /* eslint-disable @typescript-eslint/no-explicit-any */
  2 | export const isString = (val: unknown): val is string => typeof val === 'string'
  3 | 
  4 | export const isBool = (val: unknown): val is boolean => typeof val === 'boolean'
  5 | 
  6 | export const isNumber = (val: unknown): val is number => typeof val === 'number'
  7 | 
  8 | export const isPlainObject = (val: unknown): val is Record<string, any> =>
  9 |   Object.prototype.toString.call(val) === '[object Object]'
 10 | 
 11 | export const isObject = (val: unknown): val is Record<string, any> =>
 12 |   typeof val === 'object' && val !== null
 13 | 
 14 | export const isArray = (val: unknown): val is Array<any> => Array.isArray(val)
 15 | // example 1rem
 16 | export const isRem = (value: unknown): value is string =>
 17 |   isString(value) && value.endsWith('rem')
 18 | 
 19 | // example 1 || 1px
 20 | export const isPx = (value: unknown): value is string | number =>
 21 |   (isString(value) && value.endsWith('px')) || isNumber(value)
 22 | 
 23 | // example 1%
 24 | export const isPercent = (value: unknown): value is string =>
 25 |   isString(value) && value.endsWith('%')
 26 | 
 27 | // example 1vw
 28 | export const isVw = (value: unknown): value is string =>
 29 |   isString(value) && value.endsWith('vw')
 30 | 
 31 | // example 1vh
 32 | export const isVh = (value: unknown): value is string =>
 33 |   isString(value) && value.endsWith('vh')
 34 | 
 35 | // example return 1
 36 | export const toPxNum = (value: unknown): number => {
 37 |   if (isNumber(value)) {
 38 |     return value
 39 |   }
 40 | 
 41 |   if (isPx(value)) {
 42 |     return +(value as string).replace('px', '')
 43 |   }
 44 | 
 45 |   if (isVw(value)) {
 46 |     return (+(value as string).replace('vw', '') * window.innerWidth) / 100
 47 |   }
 48 | 
 49 |   if (isVh(value)) {
 50 |     return (+(value as string).replace('vh', '') * window.innerHeight) / 100
 51 |   }
 52 | 
 53 |   if (isRem(value)) {
 54 |     const num = +(value as string).replace('rem', '')
 55 |     const rootFontSize = window.getComputedStyle(
 56 |       document.documentElement,
 57 |     ).fontSize
 58 | 
 59 |     return num * parseFloat(rootFontSize)
 60 |   }
 61 | 
 62 |   if (isString(value)) {
 63 |     return toNumber(value)
 64 |   }
 65 | 
 66 |   // % and other
 67 |   return 0
 68 | }
 69 | 
 70 | export const toNumber = (
 71 |   val: number | string | boolean | undefined | null,
 72 | ): number => {
 73 |   if (val == null) return 0
 74 | 
 75 |   if (isString(val)) {
 76 |     val = parseFloat(val)
 77 |     val = Number.isNaN(val) ? 0 : val
 78 |     return val
 79 |   }
 80 | 
 81 |   if (isBool(val)) return Number(val)
 82 | 
 83 |   return val
 84 | }
 85 | 
 86 | export const dt = (value: unknown, defaultText: string | undefined) =>
 87 |   value == null ? defaultText : value
 88 | 
 89 | export function createNamespace(name: string) {
 90 |   const namespace = `var-${name}`
 91 | 
 92 |   const createBEM = (suffix?: string): string => {
 93 |     if (!suffix) return namespace
 94 | 
 95 |     return suffix.startsWith('--')
 96 |       ? `${namespace}${suffix}`
 97 |       : `${namespace}__${suffix}`
 98 |   }
 99 | 
100 |   type Classes = (string | [any, string, string?])[]
101 | 
102 |   const classes = (...classes: Classes): any[] => {
103 |     return classes.map((className) => {
104 |       if (isArray(className)) {
105 |         const [condition, truthy, falsy = null] = className
106 |         return condition ? truthy : falsy
107 |       }
108 | 
109 |       return className
110 |     })
111 |   }
112 | 
113 |   return {
114 |     n: createBEM,
115 |     classes,
116 |   }
117 | }
118 | 


--------------------------------------------------------------------------------
/src/components/VirtualList/index.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { Locale } from '@varlet/ui'
  3 | import { Ref, ref } from 'vue'
  4 | import { IListAll } from './type'
  5 | import { toPxNum, dt, createNamespace } from './utils'
  6 | import VirtualListProps from './props'
  7 | /* eslint-disable @typescript-eslint/no-explicit-any */
  8 | 
  9 | // 属性
 10 | const props = defineProps(VirtualListProps)
 11 | const { n } = createNamespace('list')
 12 | // 多语言包
 13 | const pack = Locale.pack.value
 14 | 
 15 | // 虚拟dom的变量
 16 | const defHeight = ref(props.itemDefaultHeight)
 17 | const showCount = ref(props.showCounts)
 18 | const listAll: Ref<IListAll[]> = ref([])
 19 | const renderList: Ref<IListAll[]> = ref([])
 20 | const virtualViewHeight = ref(0)
 21 | const scrollTop = ref(0)
 22 | 
 23 | // 原有的属性，无限加载
 24 | const detectorEl: Ref<HTMLElement | null> = ref(null)
 25 | let scrollerRef: Ref<HTMLDivElement | null> = ref(null)
 26 | 
 27 | // 无限滚动的方法
 28 | /**
 29 |  * load方法
 30 |  */
 31 | const load = () => {
 32 |   props['onUpdate:error'] && props['onUpdate:error'](false)
 33 |   props['onUpdate:loading'] && props['onUpdate:loading'](true)
 34 |   props.onLoad && props.onLoad()
 35 | }
 36 | 
 37 | const isReachBottom = () => {
 38 |   const containerBottom =
 39 |     scrollerRef.value === null
 40 |       ? window.innerHeight
 41 |       : (scrollerRef.value as HTMLElement)?.getBoundingClientRect().bottom
 42 |   const { bottom: detectorBottom } = (
 43 |     detectorEl.value as HTMLElement
 44 |   ).getBoundingClientRect()
 45 | 
 46 |   return Math.floor(detectorBottom) - toPxNum(props.offset) <= containerBottom
 47 | }
 48 | 
 49 | onMounted(() => {
 50 |   if (props.useVirtual) {
 51 |     init()
 52 |     getInfiniteScrollHeight()
 53 |     props.immediateCheck && handleScroll()
 54 |   }
 55 | })
 56 | 
 57 | watch(props.dataList, (val) => {
 58 |   if (val.length > 0 && props.useVirtual) {
 59 |     init()
 60 |   }
 61 | })
 62 | /**
 63 |  * // 获取可见区的高度
 64 |  */
 65 | const getInfiniteScrollHeight = () => {
 66 |   const InfiniteScrollContainer = document.querySelector(
 67 |     '.InfiniteScrollContainer',
 68 |   )
 69 |   if (InfiniteScrollContainer) {
 70 |     virtualViewHeight.value =
 71 |       InfiniteScrollContainer?.getBoundingClientRect().height
 72 |   }
 73 | }
 74 | 
 75 | /**
 76 |  * 初始化
 77 |  */
 78 | const init = async () => {
 79 |   if (props.dataList.length > 0) {
 80 |     const preListAllLength = listAll.value.length
 81 |     listAll.value = JSON.parse(
 82 |       JSON.stringify([
 83 |         ...listAll.value,
 84 |         ...props.dataList.slice(preListAllLength, props.dataList.length),
 85 |       ]),
 86 |     )
 87 |     for (let i = preListAllLength; i < listAll.value.length; i++) {
 88 |       const item = listAll.value[i]
 89 |       item.curRowId = i // 存入当前行的下标
 90 |       item.hasRenderDom = false // 当前行是否渲染过 Date.now()
 91 |       item.curRowKey = i // vue-for循环使用的唯一值
 92 |       item.curRowMarginTop =
 93 |         i === 0
 94 |           ? 0
 95 |           : listAll.value[i - 1].curRowMarginTop +
 96 |             listAll.value[i - 1].curRowHeight // 当前的行的距离列表顶部的距离
 97 |       item.curRowHeight = defHeight.value // 单行的高度
 98 |     }
 99 | 
100 |     if (renderList.value.length === 0) {
101 |       renderList.value = listAll.value.slice(0, showCount.value) // 获取初始渲染的列表
102 |     }
103 |     // 数据变化
104 |     getRenderList()
105 |     // 获取渲染的列表
106 |     nextTick(() => {
107 |       renderList.value.forEach((i) => {
108 |         renderListHeightChange(i)
109 |       })
110 |     })
111 |   }
112 | }
113 | 
114 | /**
115 |  * 获取每一个item的真实高度
116 |  * @param item
117 |  */
118 | const renderListHeightChange = (item: IListAll) => {
119 |   if (!item.hasRenderDom) {
120 |     let id = item.curRowId
121 |     let offsetHeight = document
122 |       .getElementsByClassName('InfiniteScrollItem' + id)[0]
123 |       .getBoundingClientRect().height
124 |     listAll.value[id as any].curRowHeight = offsetHeight
125 |     listAll.value[id as any].hasRenderDom = true
126 |     // 重新统计下高度 防止滚动过快时列表后面的列表的scrollTop小于前面的scrollTop
127 |     for (let i = 0; i < listAll.value.length; i++) {
128 |       if (i > 0) {
129 |         listAll.value[i].curRowMarginTop =
130 |           listAll.value[i - 1].curRowMarginTop +
131 |           listAll.value[i - 1].curRowHeight
132 |       }
133 |     }
134 |   }
135 | }
136 | /**
137 |  * 滚动列表的高度
138 |  */
139 | const listHeight = computed(() => {
140 |   let height = 0
141 |   listAll.value.forEach((i) => {
142 |     height += i.curRowHeight
143 |   })
144 |   return height
145 | })
146 | 
147 | const handleScroll = async () => {
148 |   // 触底操作
149 |   const { loading, finished, error } = props
150 |   if (loading) return
151 |   if (!loading && !finished && !error && isReachBottom()) {
152 |     load()
153 |   } else {
154 |     // 其他操作
155 |     if (scrollerRef.value) {
156 |       // 滚动超出多少距离进行计算
157 |       if (
158 |         Math.abs(scrollerRef.value.scrollTop - scrollTop.value) >
159 |         defHeight.value
160 |       ) {
161 |         scrollTop.value = scrollerRef.value.scrollTop
162 |         getRenderList()
163 |       }
164 |     }
165 |   }
166 | }
167 | 
168 | const itemHasShow = (item: IListAll) => {
169 |   if (
170 |     item.curRowMarginTop < scrollTop.value &&
171 |     item.curRowMarginTop + item.curRowHeight >
172 |       scrollTop.value + virtualViewHeight.value
173 |   ) {
174 |     return true
175 |   } else if (
176 |     item.curRowMarginTop > scrollTop.value &&
177 |     item.curRowMarginTop < scrollTop.value + virtualViewHeight.value
178 |   ) {
179 |     return true
180 |   } else {
181 |     return (
182 |       item.curRowMarginTop + item.curRowHeight > scrollTop.value - 300 &&
183 |       item.curRowMarginTop + item.curRowHeight <
184 |         scrollTop.value + virtualViewHeight.value + 300
185 |     )
186 |   }
187 | }
188 | 
189 | const marginTopTotal = computed(() =>
190 |   renderList.value[0] ? renderList.value[0].curRowMarginTop : 0,
191 | )
192 | 
193 | const getRenderList = () => {
194 |   for (let i = 0; i < listAll.value.length; i++) {
195 |     if (itemHasShow(listAll.value[i])) {
196 |       let count = i + showCount.value
197 |       renderList.value = listAll.value.slice(
198 |         i,
199 |         Math.min(count, listAll.value.length),
200 |       )
201 |       // 获取渲染的列表
202 |       nextTick(() => {
203 |         renderList.value.forEach((i) => {
204 |           renderListHeightChange(i)
205 |         })
206 |       })
207 |       break
208 |     }
209 |   }
210 | }
211 | </script>
212 | <template>
213 |   <template v-if="useVirtual">
214 |     <div
215 |       ref="scrollerRef"
216 |       class="InfiniteScrollContainer h-full relative overflow-y-auto overflow-x-hidden"
217 |       @scroll="handleScroll"
218 |     >
219 |       <div
220 |         class="absolute top-0 left-0 right-0"
221 |         :style="`height: ${listHeight}px`"
222 |       ></div>
223 |       <div
224 |         class="relative flex flex-col flex-nowrap flex-shrink-0"
225 |         :style="{
226 |           transform: `translate3d(0,${marginTopTotal}px,0)`,
227 |         }"
228 |       >
229 |         <div
230 |           v-for="item in renderList"
231 |           :key="item.curRowId + '_' + item.curRowKey"
232 |           :data-key="item.curRowId"
233 |           :class="`${
234 |             'InfiniteScrollItem' + item.curRowId
235 |           } ${'w-full flex-shrink-0'}`"
236 |         >
237 |           <slot :item="item" :index="item.curRowId"></slot>
238 |         </div>
239 |         <slot v-if="loading" name="loading">
240 |           <div :class="n('loading')">
241 |             <div :class="n('loading-text')">
242 |               {{ dt(loadingText, pack.listLoadingText) }}
243 |             </div>
244 |             <var-loading size="mini" :radius="10" />
245 |           </div>
246 |         </slot>
247 | 
248 |         <slot v-if="finished" name="finished">
249 |           <div :class="n('finished')">
250 |             {{ dt(finishedText, pack.listFinishedText) }}
251 |           </div>
252 |         </slot>
253 | 
254 |         <slot v-if="error" name="error">
255 |           <div v-ripple :class="n('error')" @click="load">
256 |             {{ dt(errorText, pack.listErrorText) }}
257 |           </div>
258 |         </slot>
259 |         <!-- 判断是否触底 -->
260 |         <div ref="detectorEl" :class="n('detector')"></div>
261 |       </div>
262 |     </div>
263 |   </template>
264 |   <!-- 不需要使用虚拟列表 -->
265 |   <var-list v-else v-bind="props">
266 |     <div v-for="item in dataList" :key="item.id">
267 |       <slot :item="item" :index="item.id"></slot>
268 |     </div>
269 |   </var-list>
270 | </template>
271 | 
272 | <style lang="scss" scoped></style>
273 | 


--------------------------------------------------------------------------------
/src/pages/fifth/index.vue:
--------------------------------------------------------------------------------
  1 | <route>
  2 | {
  3 |   meta: {
  4 |     keepAlive:false,
  5 |     title: 'first',
  6 |     transitionName: 'fade',
  7 |     scrollPosition: {
  8 |       left: 0,
  9 |       top: 1000
 10 |     }
 11 |   }
 12 | }
 13 | </route>
 14 | <script lang="ts" setup>
 15 | import { useScrollPosition } from '@/hooks/useScrollPosition'
 16 | // import { Ref, ref } from 'vue'
 17 | // let scrollDomRef: Ref<HTMLElement | null> = ref(null)
 18 | useScrollPosition('.scrollDomRef')
 19 | </script>
 20 | <template>
 21 |   <Header title="fifth" />
 22 |   <div class="exclude-h-n-s scrollDomRef">
 23 |     Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita sunt sed
 24 |     quam eligendi incidunt maiores reiciendis provident impedit consequuntur
 25 |     exercitationem dolorum repellendus facere vero, sint voluptates. Ipsum vitae
 26 |     iusto facere libero esse impedit id eos! Eaque, inventore ab. Blanditiis
 27 |     corporis ex omnis maiores placeat eum! Praesentium et mollitia
 28 |     necessitatibus facilis nulla accusamus incidunt consectetur nesciunt esse
 29 |     autem ab fugiat ducimus, saepe rem delectus iusto, ipsa dolore similique.
 30 |     Ducimus eligendi accusantium omnis iusto? Aliquid voluptas aspernatur id,
 31 |     consectetur omnis nulla. Officia possimus numquam nesciunt assumenda culpa
 32 |     eos delectus reprehenderit impedit iusto, nihil deserunt voluptatem magnam
 33 |     ea minima consectetur enim beatae aliquam soluta molestiae quam,
 34 |     necessitatibus eius quia esse? Omnis sed sint et facere fuga sequi tempora
 35 |     dolorem ipsam! Fugit quisquam enim rerum repellat obcaecati accusantium
 36 |     impedit quis nostrum repudiandae ducimus temporibus ad voluptas nisi illo
 37 |     consequuntur eius harum id sint provident cum, alias, officia tempore.
 38 |     Tempore et voluptatibus tempora consequuntur sit iste, aliquam modi facilis
 39 |     voluptatem placeat excepturi iure asperiores nobis error dolore! Hic harum
 40 |     exercitationem odit impedit, voluptas blanditiis maxime molestiae vitae
 41 |     possimus? Nesciunt dolore fugiat odio sapiente praesentium? Vel aperiam
 42 |     aspernatur exercitationem eligendi nulla enim earum eos, doloremque
 43 |     voluptates deserunt cumque eveniet voluptatum assumenda fugiat eaque
 44 |     sapiente repudiandae! Recusandae in omnis quas eaque porro, distinctio hic,
 45 |     quod accusantium earum quisquam qui assumenda sint dolores, sunt dolorem.
 46 |     Blanditiis ipsum, dolor numquam non atque aspernatur laboriosam, obcaecati,
 47 |     quis quia voluptates tempore ratione suscipit cumque quidem ipsam eveniet
 48 |     fugit. Ipsam suscipit impedit repellat, quos quisquam dolor doloribus
 49 |     dolorum nisi, eaque fugiat illum asperiores modi perspiciatis, distinctio et
 50 |     beatae voluptatem consequatur ullam? Mollitia, animi enim quia, blanditiis
 51 |     veritatis repellendus quae, ducimus eos dolore aliquam dolores esse eaque
 52 |     nisi molestiae sint nemo architecto sapiente quisquam omnis. Cupiditate
 53 |     nesciunt soluta quisquam sed eaque, repellendus natus adipisci officiis
 54 |     optio minima! Explicabo dolorum esse iste, dolore similique voluptate
 55 |     molestias provident? Vitae placeat ea fugit, similique nobis voluptas
 56 |     exercitationem alias at quasi beatae quis ex cumque doloremque corporis,
 57 |     deleniti cupiditate. Atque voluptatum omnis suscipit quod ea adipisci!
 58 |     Nostrum doloribus recusandae sunt. Minima, iste ratione odio quas corrupti
 59 |     amet corporis, suscipit perferendis animi asperiores explicabo eius
 60 |     veritatis ut iusto repellendus laudantium sunt distinctio nobis eligendi
 61 |     fuga! Nesciunt, quis totam fuga deleniti quia eveniet esse beatae illum qui!
 62 |     Officiis tempora aperiam tenetur at modi id dolorem illo, iste adipisci
 63 |     nihil ex sunt quaerat dolores perferendis laudantium rem. Culpa sequi,
 64 |     fugiat non sed sit, libero provident optio, quis magnam ad neque soluta
 65 |     veritatis! Sunt, eum repellendus, animi quisquam porro consequatur repellat
 66 |     illum consequuntur neque minus temporibus. Deleniti sequi perspiciatis
 67 |     quaerat incidunt adipisci accusamus saepe repellat consequatur iure,
 68 |     delectus numquam blanditiis a et eius id! Numquam animi atque autem natus
 69 |     fugiat, deleniti, soluta dignissimos, pariatur esse cupiditate quod rerum
 70 |     eligendi. Voluptatem debitis incidunt, blanditiis quam est libero alias
 71 |     perferendis vero veniam, cum aspernatur animi maiores quis tenetur
 72 |     asperiores voluptate necessitatibus illo aliquid aperiam? Odio deleniti et
 73 |     natus ab impedit, explicabo, adipisci vero at voluptas esse quas vel
 74 |     voluptatibus magni alias est pariatur consequatur eos rerum aperiam fuga
 75 |     soluta rem? Qui odio, impedit ullam consequuntur consectetur, ipsa aliquam
 76 |     eveniet dolore tempore nostrum laborum distinctio assumenda ea cumque hic
 77 |     perspiciatis tempora sint esse! Exercitationem, deleniti ex at aspernatur
 78 |     inventore accusamus corrupti dolor amet natus nam quasi, vero animi soluta
 79 |     expedita earum architecto dolore, magni quos veniam repudiandae. Id velit
 80 |     ipsum earum officiis neque quibusdam ab quaerat beatae. Soluta, voluptatem
 81 |     officia beatae molestiae eos officiis at! Nesciunt dignissimos placeat
 82 |     excepturi obcaecati in neque non quis explicabo soluta. Vero unde doloremque
 83 |     repellat inventore ducimus reprehenderit, dolorem perspiciatis impedit?
 84 |     Quisquam ab vero quidem facilis. Sint culpa pariatur repellendus expedita
 85 |     quaerat! At corrupti repellendus voluptates fuga aliquid, ullam voluptas ad
 86 |     minima voluptate consectetur a enim accusantium sequi dolores dolor quam
 87 |     atque reiciendis, neque pariatur beatae quos quod ipsum. Consectetur
 88 |     excepturi non tenetur rem a, provident cum ab tempore laudantium
 89 |     exercitationem sed esse quas soluta adipisci ea sunt impedit fugiat incidunt
 90 |     maiores, architecto ipsa necessitatibus asperiores deleniti. Commodi
 91 |     incidunt dignissimos praesentium provident ipsa, rerum sapiente magnam
 92 |     laborum at est tempora distinctio, nulla quos fugit assumenda amet cumque?
 93 |     Sint reiciendis, et blanditiis culpa doloremque voluptas ab atque expedita
 94 |     iste. Atque nisi quasi ab officia necessitatibus totam, itaque excepturi
 95 |     quisquam molestiae quia blanditiis modi voluptatibus aperiam maiores quos!
 96 |     Ut temporibus explicabo facere! Quo, accusamus? Omnis, tempora magni illum,
 97 |     incidunt nisi nam obcaecati hic ipsam dolores non dignissimos. Praesentium
 98 |     odit nisi consequuntur ullam provident, eaque, quae minima rem quis aliquam
 99 |     doloribus fuga ducimus voluptas aperiam voluptatibus. Voluptatum, ut. Nemo
100 |     labore minima provident ad quas, eius ex culpa officia esse odit tenetur
101 |     officiis vel minus libero suscipit praesentium assumenda obcaecati sed earum
102 |     qui ducimus. Quos in culpa impedit atque sequi aspernatur sed facilis
103 |     dolorem velit aperiam eum et, asperiores, amet exercitationem modi molestiae
104 |     accusamus ipsum tenetur perspiciatis vero! Natus tenetur deleniti quo
105 |     dolore, illum modi numquam non labore quasi, voluptates, sed cupiditate
106 |     perferendis vitae velit ab veniam porro eum debitis totam accusantium rerum
107 |     laboriosam atque tempore quod. Similique dolorem eum nisi laboriosam
108 |     mollitia pariatur optio est, laborum nesciunt numquam ipsum sed harum veniam
109 |     ad consequuntur voluptatem perspiciatis reprehenderit provident ut saepe.
110 |     Accusantium officiis eum id? Sint dicta officia nostrum sequi quos tempora
111 |     aut consequatur rem vel, quaerat iure inventore veniam, ipsam beatae
112 |     aspernatur cum, autem sapiente? Vel laboriosam temporibus distinctio
113 |     pariatur voluptates a voluptatibus eos dolores, quod totam natus, rem quia
114 |     reiciendis. Illum consequatur explicabo, eligendi voluptates quam
115 |     perferendis totam reiciendis officiis veritatis delectus voluptas rem
116 |     possimus, voluptatum, odio ipsa magni asperiores error sapiente assumenda.
117 |     Necessitatibus, ipsam explicabo. Omnis aut voluptate, saepe recusandae iure
118 |     facilis culpa dolor vel hic cupiditate pariatur nulla. Doloremque illo
119 |     reprehenderit et cupiditate assumenda soluta nihil omnis, nam laboriosam sed
120 |     aliquam ad quam consequuntur provident maiores perferendis quisquam
121 |     accusamus rerum voluptatum possimus quaerat eligendi officiis! Quasi
122 |     consectetur, eum praesentium qui recusandae, ullam minima dicta laudantium
123 |     quam nesciunt beatae odio error ipsam asperiores eaque consequatur et
124 |     accusantium pariatur veritatis! Corporis cumque maxime ipsam unde saepe
125 |     temporibus quis animi incidunt impedit dolores reiciendis laborum odio,
126 |     nesciunt perspiciatis repellendus at voluptas odit magni consectetur nulla
127 |     tempore? Et maxime a pariatur tempora magnam.
128 |   </div>
129 |   <Navbar></Navbar>
130 | </template>
131 | 
132 | <style lang="scss" scoped></style>
133 | 


--------------------------------------------------------------------------------
/src/pages/first/detail/index.vue:
--------------------------------------------------------------------------------
  1 | <route>
  2 | {
  3 |   meta: {
  4 |     keepAlive:true,
  5 |     title: 'first detail',
  6 |     transitionName: 'slide_left'
  7 |   }
  8 | }
  9 | </route>
 10 | <script lang="ts" setup>
 11 | import { useRouterAnimation } from '@/hooks/useRouterAnimation'
 12 | useRouterAnimation('first', 'slide_right', 'fade')
 13 | </script>
 14 | <template>
 15 |   <Header :is-show-go-back="true" />
 16 |   <div class="exclude-h-s">
 17 |     <p>
 18 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore modi quasi
 19 |       esse magnam veniam! Porro, minus quis voluptatibus fugiat rerum dolor ad?
 20 |       Iusto dolores aliquam adipisci est? Aut beatae corporis laborum sequi
 21 |       eligendi, consequatur delectus. Vel accusantium est ab odio aliquam quos,
 22 |       atque reprehenderit! Labore, at, atque, dolores maiores saepe rem libero
 23 |       enim aut ratione facilis molestiae quo nihil incidunt maxime consequuntur
 24 |       consectetur numquam aperiam fuga tempore? Vero quaerat ipsum illum, quidem
 25 |       aperiam voluptatibus nihil, beatae temporibus animi ut sit dolore quam
 26 |       corporis impedit quas quibusdam repellat mollitia? Ea ut beatae, officiis
 27 |       quidem explicabo magni, sit non voluptate repellat officia doloribus nobis
 28 |       vitae quisquam commodi, nihil eum eos totam error maxime. Assumenda error
 29 |       illo odio minima, sequi doloribus earum sint cupiditate excepturi ad
 30 |       adipisci voluptate provident animi ab sit rerum doloremque molestias
 31 |       dolorem esse vel dicta nobis est! Doloremque sequi laudantium ducimus in
 32 |       corrupti! Possimus cumque repellat debitis magnam voluptatem enim
 33 |       perspiciatis aperiam ipsa excepturi modi veritatis dignissimos, fugit
 34 |       voluptate distinctio iusto odio dolore qui sit? Doloribus deleniti saepe
 35 |       dolores minima aut dicta vitae exercitationem. Facilis eligendi et quas.
 36 |       Voluptatibus veritatis non ex facilis sequi nihil cumque ratione
 37 |       perferendis fugit ut! Dolorum doloremque harum error nostrum, porro
 38 |       quaerat nesciunt iusto a numquam molestias suscipit veniam, aspernatur,
 39 |       ducimus officiis earum optio! Sapiente neque, possimus impedit saepe
 40 |       ducimus similique consequatur quisquam eius suscipit sint nobis, fugiat,
 41 |       incidunt facere recusandae debitis animi consectetur velit totam!
 42 |       Deserunt, odit molestias molestiae fugiat ipsam numquam ut accusamus
 43 |       officiis voluptate perferendis? Neque assumenda accusantium labore quidem
 44 |       eligendi laboriosam officia nihil, culpa repellat recusandae iste eveniet
 45 |       officiis alias sint molestias voluptatum sequi excepturi quis velit
 46 |       voluptate tenetur illo, amet corrupti veritatis. Iste eligendi esse
 47 |       molestiae. Rerum illum placeat libero, fugit optio cumque culpa.
 48 |       Voluptates rerum, corrupti nulla quas laboriosam cum, modi excepturi illo
 49 |       libero, at quis mollitia saepe molestias necessitatibus similique
 50 |       asperiores aliquid nisi illum nam? Quibusdam facilis ducimus beatae
 51 |       provident aspernatur eum veniam voluptatem quia! Facere, animi. Magnam
 52 |       temporibus, cumque omnis, cum veniam saepe iusto reiciendis quaerat
 53 |       dignissimos placeat nisi porro, corrupti sunt molestiae dolor quia itaque
 54 |       aut. Maxime quisquam perspiciatis illo sed repudiandae? Cupiditate, sed
 55 |       repellendus consequatur voluptas dolorum, vel enim cumque impedit iusto
 56 |       placeat animi voluptatibus incidunt, pariatur deleniti facere
 57 |       consequuntur. Id in, odio, voluptatum ad maiores exercitationem officia ex
 58 |       ipsum, voluptas deserunt necessitatibus quibusdam? Aliquid aut ipsam quo
 59 |       tempora culpa nesciunt sint unde commodi quam eveniet eius deserunt minima
 60 |       repellendus officia quos, voluptates facilis autem tempore ea magnam
 61 |       sapiente doloribus placeat animi mollitia. Sunt explicabo similique
 62 |       architecto expedita minima dolorum, nisi numquam laboriosam! Esse
 63 |       asperiores labore distinctio nihil veritatis, non aspernatur odit rerum
 64 |       quibusdam aut quisquam veniam expedita, ad debitis ipsam quia ducimus iure
 65 |       neque repellat quis quae fugit! Nobis et assumenda quisquam nihil
 66 |       dignissimos rerum maiores voluptas voluptatibus temporibus earum quod
 67 |       molestias, voluptatem nesciunt numquam incidunt optio vero vel, provident
 68 |       consequatur? Suscipit ipsam ad blanditiis esse? Temporibus architecto
 69 |       pariatur nam? Corporis placeat exercitationem asperiores magnam debitis
 70 |       accusantium itaque, fuga illum, obcaecati laboriosam, impedit non libero
 71 |       deleniti rem qui suscipit dolores eaque blanditiis dicta excepturi nihil!
 72 |       Vel perspiciatis doloribus libero dignissimos sint sed facere vero hic.
 73 |       Inventore accusamus error nulla repellendus, fugiat minima iure, eveniet
 74 |       expedita praesentium voluptas doloremque aliquam. Eos eius inventore
 75 |       exercitationem voluptatum sed. Provident dolor delectus maiores officia,
 76 |       dolorem ipsam harum quasi voluptas? Commodi animi sit sequi magnam illum?
 77 |       Fuga sunt iure mollitia assumenda excepturi voluptatem vel? Dicta expedita
 78 |       nam consequuntur cupiditate deleniti voluptatibus quia nemo veniam unde.
 79 |       Dolorum excepturi adipisci porro non perferendis in, earum fugiat quisquam
 80 |       itaque totam, deserunt corrupti ipsum a accusantium hic pariatur nihil
 81 |       maiores nulla natus cumque reprehenderit. Sunt corporis natus modi eius
 82 |       itaque, amet debitis obcaecati veniam ea quod accusamus repellendus
 83 |       consequatur veritatis quis facere laborum aperiam reiciendis placeat
 84 |       voluptas, tempore aspernatur ipsa sit dolores. Voluptatem veniam quam
 85 |       magnam suscipit! Explicabo reiciendis itaque accusantium dolorum aliquam
 86 |       quo, deserunt, debitis optio magnam quidem autem incidunt. Perspiciatis
 87 |       quam fuga mollitia, amet, quas ipsa modi ea, voluptatem facere nostrum
 88 |       vitae officia ut distinctio assumenda. Earum accusantium aut, sapiente eos
 89 |       vel magnam modi, tempore placeat sint est incidunt ad error et eum numquam
 90 |       quaerat perspiciatis id provident qui enim iusto similique. Et voluptatum
 91 |       fugit ratione sunt saepe accusantium magnam omnis nam asperiores tempore
 92 |       repudiandae odio eum, rerum incidunt, adipisci quam suscipit obcaecati ex
 93 |       dolorem id aliquam nobis exercitationem! Sit, doloremque. Voluptatibus
 94 |       nesciunt exercitationem magni accusantium, laborum fugit ipsum odio
 95 |       maiores similique eaque amet recusandae provident vero, asperiores quis
 96 |       reiciendis, dolorem atque quos quas? Adipisci, nesciunt assumenda in
 97 |       quaerat cum quo hic quidem repellendus iste obcaecati! Est quasi animi
 98 |       quisquam suscipit odio repellendus, accusantium quidem possimus tenetur
 99 |       voluptates eos fugit eius eligendi assumenda culpa numquam reprehenderit
100 |       quas perferendis autem? Commodi consequatur provident facilis, sapiente
101 |       nostrum tempora. Laboriosam eligendi, adipisci perferendis reiciendis
102 |       laudantium atque voluptates animi accusamus inventore vitae porro debitis
103 |       numquam eos id explicabo. Minima deleniti pariatur qui enim, asperiores
104 |       distinctio facilis natus et aspernatur labore doloremque, officia velit
105 |       harum quos ratione minus itaque nemo vitae id nobis impedit optio
106 |       eligendi. Pariatur repellat numquam quos, porro illum inventore
107 |       perspiciatis quasi, temporibus ut vitae consectetur blanditiis beatae
108 |       perferendis, nesciunt dolore maxime dolor molestias eveniet provident sed.
109 |       Ea possimus voluptates eveniet nobis consectetur iusto, laboriosam
110 |       delectus nesciunt, inventore ipsa nam repudiandae repellat, atque iste
111 |       optio neque id incidunt itaque commodi porro. Autem aperiam quasi
112 |       molestiae veritatis soluta quo provident, eos officiis sequi eum deserunt
113 |       nobis ipsum alias ipsa quod in, quia velit. Distinctio voluptatibus
114 |       placeat neque nisi hic, voluptates labore laboriosam consequatur, velit
115 |       dolorem, unde facere eligendi impedit quis reprehenderit eos reiciendis
116 |       voluptatum dicta id rerum? Similique laboriosam tempore consectetur
117 |       exercitationem eveniet officia at vel, rerum amet alias nisi molestias
118 |       magni illum eius incidunt magnam atque aliquam accusamus, asperiores,
119 |       provident beatae tempora hic blanditiis. Minima repellendus optio
120 |       quisquam! Enim voluptates sit placeat perferendis error iure ut. Nulla
121 |       eaque ipsum tempore quo aut dignissimos officia culpa nihil molestiae odit
122 |       corporis harum, repellendus sit facere adipisci quam obcaecati inventore,
123 |       laborum incidunt tempora! Cupiditate, pariatur voluptate tempora ea illum
124 |       dolorum modi quaerat dolorem cum a debitis ipsa! Magni qui debitis
125 |       assumenda? Consequatur impedit consequuntur fugit!
126 |     </p>
127 |   </div>
128 | </template>
129 | 
130 | <style lang="scss" scoped></style>
131 | 


--------------------------------------------------------------------------------