网站LOGO
白雾茫茫丶
页面加载中
5月22日
网站LOGO 白雾茫茫丶
记录学习、生活和有趣的事
菜单
  • 白雾茫茫丶
    记录学习、生活和有趣的事
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    Nuxt3 实战 (五):Header 头部布局
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    • 复制图片
    • 复制图片地址
    • 百度识图
    按住ctrl可打开默认菜单

    Nuxt3 实战 (五):Header 头部布局

    谢明伟 · 原创 ·
    前端开发Nuxt3 实战 · VueNuxt
    共 3374 字 · 约 1 分钟 · 391

    前言

    这两周一直忙公司系统的迭代需求,没啥时间捣鼓自己的小项目,趁着项目进入测试收尾阶段,抽空把 Layout 布局的 Header 部分先搞好。

    需求拆分

    1. 顶部左侧放 Logo,右边放社交图标,暗黑模式切换
    2. 提前准备好 Logo 和网站 favicon.ico 图标
    3. 布局组件拆分

    先简单这样布局,后期会考虑加一个 搜索输入框

    Layouts 布局

    Nuxt 提供了一个布局框架,用于将常见的 UI 模式提取为可重用的布局。

    1. app.vue 中添加 ,可以启用布局:

      vue 代码:
      <template>
        <NuxtLayout>
      <NuxtPage />
        </NuxtLayout>
      </template>
    2. 安装 @nuxt/imagenuxt-icons

      powershell 代码:
      pnpm add @nuxt/image nuxt-icons -D

      nuxt.config.ts 文件中启用:

      ts 代码:
      modules: ['@nuxt/image', 'nuxt-icons'],
    3. 新建 components/AppColorMode.vue 白天暗黑模式切换组件:

      vue 代码:
       <script setup lang="ts">
       const colorMode = useColorMode()
      
       function toggleDark() {
      colorMode.value = colorMode.value === 'dark' ? 'light' : 'dark'
       }
      
       </script>
      
       <template>
      <UTooltip :text="`切换${$colorMode.value === 'dark' ? '白天' : '黑夜'}模式`">
       <UButton
         :icon="$colorMode.value === 'dark' ? 'i-heroicons-moon-solid' : ' i-heroicons-sun-solid'"
         size="sm"
         variant="ghost"
         class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800"
         @click="toggleDark"
       />
      </UTooltip>
       </template>
    4. 新建 components/UColorModeSVG.vue 组件,SVG 跟随白天暗黑模式:

      vue 代码:
       <script setup lang="ts">
       const colorMode = useColorMode()
      
       defineProps<{
      name:string; // svg 路径
      lightFill?:string; // 亮色模式填充
      darkFill?:string; // 暗色模式填充
      className?:string; // 图片样式
       }>()
      
       // 判断是否暗色模式
       const isDark = colorMode.preference === 'dark'
       </script>
      
       <template>
      <nuxt-icon
       :name="name"
       :fill="isDark ? darkFill : lightFill"
       :class="className"
      />
       </template>
      
       <style>
       .nuxt-icon svg{
      width:auto;
      height:auto;
      margin-bottom: 0;
       }
       </style>
    5. 新建 components/AppHeader 头部组件:

      text 代码:
       <template>
      <header class="static top-0 h-14 shadow-md dark:shadow-white-500/50 backdrop-blur dark:bg-transparent transition-all py-3 px-4 md:px-8 lg:px-32">
       <nav class="flex gap-4 justify-between items-center">
         <!-- 左侧 logo -->
         <HeaderLogo />
         <!-- 右侧 社交图标 -->
         <HeaderSocial />
       </nav>
      </header>
       </template>
      
       <style scoped>
       .dark header{
      box-shadow: 0 4px 6px -1px rgb(255 255 255 / 0.1), 0 2px 4px -2px rgb(255 255 255 / 0.1);
       }
       </style>
    6. 新建 layouts/default.vue 默认布局组件:

      vue 代码:
      <template>
        <div>
      <AppHeader />
      <slot />
        </div>
      </template>

    最终效果

    1. PC端
    1. 移动端

    总结

    目前实现的效果比较简单,先把基本布局和功能实现,后期再具体调整。

    好了,今天就到这吧!

    Github 仓库dream-site

    线上预览dream-site.cn

    声明:本文由 谢明伟(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    我要发表评论 我要发表评论
    博客logo 白雾茫茫丶 记录学习、生活和有趣的事 51统计 百度统计
    MOEICP 萌ICP备20236860号 ICP 粤ICP备2023007649号 ICP 粤公网安备44030402006402号

    💻️ 谢明伟 昨天 17:13 在线

    🕛

    本站已运行 2 年 141 天 13 小时 11 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    白雾茫茫丶. © 2022 ~ 2024.
    网站logo

    白雾茫茫丶 记录学习、生活和有趣的事