diff --git a/components.d.ts b/components.d.ts index 79c1c0e..e2893a1 100644 --- a/components.d.ts +++ b/components.d.ts @@ -12,6 +12,7 @@ export {} /* prettier-ignore */ declare module 'vue' { export interface GlobalComponents { + AnimatePresence: typeof import('motion-v')['AnimatePresence'] Button: typeof import('./src/components/ui/button/Button.vue')['default'] Calendar: typeof import('./src/components/ui/calendar/Calendar.vue')['default'] CalendarCell: typeof import('./src/components/ui/calendar/CalendarCell.vue')['default'] @@ -47,6 +48,7 @@ declare module 'vue' { // For TSX support declare global { + const AnimatePresence: typeof import('motion-v')['AnimatePresence'] const Button: typeof import('./src/components/ui/button/Button.vue')['default'] const Calendar: typeof import('./src/components/ui/calendar/Calendar.vue')['default'] const CalendarCell: typeof import('./src/components/ui/calendar/CalendarCell.vue')['default'] diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 044a401..63b488f 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -27,6 +27,8 @@ export default defineConfig({ { text: "组件库", link: "/cli-feature/component-lib" }, { text: "国际化", link: "/cli-feature/international" }, { text: "图表", link: "/cli-feature/chart" }, + { text: "辅助工具", link: "/cli-feature/radash" }, + { text: "动画", link: "/cli-feature/motion" }, ], }, ], diff --git a/docs/cli-feature/motion.md b/docs/cli-feature/motion.md new file mode 100644 index 0000000..53d13a5 --- /dev/null +++ b/docs/cli-feature/motion.md @@ -0,0 +1,33 @@ +# 动画 + +## 使用 + +:::warning 警告 +motion-v 的自动引入系统经过测试无法使用，您仍需要手动引入 +::: + +Hucky 安装了 [motion-v](https://motion.net.cn/docs/vue) 库，您可以在组件中使用它来添加动画效果。 + +简单来看，您只需要引入 motion-v 的 `motion` 组件，并使用它来包裹需要添加动画效果的元素，然后编写 :animate 指令即可。 + +```html + +``` + +您也可以通过设置 :initial 指令来设置元素的初始状态。 + +```html + +``` + +通过 `AnimatePresence` 组件，您可以在元素进入或退出时添加动画效果。 + +```html + + + +``` + +:::tip 提示 +exit 会自动为元素的进入也添加动画效果。 +::: diff --git a/docs/cli-feature/radash.md b/docs/cli-feature/radash.md new file mode 100644 index 0000000..cb9e2a9 --- /dev/null +++ b/docs/cli-feature/radash.md @@ -0,0 +1,34 @@ +# 辅助工具 + +## 使用 + +Hucky 安装了 [Radash](https://radash.uihtm.com/) 库，用于辅助处理数组、对象、字符串等数据。 + +您可以自行查询文档来了解更多用法。 + +## 节流 + +在查阅 Radash 文档时发现其 `throttle` 函数的使用存在错误，在这里补充纠正，在文档中的用法如下： + +```ts +import { throttle } from 'radash' + +const throttledScroll = throttle(() => { + console.log('Scroll event handled') +}, 100) + +window.addEventListener('scroll', throttledScroll) +// 滚动时，函数最多每100ms执行一次 +``` + +事实上 `throttle` 函数的第一个参数才是节流时间，第二个参数是函数。正确写法应该如下： + +```ts +import { throttle } from 'radash' + +const throttledScroll = throttle(100, () => { + console.log('Scroll event handled') +}) + +window.addEventListener('scroll', throttledScroll) +``` diff --git a/src/components/menu/NavBar.vue b/src/components/menu/NavBar.vue index 0d41b1e..140a952 100644 --- a/src/components/menu/NavBar.vue +++ b/src/components/menu/NavBar.vue @@ -2,58 +2,88 @@ import ChangeLanguageDropdownButton from "@/components/button/ChangeLanguageDropdownButton.vue"; import ChangeThemeDropdownButton from "@/components/button/ChangeThemeDropdownButton.vue"; import { useI18n } from "vue-i18n"; +import { throttle } from "radash"; +import { AnimatePresence, motion } from "motion-v"; const { t } = useI18n(); + +const showNavBar = ref(true); +const curScrollY = ref(0); + +const handleThrottleScroll = throttle(100, () => { + const scrollY = window.scrollY; + if (scrollY > curScrollY.value) { + showNavBar.value = false; + } else { + showNavBar.value = true; + } + curScrollY.value = scrollY; +}); + +window.addEventListener("scroll", handleThrottleScroll); diff --git a/vite.config.ts b/vite.config.ts index 0ddc2a8..4beb029 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -5,6 +5,7 @@ import tailwindcss from "@tailwindcss/vite"; import vueJsx from "@vitejs/plugin-vue-jsx"; import AutoImport from "unplugin-auto-import/vite"; import Components from "unplugin-vue-components/vite"; +import MotionResolver from "motion-v/resolver"; import { ElementPlusResolver } from "unplugin-vue-components/resolvers"; // https://vite.dev/config/ @@ -19,7 +20,7 @@ export default defineConfig({ resolvers: [ElementPlusResolver()], }), Components({ - resolvers: [ElementPlusResolver()], + resolvers: [ElementPlusResolver(), MotionResolver()], dts: true, }), ],